1、CSS定義 CSS 指層疊樣式表 (Cascading Style Sheets)，是一種樣式表語言，用來描述 HTML 或 XML（包括如 SVG、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。 2、為何使用CSS 網 ...
1、CSS定義
CSS 指層疊樣式表 (Cascading Style Sheets)，是一種樣式表語言，用來描述 HTML 或 XML（包括如 SVG、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。
2、為何使用CSS
網頁是由HTML標簽組成的，那麼這些標簽會根據瀏覽器的預設方式進行排版與樣式的渲染，如果想要更改這些預設的樣式，推薦用CSS，因為這樣不僅實現了內容與表現分離的問題，而且更易於維護。
3、CSS語法
CSS 語法由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
其中每條聲明由一個屬性和一個值組成。
selector {property: value}
下麵這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
這張圖形象的表示了上面代碼的結構
CSS對空格和大小寫都不敏感，也就是說大小寫均可，是否包含空格不會影響 CSS 在瀏覽器中的工作效果
/* 屬性為大小，值為小寫，並且冒號後面有多個空格 */ .box { COLOR: blue; } /* 建議寫法 */ .box { color: blue; }
上面的兩種寫法在瀏覽器中顯示的效果是一樣的。
4、CSS註釋
與HTML語言一樣，CSS也同樣存在著註釋
4.1、單行註釋
/* 這是表示單行的註釋 */
註意：註釋不能嵌套，例如下麵的寫法都是錯誤的
/* 這是表示*/單行的註釋 */ /* 這是表示單行的註釋 /* */ */
4.2、多行註釋
/* * 這是表示多行的註釋 * 註釋內容1 * 註釋內容2 */
5、引入方式
5.1、行內式
行內式是在標簽的style屬性中設定CSS樣式。
<div style="..."></div>
5.2、嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中
<head> <meta charset="UTF-8"> <title>嵌入式</title> ... <style type="text/css"> ...在這裡寫CSS樣式 </style> </head>
5.3、外聯式
將CSS樣式寫在一個獨立的文件中，然後通過link標簽引入CSS樣式文件
<head> <meta charset="UTF-8"> <title>外聯式</title> ... <link rel="stylesheet" href="outer.css" /> </head>
type屬性：只有一個選項，“text/css"，指定當前為css文本文件
rel：指定當前HTML文件與CSS文件的關係是樣式表
href：指定外聯樣式表的路徑
5.4、導入式（不推薦使用）
將CSS樣式寫在一個獨立的文件中，然後通過@import標簽引入CSS樣式文件
<head> <meta charset="UTF-8"> <title>導入式</title> <style type="text/css"> @import url(css/outer.css); /*其他css樣式*/ </style> </head>
註意：導入樣式的書寫必須在所有的css規則書寫之前，否則失效，導入外部樣式表與鏈入外部樣式表類似，相當於在文件中直接使用，這會占用html文件的空間，故不推薦使用該方法，而且有些瀏覽器會最後載入導入的樣式，導致剛開始打開網頁的時候，沒有任何的樣式，到載入完畢之後才會導入樣式，用戶體驗不好
導入外部樣式表的另一種用途是，如果一個文件需要引用很多外部樣式表，可以把這些要引用的樣式表放在一個文件中，然後需要引用的文件則只需引用一個文件即可，如
import.css內容如下
@import “a.css”
@import “b.css”
@import “c.css”
除了以上4種導入的樣式之外，這裡需要知道所有的標簽都有一個預設樣式，我們稱為瀏覽器樣式，或者預設樣式。也就是不加任何樣式，HTML標簽在瀏覽器中的顯示的樣子。
6、建議與註意點
一些建議
- 為了以後的對代碼的優化，建議在每個屬性值的後面加一個分號，如：p { font-style: normal; }
- 某些html屬性有自定預設的CSS屬性值，如：<h1></h1>
- 為了相容瀏覽器，建議將所有的元素的CSS屬性值重置，如：<h1></h1>———>h1 { font-size: 12px; }
- 如果想要用某種特殊字體的話，又擔心用戶的上面沒有該字體，則可以用圖片代替
- 中英文字體的設置順序，先設置英文的字體，再設置中文的字體，如：p { "Courier New", "宋體" }，建議字體用雙引號
樣式應用順序
- 行內樣式優先順序最高
- 針對相同的樣式屬性，不同的樣式屬性將以合併的方式呈現
- 相同樣式並且相同屬性，呈現的方式由在<head>中的順序決定，後面會覆蓋前面定義過的屬性
- !important 指定樣式規則應用最優先
