2024-05-18

How to Write CSS?

CSS 是用來裝飾網頁的語言，它可以把網頁上普通的文字、連結等變成令人感到可靠的藍色、神秘的紫色或是大膽的紅色。使用 CSS，我們就可以幫網頁調整主題配色，營造出溫暖、可靠、帥氣或壓抑等感受，讓網頁具有獨特的風格呢！要裝飾網頁，建立網頁的樣式，都少不了它。這種語言的全名叫做 Cascading Style Sheets（CSS）。那 CSS 要怎麼寫呢？讓我們先來看一個範例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Demo</title>
    <style>
      h1 {
        color: brown;
        font-style: italic;
      }

      p {
        color: coral;
      }
    </style>
  </head>
  <body>
    <h1>CSS Can Decorate Title to Brown</h1>
    <p>And the paragraph to coral.</p>
  </body>
</html>

這個範例比較長，我們直接看到裡面的<style> element 的內容把！這裡寫的就是 CSS 的規則。如果我們用瀏覽器打開這份文件，就會看到一個有棕色標題、珊瑚色段落的網頁囉：

很酷吧！如果我們把 style element 整個刪掉，像下面這樣子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Demo</title>
  </head>
  <body>
    <h1>CSS Can Decorate Title to Brown</h1>
    <p>And the paragraph to coral.</p>
  </body>
</html>

接著重新整理頁面，就會發現彩色的文字都變成黑色了：

到這裡我們已經知道，CSS 可以像魔法一樣幫我們裝飾網頁。為什麼瀏覽器可以看懂上面的 CSS 編碼，幫我們改變網頁的樣式呢？

CSS Syntax

其實，CSS 的寫法是有固的格式的，只要我們照著格式寫，瀏覽器就可以看懂 CSS 原始碼，解析它，然後照著我們寫好的規則裝飾網頁。我們先來看看範例裡的其中一段 CSS 原始碼：

h1 {
  color: brown;
  font-style: italic;
}

這段原始碼寫的是一個 CSS rule，它包含了幾個關鍵點：selector、declaration 還有 property 和 value。我們來一一看過它們。

Selector

原始碼裡面的 h1 是一個 CSS selector，selector 的目的是用來選擇網頁上的 elements，讓我們可以幫選中的 elements 做裝飾。以這個範例來說，我們是用 h1 selector 來選擇網頁上所有的 h1 elements，也就是說，這整段 CSS rule 是要裝飾網頁上所有的 h1 elements 啦！

Declaration Block

Declaration block 的用途，是幫一個 CSS rule 把裝飾元素的 CSS 編碼群組起來。Declaration block 是由{和}封閉起來的區段，被封閉起來的 CSS 編碼，都歸屬於一個特定的 CSS rule。在上面的範例裡，我們是把 color: brown; 和 font-style: italic; 的 CSS 編碼給群組起來。

Declaration

一個 declaration 描述了要怎麼裝飾 HTML elements，一個 declaration 包含了 property，也就是要裝飾的屬性，和 value，也就是屬性的數值，像上面範例寫到的 color: brown;就是一個 declaration。CSS 用 declarations 來改變網頁元素的各種屬性，例如顏色、字體大小等來裝飾網頁。在上面的範例裡有兩個 declarations，分別把 HTML elements 的顏色屬性 color 設定成棕色 brown；並且把字體樣式 font-style 設定成斜體 italic。也就是因為這樣，我們才會看到網頁的標題變成了棕色，而且以斜體呈現囉！

上面就是撰寫 CSS 編碼的格式，用 selector 選擇要裝飾的元素，用一組 declarations 來裝飾它，並且把這組 declarations 用{和}封閉起來，形成一個 declaration block，讓 declaration block 和 selector 組成一個完整的 CSS rule。到這裡，我們已經知道怎麼寫出符合格式、讓瀏覽器看得懂的 CSS rules 了！然而，我們要怎麼把寫好的 CSS rules 加到網頁裡，讓 CSS 裝飾網頁呢？

加入CSS的方法

把 CSS 加到網頁裡總共有三種方法：用 external stylesheet、internal stylesheet 或是 inline stylesheet。上面的範例就是用 internal stylesheet 來把 CSS 加到網頁裡的呢！那這三種方法各別要怎麼使用呢？

External Stylesheet

External stylesheet 指的是有 CSS rules 的獨立 .css 檔案。要使用 external stylesheet，我們要在 HTML 文件裡面把獨立的 CSS 檔案引入進來，例如下面的範例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Demo</title>
    <!-- Include the style.css -->
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>CSS Can Decorate Title to Brown</h1>
    <p>And the paragraph to coral.</p>
  </body>
</html>

