CSS學習（一）選取器

CSS 文法  http://www.w3school.com.cn

1.CSS 文法由三部分構成：選取器、屬性和值：

selector {property: value}

（1）選取器 (selector) 通常是你希望定義的 HTML 元素或標籤，屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration）：

body {color: blue}

上面這行代碼的作用是將 body 元素內的文字顏色定義為藍色。在上述例子中，body 是選取器，而包括在花括弧內的的部分是聲明。聲明依次由兩部分構成：屬性和值，color 為屬性，blue 為值。

（2）如果你不希望 "Verdana, sans-serif" 字型被所有的子項目繼承，又該怎麼做呢？比方說，你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：

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;     }

（3）比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器：

li strong {    font-style: italic;    font-weight: normal;  }

請注意標記為 <strong> 的藍色代碼的上下文關係：

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。

 

2.id 選取器

（1）id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選取器以 "#" 來定義。

下面的兩個 id 選取器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}#green {color:green;}

下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p><p id="green">這個段落是綠色。</p>

注意：id 屬性只能在每個 HTML 文檔中出現一次。

（2）id 選取器和派生選取器

在現代布局中，id 選取器常常用於建立派生選取器。

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。

 

3.類別選取器----以一個點號顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。

在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。

<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>

注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選取器：

.fancy td {color: #f60;background: #666;}

在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基於它們的類而被選擇：

td.fancy {color: #f60;background: #666;}

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">

你可以將類 fancy 分配給任何一個表格元素任意多的次數。

 

4.多重樣式

如果某些屬性在不同的樣式表中被同樣的選取器定義，那麼屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選取器的三個屬性：

h3 {  color: red;  text-align: left;  font-size: 8pt;  }

而內部樣式表擁有針對 h3 選取器的兩個屬性：

h3 {  text-align: right;   font-size: 20pt;  }

假如擁有內部樣式表的這個頁面同時與外部樣式表連結，那麼 h3 得到的樣式是：

color: red; text-align: right; font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字流向（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。