1 認識CSS樣式

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。

如下列程式碼：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字型、字號或者顏色等。

2 CSS樣式的優勢

為什麼使用css樣式來設定網頁的外觀樣式呢？右邊編輯器是一段文字，我們想把“超酷的網際網路”、“服務及時貼心”、“有趣易學”這三個短語的文字顏色設定為紅色，這時就 可以通過設定樣式來設定，而且只需要編寫一條css樣式語句。

第一步：把這三個短語用<span></span>括起來。

第二步：寫入下列程式碼：

span{
    color:red;
}

觀察結果視窗文字的顏色是否變為紅色了。

3 CSS程式碼語法

css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成，如下圖所示：

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。

宣告：在英文大括號“｛｝”中的的就是宣告，屬性和值之間用英文冒號“：”分隔。當有多條宣告時，中間可以英文分號“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

(1) 最後一條宣告可以沒有分號，但是為了以後修改方便，一般也加上分號。

(2) 為了使用樣式更加容易閱讀，可以將每條程式碼寫在一個新行內，如下所示：

p{
   font-size:12px;
   color:red;
}

4 CSS註釋程式碼

就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用<!--註釋語句-->)。就像下面程式碼：