這段原始碼在第8行使用了<link> element，來把一個放在 css 資料夾裡的 style.css 檔案引入到 HTML 文件使用。為什麼要額外把 CSS 存成檔案，再引入到 HTML 文件裡面呢？因為這樣一份 CSS rules 就可以被多個 HTML 文件重複使用，還可以避免在多個 HTML 文件裡寫到重複的 CSS rules。未來網頁的風格要改，也只要改一份 CSS 文件就好，改完以後，所有引用 CSS 文件的 HTML 文件就都生效了，完全不用改到 HTML 文件呢！

Internal Stylesheet

Internal stylesheet 指的是直接寫在 HTML 文件裡面的 CSS rules，我們來看看下面的範例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Demo</title>
    <!-- internal stylesheet -->
    <style>
      h1 {
        color: brown;
        font-style: italic;
      }

      p {
        color: coral;
      }
    </style>
  </head>
  <body>
    <h1>CSS Can Decorate Title to Brown</h1>
    <p>And the paragraph to coral.</p>
  </body>
</html>

要撰寫 internal CSS，我們會在 HTML 文件裡寫上<style></style> tags，並在 tags 之間撰寫 CSS rules，這樣瀏覽器就知道這裡有一段 CSS rules 要解析了。如果我們要製作一頁式的網頁，或是單頁的 prototype（可以想成是示範網頁），就可以使用 internal stylesheet。

Inline Stylesheet

Inline stylesheet 指的是直接加在 HTML 元素上的 CSS declarations，例如：

1	<h1 style="color: brown; font-style: italic">CSS Can Decorate Title to Brown</h1>

在上面的範例裡，<h1> element 被加上了一個 style 的 attribute，來幫 <h1> element 新增 CSS declarations。style attribute 的 value 可以直接寫多個 CSS declarations，declarations 之間要用分號；做區隔。在這個範例裡，<h1> element 被加上了 color: brown 和 font-style: italic 兩個 CSS declarations。
如果只有某個 HTML 元素要加上特定的風格，我們就可以用這種方法。但這種方法應該盡量避免，因為寫 inline stylesheets 可能會導致風格要改變時，得一次改很多元素的 inline CSS declarations；也因為 CSS 編碼和 HTML 原始碼混在一起，降低了原始碼的可讀性，會比較難維護呢！

知道三種加入 CSS 的方法之後，為了避免遇到有些 CSS declarations 有效，有些卻無效，又不知道怎麼除錯的情形，我們需要再了解到，用各種方法加入的 CSS declarations 會怎麼互相取代，那就是，inline stylesheet 的 CSS declarations 會取代 internal stylesheet 的 CSS declarations；internal stylesheet 的 CSS declarations 會取代 external stylesheet 的 CSS declarations。知道這些覆寫取代規則之後，我們就可以在遭遇問題時，更有方向地找原因了。

3個常見的 CSS Properties

在知道怎麼加入 CSS 到 HTML 文件之後，我們來看看3個常用的 CSS properties 吧！它們分別是 color、font-size 和 background-color。

color

Color property 的作用是設定文字的顏色，舉例來說，我們可以用 color: red;來把文字的顏色改成紅色，例如下面這段字：

Colored text.

試試看把把文字改成綠色和藍色吧，下面是範例寫法。首先，是把文字設定成綠色：

1	color: green;

輸出結果：

Colored text.

再來是把文字設定成藍色：

1	color: blue;

還有輸出結果：

Colored text.

為什麼會選紅綠藍色當作範例呢？這是因為紅色、綠色和藍色是螢幕顯示器用來顯示各種色彩的3原色，螢幕會用不同亮度的紅色、綠色和藍色來顯示出各種色彩，而紅色（red）、綠色（green）和藍色（blue）色彩模式，我們稱 RGB color model，就是螢幕顯示器使用的色彩模式呢！和印刷使用的 CMYK 是不同的囉！
~~選紅綠藍色當範例的原因純屬虛構，其實只是想多解釋 RGB color model。~~

Color Values

上面我們是用 color names 來設定文字的顏色，就像我們剛剛看到的 color: red;、color: green;和 color: blue;，其實設定文字顏色還有其它的方法，我們來看過常見的另外3種。

RGB

除了用顏色名稱（color name）來設定文字顏色以外，我們還可以用 R、G、B 數值來設定顏色，例如下面的範例：

1	color: rgb(255, 0, 0);

實際上，電腦螢幕每個像素（pixel）的顏色，都會由一個紅色的數值，也就是 R 的數值、一個綠色的數值，也就是 G 的數值，和一個藍色的數值，也就是 B 的數值，來代表3原色各別的亮度，而且每一個數值的範圍都是從0到255，也就是說在上面的範例裡，電腦螢幕會用亮度255的紅色，加上亮度0的綠色，再加上亮度0的藍色來呈現文字的顏色，結果就會形成紅色的文字啦！當然，如果像素的 R、G、B 數值都是0，就代表不發光，也就是螢幕本身的黑色囉！

