CSS 概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊爲一
樣式表極大地提高了工作效率
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標籤和顏色屬性所起的作用那樣。
樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的佈局和外觀。
由於允許同時控制多重頁面的樣式和佈局，CSS 可以稱得上 WEB 設計領域的一個突破。作爲網站開發者，你能夠爲每個 HTML 元素定義樣式，並將之應用於你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然後網站中的所有元素均會自動地更新。
多重樣式將層疊爲一個
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位於 <head> 標籤內部）
- 內聯樣式（在 HTML 元素內部）
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
h1 {color:red; font-size:14px;}選擇器通常是需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成，使用花括號來包圍聲明。如果要定義不止一個聲明，則需要用分號將每個聲明分開。分號在英語中是一個分隔符號，不是結束符號。
每條聲明由一個屬性和一個值組成，使用花括號來包圍聲明。如果要定義不止一個聲明，則需要用分號將每個聲明分開。分號在英語中是一個分隔符號，不是結束符號。
屬性（property）是希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。如果值爲若干單詞，則要給值加引號。
與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
選擇器的分組
可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。
繼承及其問題
根據 CSS，子元素從父元素繼承屬性。但有些舊式瀏覽器無法理解繼承，可以通過"Be Kind to Netscape 4" 的冗餘法則處理該問題。
創建一個針對子元素的特殊規則，這樣它就會擺脫父元素的規則。
創建一個針對子元素的特殊規則，這樣它就會擺脫父元素的規則。
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，可以使標記更加簡潔。
通過依據元素在其位置的上下文關係來定義樣式，可以使標記更加簡潔。
比如，希望列表中的 strong 元素變爲斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
<ol>
<li><strong>我是斜體字。這是因爲 strong 元素位於 li 元素內。</strong></li>
</ol>id 選擇器
id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。
#red {color:red;}
<p id="red">這個段落是紅色。</p>id 屬性只能在每個 HTML 文檔中出現一次。
在現代佈局中，id 選擇器常常用於建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}CSS 類選擇器
在 CSS 中，類選擇器以一個點號顯示。
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>和 id 一樣，class 也可被用作派生選擇器：
.fancy td {
color: #f60;
background: #666;
}元素也可以基於它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy"> </td>CSS 屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式。可以爲擁有指定屬性的 HTML 元素設置樣式，而不僅限於 class 和 id 屬性。
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
[title]
{
color:red;
}
<p title="Hi">Hi!</p>CSS 選擇器參考手冊
選擇器 描述
選擇器 描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。