語法教學

CSS 基礎課程

CSS 基本語法 - 如何寫 CSS?

內容

如何寫 CSS?

CSS 的語法其實很簡單,只要記住基本的規則後,就可以自己邊參考文件來撰寫了。底下是 CSS 宣告語法:

selector {property: value}

selector 是選擇器。說的簡單一點,就是你想要定義樣式的 HTML 標籤,像是 body、p、h1 等等,後面會有更仔細地介紹。property 是你想要改變的特性名稱,例如顏色、字型大小,而 value 則是此特性的設定值。特性和值中間需要用冒號分開,並且外面用大括號。例如:

body {font-size: 12px}

就是設定 body 標籤的字型大小為 12 像素,而 body 標籤也就是網頁內容的所在。因此使用這個樣式後,網頁中的預設文字就會變成 12 像素。假如想在 body 標籤中定義一種以上的特性的話,我們必須使用分號將這些特別一一隔開。記得使用大括號將全部的特性包住:

body {font-size: 12px; color: #FF0000; font-style: italic}

上面就是設定網頁中預設字型大小為 12 像素、顏色為紅色 (#FF0000) 以及斜體,一次在一行中設定三種特性。不過為了容易閱讀及修改,我們通常都會把每個特性單獨列成一行,以方便日後的維護:

body {
font-size: 12px;
color: #FF0000;
font-style: italic
}

群體定義

在一個標籤中定義數個特性很簡單,用分號區隔就行了。如果我們想要讓數個標籤設定同一個樣式的話,就需要在選擇器的部份使用逗號將它們分開:

h1, h2, h3 {
color: #0000FF;
font-weight: bold
}

這樣我們就可以設定讓 h1、h2 和 h3 標籤中的字體顏色為藍色 (#0000FF),並且都變成粗體字。

站內連結