Hex Color

Hex color 格式是用16進位數字來設定顏色，例如下面的範例：

1	color: #9c27b0;

這種方式其實也是在設定 RGB 數值，只是在 hex color 格式裡，是用16進位的數字來表示數值，也就是每位數的數值範圍可以從0~9，然後再從 A 一直到 F，共16個數字。和 RGB 格式不一樣的是，RGB 是用3個各別的10進位數字，來表示紅色、綠色和藍色的亮度，而 hex color 則是把最低兩位數當成藍色的數值、把中間兩位數當成綠色的數值，並把最高兩位數當成紅色的數值，來表示紅色、綠色和藍色的亮度。用上面的範例來看，紅色的數值是「9c」，代表10進位數字的156、綠色的數值是「27」，代表10進位的39、藍色的數值是「b0」，代表10進位數字的176，全部組合起來，就變成紫色啦！

如果對16進位數字轉換成10進位數字有興趣，這裡是方法：把各別位數的數值乘以16^位數-1之後，再全部加總起來，就會得到10進位的數值了。把 hex color 轉換成10進位的 RGB color 會有一點點不一樣，用範例的紫色數值來看，下面是把16進位數字 #9c27b0 轉換成10進位 RGB color 的步驟：

首先我們把 #9c27b0 分成3組，接著我們再各別算 RGB 的10進位數值。這3組分別是：
- R：#9c
- G：#27
- B：#b0
用 #9c 計算紅色的10進位數值：
1. 把第1位數字c，也就是10進位的12，乘以16的1-1次方，也就是16的0次方之後，得到結果：12
  c * 16^1-1 = c * 16⁰ = c * 1 = 12 * 1 = 12
2. 把第2位數字9，也就是10進位的9，乘以16的2-1次方，也就是16的1次方之後，得到結果：144
  9 * 16^2-1 = 9 * 16¹ = 9 * 16 = 9 * 16 = 144
3. 把12和144加起來，得到156，就是紅色的10進位數值啦！
用 #27 計算綠色的10進位數值：
1. 把第1位數字7，也就是10進位的7，乘以16的1-1次方，也就是16的0次方之後，得到結果：7
  7 * 16^1-1 = 7 * 16⁰ = 7 * 1 = 7 * 1 = 7
2. 把第2位數字2，也就是10進位的2，乘以16的2-1次方，也就是16的1次方之後，得到結果：32
  2 * 16^2-1 = 2 * 16¹ = 2 * 16 = 2 * 16 = 32
3. 把7和32加起來，得到39，就是綠色的10進位數值啦！
藍色 #b0 計算藍色的10進位數值：
1. 把第1位數字0，也就是10進位的0，乘以16的1-1次方，也就是16的0次方之後，得到結果0：
  0 * 16^1-1 = 0 * 16⁰ = 0 * 1 = 0 * 1 = 0
2. 把第2位數字b，也就是10進位的11，乘以16的2-1次方，也就是16的1次方之後，得到結果176：
  b * 16^2-1 = b * 16¹ = b * 16 = 11 * 16 = 176
3. 把步驟1.和步驟2.的結果加起來，得到176，也就是藍色的10進位數值啦！
得到 RGB color，分別是 R：156、G：39、B：176

font-size

font-size property 的用途是設定字體的大小，我們馬上來看看一個範例：

1
2
3

p {
  font-size: large;
}

這裡我們把段落元素的字體大小都設定成 large，也就是較大的字體。large 是 CSS 提供的 absolute-size value，其它還有很多，例如 medium、small 等等。舉例來說，我們也可以把段落元素的字體大小設定成較小的字體「small」：

1
2
3

p {
  font-size: small;
}

用瀏覽器各別打開兩份 CSS rules 裝飾的 HTML 文件，就可以看出字體大小的差別了：

當然，我們也可以用例如12px或72px這種數值來設定字體的大小，這種數字加 px 的格式叫做 length value，舉例來說，我們可以這樣子用 length value 寫 CSS rule：

1
2
3

p {
  font-size: 12px;
}

或者是：

1
2
3

p {
  font-size: 72px;
}

會用 font-size property 之後，我們就能自由地變更字體的大小了！很實用呢！

background-color

background-color property 的用途是設定元素的背景顏色。舉例來說，如果我們想做一個灰底黑字的標題，我們可以這麼寫：

1
2
3

h1 {
  background-color: #eeeeee;
}

用瀏覽器打開被裝飾的 HTML 文件，我們就可以看到標題的背景被改成灰色了呢：

background-color property 的值可以和 color property 一樣用 color name、RGB 數值和 hex color 的方法來設定。

以上就是怎麼寫 CSS 的一些介紹啦！讓我們一起用 CSS 打造漂亮的網頁吧！如果你有學習網頁設計的需求，或是對我有興趣，歡迎直接與我聯絡。