CSS

層疊樣式表 (Cascading Style Sheets，縮寫為 CSS）， 是一種 樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。

CSS的組成

• 屬性（Propertie）：一些人類可理解的標識符，這些標識符指出你想修改哪一些樣式，例如：字體，寬度，背景顏色等。
• 屬性值（Value）：每個指定的屬性都需要給定一個值，這個值表示你想把那些樣式特徵修改成什麼樣，例如，你想把字體，寬度或背景顏色改成什麼

color:red;

CSS的聲明

聲明按塊分組，每一組聲明都用一對大括弧包裹，用 ({) 開始，用 (}) 結束。

聲明塊里的每一個聲明必須用半形分號（;）分隔，否則代碼會不生效（至少不會按預期結果生效）。聲明塊里的最後一個聲明結束的地方，不需要加分號，但是最後加分號是個好習慣，因為可以防止在後續增加聲明時忘記加分號。

CSS選擇器

只聲明CSS還是沒有作用的，需要指定它的作用域，這時候就用到選擇器了。

• 類選擇器

通過設置HTML標籤的class屬性，可以為標籤設置class類名，類名由開發者自己決定，文檔中的多個元素可以擁有相同的類名。

<div class="user">第一個DIV</div> <div class="user">第二個DIV</div> <div class="user">第三個DIV</div>

.user{ border:1px solid red;}

• ID選擇器

通過設置HTML標籤的id屬性，可以為標籤設置Id，Id由開發者自己決定，文檔中的Id是唯一的，不可重複。

<div class="user" id="user1">第一個DIV</div> <br> <div class="user" id="user2">第二個DIV</div> <br> <div class="user" id="user3">第三個DIV</div>

#user1{ border:1px solid red; }#user2{ border:1px solid gray; }#user3{ border:1px solid green; }

• 偽類選擇器

CSS偽類（pseudo-class）是加在選擇器後面的用來指定元素狀態的關鍵字。比如，:hover 會在滑鼠懸停在選中元素上時應用相應的樣式。

#user1{ border:1px solid red; }#user2{ border:1px solid gray; }#user3{ border:1px solid green; }#user3:hover{ border:1px solid blue; }

偽類列表

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

創建CSS

常用的方式有三種

• 外部樣式表

使用link標籤引入，link標籤在head中。

• 內部樣式表

可以使用 style 標籤在文檔頭部定義內部樣式表

• 內聯方式

就是在HTML的標籤中使用style屬性來設置css樣式

他們的優先順序：當樣式衝突時，就是採用就近原則，是值css屬性離被修飾的內容最近的為主。

若沒有樣式衝突則採用疊加效果

推薦閱讀：