前端技術之如何網頁中使用CSS樣式表發布者：本站 時間：2020-05-16 09:05:29
CSS英文全稱Cascading Style Sheet，中文翻譯為：層疊樣式表單。是用于增強控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。 是網站前端開發必備的技術。CSS/DIV布局設計已經完全替代過去的table布局，并被納入W3C標準。作為一名前端開發人員或者即將踏入前端開發行業的你是否熟練掌握這一技能，能夠熟練運用CSS進行網頁設計呢？不管你熟練或者不熟練請先來看看下文，我將給大家簡短的介紹如何在前端網頁開發中使用CSS技術。
目前，你可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。
1、外部調用樣式表文件
你可以先建立外部樣式表文件（xxx.css），然后通過HTML的link方法，將其鏈接到要使用到的網頁。示例如下：
<head>
<title>the title</title>
<link rel=stylesheet href="xxx.css" type="text/css">
</head>
請記住，使用這種方法一定要注意引用路徑問題，引用路徑出錯樣式表文件就不會作用于當前網頁。如果外部引入的CSS文件非常大，可能會影響到網頁的加載速度，這時候如果你比較精通CSS的話，可以對樣式文件進行精簡瘦身，也可以使用壓縮工具來壓縮CSS文件。壓縮工具網站上有，有興趣的朋友可以上網上去搜一搜。
2、內部定義樣式文件
你也可以在當前網頁的頭部文件<head></head>之間插入<style>...</style>塊對象。定義方式請參閱樣式表語法。示例如下：
<head>
<style type="text/css">
body {font:14px "Arial"}
h1{size:100%;color:#eee}
a{color:#333;text-decoration:none}
p{font:12px "宋體";color: black}
</style>
</head>
請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。通常是都要寫全的，如果不加上可能會發生意外錯誤。
3、HTML對象元素內部定義CSS樣式
內部定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。內部定義樣式表語法：<element style="property: value"></element>。參數說明：element——HTML對象；property:value——樣式表定義屬性和屬性值之間用冒號（：）隔開、定義之間用分號（；）隔開。示例文件如下：
<body>
<p style="font-size:12px "Verdana";color:red">xxxooo</p>
</body>
以上三種樣式表的優先級是：內嵌樣式表>內部樣式表>外部樣式表。當然優先級高的并不一定代表是最好的，在實際開發過程中我們可以靈活來運用，如果你一定要問我哪種方法用得最多，我會告訴你是前面兩種。
選擇我們，優質服務，不容錯過
1. 優秀的網絡資源，強大的網站優化技術，穩定的網站和速度保證
2. 15年上海網站建設經驗，優秀的技術和設計水平，更放心
3. 全程省心服務，不必擔心自己不懂網絡，更省心。
------------------------------------------------------------
24小時聯系電話：021-58370032