暫別HTML後，我們要來學習怎麼用CSS設定網頁樣式啦。
不過在此之前，要先了解所謂的CSS到底是什麼，要怎麼在HTML中使用。
也需要知道CSS的基本語法。
廢話不多說，讓我們開始CSS的旅程吧～
CSS是Cascading Style Sheets的縮寫。
Style Sheets表示它是一種樣式表語言（style sheet language），用以設定HTML等文件的呈現方式，就像是出版業會以style sheet會規範格式那樣。
Cascading則表示這樣的語言，可以同時處理多個樣式表，透過一定的優先順序決定最終的樣式。如此，使用者與網頁作者都能提出自己的樣式表，在兩者的需求間可以取得平衡。[1]
我們之前提過的幾個HTML元素都有各自預設而不同的樣式。所以即使網頁沒有透過CSS設定樣式，還是可以使用不同元素對網頁內容做編排。
不過會有這些樣式上的差別，不只是因為這些內容是什麼元素。而是瀏覽器有一套預設的CSS樣式表，會依據他們屬於什麼元素，決定要套用什麼樣式。[2]
這麼一來，即便網頁建立者沒有設定樣式，使用者仍可以透過瀏覽器的預設樣式，區分不同性質的內容。
使用CSS為HTML設定樣式時，有三種基本方式可以選擇：
常見的一種方式，是先將CSS程式碼另外儲存為一或多個檔案，並以.css作為檔案的副檔名。
接著在HTML的<head>中，透過<link>元素引入這些外部檔案。一個<link>元素只能引入一個檔案，如果有多個樣式表要套用，需要分次引入。
引入時需要將rel屬性設定為stylesheet，表示這些外部檔案是網頁使用的樣式表；並以href屬性設定檔案路徑。
例如以下範例：
<link rel="stylesheet" href="main.css" />
使用這種方式的好處是可以同時為多個網頁套用相同的樣式。只要每個網頁各自透過<link>引入共用的CSS檔案就好。
如果需要調整樣式，也只需要修改他們共用的CSS檔案，不用逐一修改每個網頁。
另一種使用CSS的方式，是直接將CSS程式碼寫在HTML的<style>元素裡面。<style>同樣需要放在<head>元素之中。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {
color: red;
font-size: 2.5em;
}
</style>
</head>
如果要使用這種方式，為多個網頁套用相同樣式，就需要在每個網頁貼上一樣的程式碼。要修改樣式的話，也需要逐一修改每個網頁。
由於效率比外部樣式表還差，一般不會使用這種方式。不過如果網站的內容管理系統禁止修改外部的CSS檔案，可能就會改用這種方式。[3]
剩下的一種方式，是對單一的HTML元素添加style屬性，在屬性值裡以CSS程式碼設定樣式。例如以下範例：
<span style="color: purple; font-weight: bold">span element</span>
這種方式是三種方式裡面效率最低的。
由於是設定單一元素的屬性，如果有多個元素要套用相同樣式，就需要重複貼上一樣的程式碼；如果要調整樣式，就需要逐一修改這些元素的屬性；更不用說要對多個網頁套用相同樣式，會有多麻煩了。
除了效率低，這種方式也會將HTML與CSS混在一起，讓程式變得難以閱讀。
不過有時候可能還是會需要使用這種方式，像是網站的內容管理系統與允許修改HTML。以Javascript動態設定樣式時，也常會這麼做。[3]
使用這三種方式設定的樣式，因為優先順序比瀏覽器高，會蓋過瀏覽器的預設樣式。
不過行內樣式的優先順序，又比內部樣式表跟外部樣式表還高。而內部樣式表跟外部樣式表的優先順序相同。
如果內部樣式表跟外部樣式表對同一個樣式做了不同設定，需要看<style>跟<link>元素出現於網頁的先後順序，以後面出現的為優先。[4]
CSS的基本組成是規則（ruleset）。每條規則設定了網頁中有哪些東西，要以什麼樣子呈現。以下範例就是一條規則：
h1 {
color: red;
font-size: 2.5em;
}
每條規則由選擇器（selector）與宣告（declaration）構成。範例中，開頭的h1是選擇器，其餘以花括號包起來的部分則是宣告。
選擇器寫在規則的開頭，設定規則適用於網頁中的哪些內容。範例的規則以h1作為選擇器，表示這條規則適用於網頁中的<h1>元素。
宣告寫在選擇器後面，以花括號{}包起來。每個宣告以一種屬性設定內容的一種樣式，屬性與值之間以冒號:相隔。如果一條規則中有多個宣告，則需要以分號;來區隔。
範例中，規則內同時有兩個宣告，分別設定了<h1>元素的color與font-size屬性。前者值設為red，將文字顏色設為紅色；後者設為2.5em，將字體大小設為2.5em。
需要注意的是，屬性名稱內不能有空格。所以前述範例中的font-size屬性，如果寫作font- size就會出錯。
相反的，如果同個屬性有多個值，則需要以空格相隔。所以設定margin屬性時，就不能將margin: 0 auto寫作margin: 0auto。
透過/*與*/，可以在CSS中添加註解，以便理解程式碼的內容。
/*與*/之間的內容會被瀏覽器省略。即便是放在屬性與值之間，也不會影響到宣告：
h1 {
color: /*red*/ blue;
font-size: 2.5em;
}
如果/*與*/橫跨不同行，則會變成多行註解。如果需要進行測試，就可以暫時將幾個規則註解掉。
/*
h1 {
color: blue;
font-size: 2.5em;
}
*/
不過CSS裡不能有多層註解。如果/*與*/裡還有其他的/*與*/，則只有外層的/*到內層的*/之間的內容會當作注解。這麼一來可能就會導致錯誤：
/*
h1 {
color: /*red*/ blue;
font-size: 2.5em;
}
*/
跟HTML一樣，CSS中的多餘空格跟換行符會被省略。
可以透過空格跟換行符來排版，讓程式碼更好閱讀。以下範例便沒有幫程式碼排版：
h1{color:blue;font-size:2.5em;}
通常選擇器與花括號之間會以空格相隔；
花括號跟聲明之間會換行；
聲明會以兩個空格開頭作為縮排；
聲明內的屬性與值會以空格相隔；
同個規則內的多個聲明之間也會換行。
[1]: Håkon W Lie, Cascading HTML Style Sheets -- A Proposal
[2]: MDN, What is CSS?
[3]: MDN, Getting started with CSS - Learn web development
[4]: ExplainThis, 如何在 HTML 中插入 CSS 樣式？優先順序是什麼？｜
iThome鐵人賽
看影片追技術