CSS 語法規則與結構

CSS 雖然不能真正算是程式語言，但也是一種「樣式語言」，因此也會有撰寫的語法規則和結構，這篇教學會介紹 CSS 的語法規則和結構，只要掌握基本要領，就能寫出容易閱讀與管理的 CSS。

快速導覽：

• 規則結構
• 空白與縮排
• 廠商字首
• 註解
• 巢狀結構

規則結構

每個 CSS 規則主要分成兩個結構，分別是「選擇器 selector」和「宣告區塊 declaration」，選擇器位在結構的左側，可以選擇 HTML 裡的特定元素，宣告區塊位在結構的右側，由「大括號 {}」搭配一個以上的「宣告」組成，每個宣告又由一組「屬性:數值」組成，每個宣告使用「分號 ;」結尾。

舉例來說，下方的寫法執行後，會將 h1 裡的文字改成「黃底紅字」。

h1 { color:red; background:yellow; }

實際撰寫時，如果有很多的宣告內容，也可以改成下方「列表式」的寫法，在閱讀上也會更加一目瞭然。

h1 { 
  color:red; 
  background:yellow; 
}

空白與縮排

CSS 的「空白」主要在處理「排版與縮排」，與規則並沒有實際的關聯性，然而 CSS 在處理空白的方式與 HTML 相同，會將「多個連續空白合併為一個空白」，下方列出一些常用的空白與縮排規則，實際撰寫時不一定要按照這些規則，但這是最常見的排版方式。

下方範例的 h1 是大多數編輯器自動排版時會用的方法，h2 是許多工程師撰寫 CSS 時常見的寫法，p 則是單行 CSS 的常見寫法。

h1 {
  font-size: 30px;
  color: red;
  background: yellow;
}
h2 {
  font-size:20px;
  color:blue;
  background:green;
}
p { font-size:14px; color:black; background:white; }

廠商字首

早期 CSS 為了因應不同的瀏覽器，刻意在許多支援度不同的屬性前方，使用「破折號 -」標記「廠商字首 vendor prefix」，藉以區分不同的瀏覽器所呈現的效果，但隨著瀏覽器的進步，逐漸不需使用這些廠商字首，但如果要跨足比較舊版的瀏覽器，部分屬性可能還是需要加上廠商字首。

常見的廠商字首如下：

• -webkit-：以 Webkit 為基礎的瀏覽器，例如 Chrome、Safari。
• -moz：以 Mozilla 為基礎的瀏覽器，荔竹 Firefox。
• ms：以微軟 IE 為基礎的瀏覽器。
• o：以 Opera 為基礎的瀏覽器。

註解

CSS 的註解類似 C/C++ 的註解模式，使用「/* */」包覆註解的內容，註解可以自己獨立一行，或擺放在宣告區塊後方，例如下方兩種方式都是常見的註解寫法。

注意，註解不能寫在宣告區塊裡。

/* 這是 h1 呦 */
h1 { color:red; }
h2 { color:blue; }  /* 這是 h2 呦 */

除了單行註解，也可以使用「多行註解」的方式，例如下方使用多行註解的方式說明 h1 和 h2 的差異。

/* 這是 h1 呦
   顏色是紅色
   表示大標題 */
h1 { color:red; }

/* 這是 h2 呦
   顏色是藍色
   表示各個段落的小標題 */
h2 { color:blue; }

使用多行註解需要注意註解的結尾「*/」，只要是包覆在註解裡的內容，都會成為註解的一部分，以下方的程式碼為例，因為有一些規則被註解所包覆，因此這些規則就不會執行，最後就只有 h1 被改變顏色，h2 和 h3 都不會改變顏色。

h1 { color:red; } /* 這是 h1 呦
h2 { color:red; }    這是 h2 呦
h3 { color:red; }    這是 h3 呦 */

巢狀結構

除了 CSS 擴展語言 ( 例如 less、sass ) 可以使用巢狀結構 ( 大括號裡還有大括號 )，基本的 CSS「不支援」巢狀結構，只有「媒體特性 @media」或「特性查詢 @supports」才能使用類似巢狀結構的寫法，舉例來說，下方的 CSS 會讓文字在螢幕瀏覽時呈現紅色，列印時呈現藍色。

@media screen {
  h1 {
    color: red;
  }
}
@media print {
  h1 {
    color: blue;
  }
}

小結

CSS 的語法和結構相當簡單，且撰寫上也不容易出錯，就算出錯也只會影響版面設計，因此只要熟練掌握基本的原則，就能夠寫出乾淨漂亮的 CSS。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～