2.2 CSS基本語法

2.2.1 CSS語法

CSS規則由兩個主要的部分構成：選擇器與聲明。聲明可以是一條，或者多條聲明。多條聲明在書寫時用“；”分隔開。如圖2-3所示。

圖2-3 CSS基本語法格式

在上圖中，h1是選擇器，color和font-size是屬性，blue和36pt是值。

選擇器（selector）通常是用戶需要改變樣式的HTML元素；聲明（Declaration）是由一個屬性和一個值組成；屬性（property）是希望設置的樣式屬性（style attribute）；值就是賦予樣式屬性的一個具體值，屬性和值在書寫的時候用冒號分隔開。

2.2.2 id選擇器和class選擇器

Id選擇器和class選擇器是CSS中最常用到的選擇器。當需要在HTML元素中設置CSS樣式時，可以在元素中設置“id”或者“class”選擇器。

1.id選擇器

id選擇器可以為標有特定id的HTML元素指定特定的樣式。HTML元素以id屬性來設置id選擇器，CSS中id選擇器以“#”來定義。

【例2-3】制作在樣式表中使用了id選擇器的網頁，在瀏覽器中顯示如圖2-4所示。

圖2-4 id選擇器設置效果圖

代碼如下：

如上述代碼所示，文字“意大利球星皮耶羅1”定義了CSS樣式表，而文字“意大利球星皮耶羅2”沒有定義CSS樣式表。

2.class選擇器

class選擇器用于描述一組元素的樣式，其有別于id選擇器，class可以在多個元素中使用。class選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個點“.”號顯示。如在下面實例中，所有擁有center類的HTML元素均為居中。

【例2-4】制作在樣式表中使用了class選擇器，在瀏覽器中顯示如圖2-5所示。

圖2-5 class選擇器設置效果圖

代碼如下：

如上述代碼所示，文字“意大利球星皮耶羅1”定義了class類選擇器，而文字“意大利球星皮耶羅2”沒有定義class類選擇器。