Menu - Pages

網頁教學:CSS之基本格式

 

      圖1是CSS樣式表之基本格式。CSS樣式表係由選擇器與樣式規則所組成。

CSS之基本格式

圖1  CSS樣式表之基本格式(CSS樣式檔案名稱為test.css)

CSS之基本格式2

圖2  在網頁內容中套用CSS樣式文件(採用『連結外部樣式檔』之方式)

CSS之基本格式3

圖3  依據圖2內容製作之網頁內容(以瀏覽器瀏覽之結果)

一、選擇器(selector)

      選擇器係指CSS樣式要套用的目標,套用之目標可以是HTML標記。由圖1之內容來看,<h2>標記就是一個HTML的標記,而在CSS樣式表中,<h2>就是一個選擇器,只要網頁之內容套用了圖1內容之CSS樣式表,網頁內容中所有<h2>標記皆會套用圖1內容之CSS樣式表之內容。

二、樣式規則(rule)

      樣式規則係用大括號 { 與 } 括起來之部分,示如圖1。每一樣式規則係由屬性及設定值組成。由圖1之內容來看,<color>就是屬性,而『blue』就是設定質。此外,一個選擇器中可以設定多種不同的規則,各種不同規則間只要以分號(;)分隔就可以。舉例來說,在設定網頁內容中<h2>標記時,除了可設定文字之顏色外,亦可以設定字型(font-family)與字體粗細(font-weight)(示如圖1)。

三、加入註解

      為了讓製作之CSS樣式表內容更容易閱讀,以方便之後網頁內容之維護,除了在撰寫CSS樣式表時將樣式規則(rule)分行撰寫,還可以在CSS樣式表內容中加入註解。圖1之內容中,是否可看到「/*文字大小*/」、「/*設定行高*/」等字串,這就是CSS樣式表加入註解之語法,/*與*/間之文件內容,在用瀏覽器瀏覽網頁時並不會顯示。

【小提示:還記得嗎?在HTML之語法裡,註解的輸入語法係將文字寫在<!--與-->之間。】