本文是一篇關於CSS的應用概述，並提供了一些樣本來示範CSS是如何工作的，以便於你更加有效學習CSS。
本文並不是參考或者相容性指南一類的文章（儘管其中有一些非常好的參考和相容性註解的連結)。如果你已經習慣了使用CSS，並想學到更多樣式表的知識，我們保證你會在本文中能夠找到一些非常有用的資訊:)。
●CSS不能做什嗎？
層疊樣式表通常被理解為實現“內容”和“風格”分開的手段。其實這種說法並不完全正確，因為根據你對“風格”和“內容”的定義不同，層疊樣式表的作用也不盡相同。
HTML定義了文檔的結構，同時將本文和映像及其他資料通過標記(tags)組織到一起。而CSS並不能影響文檔的結構組成。
層疊樣式表(CSS)所做的是定義這些元素以什麼樣的版式、什麼樣的顏色、間距……顯示到頁面當中，它還可以影響頁面內容的布局,卻不可能改變頁面的結構。CSS只能在有限的限度內應用於元素(不是萬能的)，而文件項目的結構還是要通過標記語言HTML來定義。
●使用CSS有什麼好處？
所有的HTML標記(Tags)都有各自預設的樣式(style).也就是說,瀏覽器會按照一定的基本規則來解釋和顯示每一個標記中的內容，但是我們通過內聯樣式(inline style)就可以優先於瀏覽器的預設樣式來控制內容的顯示樣式。瀏覽器預設的樣式表優先權最低。內聯樣式樣本如下：
| <p style="float:right;margin-left:1em;width:50%">Some text.</p> |
內聯樣式影響的僅僅是某些特定的標記，如上面樣本當中的<P>...</P>。而層疊樣式表卻提供了應用於所有給定標記樣式或者特定子集合樣式的途經。
CSS允許你設定與內容文檔分離的“批量”樣式表文檔，和樣式內嵌(inline style)至HTML代碼當中的方法不同，這就是樣式表使“內容”和“樣式”分離說法的由來。同時，層疊樣式表文檔可以讓更多的內容文檔共用使用。
●包含樣式表
每一個樣式表都是一系列的樣式規則的集合。可以在內容文檔的<HEAD>...</HEAD>之間使用STYLE標記來定義，樣本如下：
<style type="text/css"> ...style rules... </style> |
或者象調用JavaScript指令檔那樣通過URL連結到外部樣式表檔案，外聯樣式表利用 LINK 標記來設定，位置在內容檔案的<HEAD>...</HEAD>內，樣本如下：
<link href="url" rel="stylesheet" type="text/css">
註：在WEB網站內共用一個公用樣式表是非常有用的，只要修改公用樣式表，就能夠影響所有調用該樣式表的內容文檔。
在同一文檔內可以設定多個內聯樣式(inline style)和外聯樣式(link),但是具體文檔顯示時瀏覽器要根據那些樣式的順序來確定使用什麼樣式。(順序非常重要)
●定義樣式規則
CSS規則設定由下面所示的語句組成：
selector { property : value } selector { |
"Selector"定義了什麼元素將要被樣式規則所影響。緊接下來是聲明區，由大括弧"{","}"包圍。內部由若干個聲明(聲明個數大於等於零>=0)組成。每一聲明之間由分號“；”隔開。
每個聲明由“屬性(property)”和具體的一個“值(value)”組成，他們之間通過冒號串連。“屬性”是一個標識符，例如字型大小“font-size”，背景色“background-color”...等等。"值"的多少要控制在標識符屬性值的範圍內。
空白處以及分行形式來顯示主要是為了閱讀方便，空白處可以加入“註解”文字，樣本如下：
selector { /* a comment for this rule */ |
註解包含在/ *和* /內，同JavaScript、C程式設計語言的注釋寫法一樣。
●Selectors 選取器
最簡單的形式由標記名稱組成，不同的標記樣式規則相同時可以通過逗號“，”串連合并到一起說明，樣本：
h1 { background-color: #ffff00 }
h2 { background-color: #ffff00 }
h3 { background-color: #ffff00 }
上面的樣式說明合并到一起，寫法如下：
h1, h2, h3 { background-color: #ffff00 }
這種定義稱為“群組”定義。注意同一標記可以再次設定，次數不限，例：
h1, h2, h3 { background-color: #ffff00 }
h1 { color: red }
HTML標識名是不區分大小寫，所以“H1”等價於“h1”，但是文法更加嚴格的XHTML中，標識名必須小寫，所以最好有一個良好的書寫習慣，建議在書寫你的樣式表時使用小寫字母。
●Pattern Matching模式比對
Selectors並不僅僅局限於標識名，事實上，有多種匹配模式可以定義元素的樣式，甚至利用元素的屬性來定義。
Internet Explorer現在還不能支援所有的selector的匹配模式。建議使用Netscape或者Opera來測試下面的示範。
列表中例舉了Selectors不同的匹配模式和解釋以及線上示範的樣本連結。
| 模式 | 說明 | 示範 |
| E | 標準的selector、標識名E相配元素E | |
| E F | Descendant selector, 如果E標記包含F時，匹配F | |
| E>F | Child selector 、如果F是E的子標記，則匹配F | |
| E+F | Adjacent selector、如果E和F有相同的parent父標識同時F緊臨著E，則匹配F |
注意：其中" parent "、" child "、" descendant "、和" adjacent "這些名詞涉及到文檔內部的標記分級關係結構。舉例來說明：
| <div> <h3>What Good is CSS?</h3> <p>CSS gives you <i>very precise control</i> over how your web ages look. Use it to your advantage! </p> </div> |
Selector中還可以使用通用匹配符“*”：
h2 + * { color: red }
將任何緊接著H2的任何元素顯示為紅色
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
