CSS (為網頁添加樣式)

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中使用

<!--注釋語句-->

)。就像下面代碼：