1. css定義
層疊樣式表（英語(yǔ)：Cascading Style Sheets，簡(jiǎn)寫(xiě)CSS）涩哟，又稱(chēng)串樣式列表索赏、級(jí)聯(lián)樣式表、串接樣式表贴彼、層疊樣式表潜腻、階層式樣式表，一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體器仗、間距和顏色等）的計(jì)算機(jī)語(yǔ)言融涣，由W3C定義和維護(hù)。目前最新版本是CSS2.1，為W3C的推薦標(biāo)準(zhǔn)威鹿。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持妓盲，而下一版的CSS4仍在開(kāi)發(fā)中。
2. css的工作原理
當(dāng)瀏覽器顯示文檔時(shí)专普，它必須將文檔的內(nèi)容與其樣式信息結(jié)合悯衬。它分兩個(gè)階段處理文檔：
- （1）瀏覽器將 HTML 和 CSS 轉(zhuǎn)化成 DOM （文檔對(duì)象模型）。DOM在計(jì)算機(jī)內(nèi)存中表示文檔檀夹。它把文檔內(nèi)容和其樣式結(jié)合在一起筋粗。
-
（2）瀏覽器顯示 DOM 的內(nèi)容。
css工作原理.png
3. css的引用
a. 外部樣式表
在HTML的<head>標(biāo)簽中炸渡，使用<link>元素中引用
b. 內(nèi)部樣式表
將 CSS 放置在<style>元素中娜亿，該元素包含在 HTML head 內(nèi)。
c. 內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是僅影響一個(gè)元素的CSS聲明蚌堵，被 style 屬性包括著买决。
4. css的語(yǔ)法
a. 最常用的形式
選擇器 ｛
屬性名：屬性值；
屬性名：屬性值吼畏；
……
｝
b. 一些概念
css聲明：一個(gè)屬性名就是一個(gè)聲明
css聲明塊：每一組聲明都用一對(duì)大括號(hào)包裹,一個(gè){聲明組}就是一個(gè)css聲明塊
css選擇器：如上所示位置督赤，用來(lái)匹配對(duì)應(yīng)元素
css選擇器組：多個(gè)選擇器用逗號(hào)隔開(kāi)
規(guī)則（規(guī)則集: 選擇器加上聲明塊
c. css語(yǔ)句（CSS statements）
CSS 規(guī)則是樣式表的主要組成塊 —— 是 CSS 中最常見(jiàn)的塊。但還有一些其它類(lèi)型的塊 —— CSS 規(guī)則只是被稱(chēng)為 CSS 語(yǔ)句中的一種泻蚊。
其它類(lèi)型如下：
@-規(guī)則 (At-rules): 在CSS中被用來(lái)傳遞元數(shù)據(jù)躲舌、條件信息或其它描述性信息。
它由（@）符號(hào)開(kāi)始性雄，緊跟著一個(gè)表明它是哪種規(guī)則的描述符没卸，之后是這種規(guī)則的語(yǔ)法塊，并最終由一個(gè)半角分號(hào)（;）結(jié)束秒旋。每種由描述符定義的@-規(guī)則约计，都有其特有的內(nèi)部語(yǔ)法和語(yǔ)義。一些例子如下：
@charset 和 @import （元數(shù)據(jù)）
@media 或 @document （條件信息迁筛，又被稱(chēng)為嵌套語(yǔ)句煤蚌，見(jiàn)下方。)
@font-face （描述性信息）
具體語(yǔ)法示例： @import 'custom.css'; 該@-規(guī)則向當(dāng)前 CSS 導(dǎo)入其它 CSS 文件
嵌套語(yǔ)句：是@-規(guī)則中的一種瑰煎，它的語(yǔ)法是 CSS 規(guī)則的嵌套塊铺然，只有在特定條件匹配時(shí)才會(huì)應(yīng)用到文檔上。特定條件如下：
@media 只有在運(yùn)行瀏覽器的設(shè)備匹配其表達(dá)條件時(shí)才會(huì)應(yīng)用該@-規(guī)則的內(nèi)容酒甸；
@supports 只有瀏覽器確實(shí)支持被測(cè)功能時(shí)才會(huì)應(yīng)用該@-規(guī)則的內(nèi)容魄健；
@document 只有當(dāng)前頁(yè)面匹配一些條件時(shí)才會(huì)應(yīng)用該@-規(guī)則的內(nèi)容。
具體語(yǔ)法示例 下述的嵌套語(yǔ)句只有在頁(yè)面寬度超過(guò)801像素時(shí)才會(huì)應(yīng)用插勤。
@media (min-width: 801px) {
body {
margin: 0 auto;
width: 800px;
}
}
5. 語(yǔ)法之外：使 CSS 更具可讀性
空格：例如沽瘦，屬性和屬性值邊上的空格革骨，margin: 0 auto;
注釋: /* 注釋內(nèi)容 */ ， 利用注釋是代碼更容易理解
簡(jiǎn)寫(xiě): 一些屬性比如 font析恋，background良哲，padding，border助隧，和 margin 被稱(chēng)為簡(jiǎn)寫(xiě)屬性 —— 這是由于它們?cè)试S你在一行設(shè)置多個(gè)屬性筑凫，從而節(jié)省時(shí)間并使代碼更整潔。
