在文章〈關卡〇：新手入門之說聲 Hello World〉，我們看到了 HTML、CSS、JavaScript 如何組合成一個網頁。不過 CSS 究竟是什麼、以及在 Hello World 網頁中的幾行 CSS 語法到底是什麼意思呢？這篇文章將逐一介紹。

div {
  color: red;
  font-size: 108px;
}

一、CSS 是啥

如果將網頁比喻成房屋的話，那 CSS 就是網頁的油漆壁紙與裝潢風格。

CSS 是一種風格頁面語言(Cascading Stylesheets；階層樣式表)，主要由 選擇器 - 大括號對 - 屬性 - : - 屬性值 - ;，這些東西所構成。一個選擇器包含的設定，可以說是一個規則 (rule)。

選擇器 {
  屬性: 屬性值;
  屬性1: 屬性1值;
  屬性2: 屬性2值;
}

選擇器可能是一個 class (自訂的 CSS 類別名稱)、或是一個 HTML 中的標籤名稱(tag name，也可以叫做元素 element)。 屬性則是被選擇到的元素可調整的屬性，例如 顏色 (color)、 文字大小 (font-size)。 屬性值為該屬性可接受的設定值，例如 color 屬性可設定 red、#ff0000 等顏色。

瀏覽器載入網頁時，會先讀取 HTML 檔案蓋好骨架、接著會載入 CSS 樣式設定。瀏覽器會去找選擇器有針對哪些標籤名稱做設定，並根據屬性與屬性值去做樣式調整。

在關卡〇，我們只需要先知道 CSS 這個語言，是由許多的 rule 組成就好。

延伸教學

• CSS 基本 - 學習該如何開發 Web | MDN
• CSS 寫法詳解介紹 - YouTube
• 【css】2小時初學者教學 #css #css教學 #css入門 - YouTube
• (36) 金魚都能懂的網頁設計入門 - YouTube

二、Hello World 中，幾行 CSS 語法的意思

div {

}

一個樣式規則的選擇器。這邊的選擇器是一個 div 標籤名稱，意思是網頁上所有的 div 都會套用到這個規則中屬性與屬性值的設定。

color: red;

一個屬性與屬性值的設定。這邊的屬性 color 是指文字的顏色，屬性值red 是指紅色。所以這個設定會讓文字變成紅色。

 font-size: 108px;

一個屬性與屬性值的設定。這邊的屬性 font-size 是指文字的大小，屬性值 108px 是指大小為 108px (px 是像素點的意思，一種常用在螢幕上的面積單位)。所以這個設定會讓文字大小變成 108px。

小結

看完今天的文章可以知道

• CSS 的簡介：CSS 檔案由 rule 組成，rule 包含選擇器、屬性、屬性值
• 在 Hello World 範例中的 CSS 語法意思 (div, color, font-size)

明天將繼續簡介 JavaScript。