基本語法

一個樣式(Style)的語法由三部分構成：Selector(中文叫選擇器有點怪怪的，就用英文吧)，屬性(Property)，屬性值(Value)。

selector {property: value}

舉個例子，下面的代碼p就是selector，color就是屬性，blue就是屬性值。

p {color:blue}

HTML中所有的Tag都可以作為selector。

注：如果你想為Style加多個屬性，在兩個屬性之間要用分號加以分隔。下面的Style就包含2個屬性，一個是對齊方式居中，一個字體顏色為紅，當中用分號分隔開。

p {text-align:center;color:red} 

為了提高Style代碼的可讀性，你也可以分行寫：

p

{

text-align: center;

color: black;

font-family: arial

} 

組合(Grouping)

你也可以將相同的屬性和屬性值賦予多個Selector。Selector之間用逗號分隔。

h1,h2,h3,h4,h5,h6 

{

color: red

}

上面的例子是將所有正文標題(<h1>到<h6>)的字體顏色都變成紅色。

Class Selector

利用Class Selector，你可以用同樣的HTML Tag構成不同的樣式。比如說，你希望段落<p>有兩種樣式，一種是居中對齊，一種是居右對齊。你就可以寫如下樣式：

p.right {text-align:right}

p.center {text-align:center}

其中right和center就是兩個class。然后你就可以引用這兩個class，示例代碼如下：

<p class="center">這一段居中顯示。</p>

<p class="right">這一段是居右顯示。</p>

演示示例

你也可以不用HTML Tag，直接用.加上Class名稱作為一個Selector。示例代碼如下：

.center {text-align: center} 

這種通用的Class Selector就沒有Tag的局限性，可以用于不同的Tag。比如：

<h1 class = "center">這個標題居中顯示。</h1>

<p class = "center">這個段落居中顯示。</p>

演示示例

Contextual Selector

你可以為嵌入其它Tag的Tag定義樣式，示例代碼如下：

p em{color: red}

Em這個Tag嵌套在P里面。p em就叫做Contextual Selector，定義嵌套于P里的Em的樣式。這個例子表示，在P里面的用Em這個Tag標記的字體顏色是紅色。

演示示例

CSS注釋

為了方便你自己或者他人日后更好地理解你的CSS代碼，你可以寫CSS代碼注釋。CSS代碼注釋以/*開頭，以*/結束。

/* 段落樣式 */

p

{

text-align: center;

/* 居中顯示 */

color: black;

font-family: arial

}