CSS，全名為Cascading Style Sheets，中文為階層式樣式表。跟HTML一樣，CSS既非標準程式語言，也不是標記語言，而是一種風格頁面語言，它能為你的HTML文件中的元素套用不同的樣式(ex: 顏色、字體...等)。CSS也分為好幾代，目前主流使用的是CSS3，而CSS3可以相容於多數的瀏覽器。
就像前面提到的，CSS就像HTML的衣服，決定了網頁的顏色以及圖案。
簡單講，上面那段範例所代表的意思就是：
HTML文件中所有的
h1元素，將文字顏色設為藍色，字體大小設為12px，
CSS有三種套用的方法，分別是行內載入、內部載入和外部載入。
直接寫在元素標籤的後面，優點是相當直覺，缺點則是較不易更改和維護。
<p style="color: red; font-size: 20px;">Hello, CSS!</p>
你可能已經發現了，這不是我們學HTML時就已經用過了嗎?
沒錯! 其實你早就已經偷學到一點點CSS的語法了，只不過我會講其他更好的載入方式。
將CSS寫在<head>的<style>中，語法如同上面的CSS語法。優點是可以大量套用格式，而且方便管理和維護，但缺點是如果CSS數量一多，整個HTML文件會顯得很冗長。
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
將CSS格式獨立寫成.css檔，並從HTML中載入.css檔。寫法是在<head>中加上<link>。
除了好維護外，HTML和CSS也可以清楚的分開，甚至可以多的HTML共用一個CSS檔，因此我比較推薦使用這個方法，範例程式我也都是用這個方法。
/* demo.css */
p {
color: red;
font-size: 20px;
}
// demo.html
<head>
<link rel="stylesheet" href="demo.css">
</head>
三種寫法的顯示結果都為：
選擇器用於定位元素，決定哪些元素要被設定格式。
CSS有很多種選擇器，常見的有標籤選擇器、class選擇器或id選擇器...等等。
使用標籤名稱來定位，所有該標籤的元素都會設定格式。
像上面範例就是將所有<p>設定格式。
p {
color: red;
font-size: 20px;
}
還記得第一天提過的class屬性嗎? class選擇器可以將所有符合class屬性值的元素設定格式。語法為.+class屬性值。
將所有class="title"的元素設定樣式。
.title {
color: red;
font-size: 20px;
}
這麼說來，我好像還沒說過id屬性。其實id屬性和class屬性類似，也是用於定位HTML元素，但差別在於id屬性值是唯一的，只能定位在一個元素上，不同於class屬性可以同時設定好幾個元素。
雖然id用於定位單一特定元素很好用，但我不建議你使用id來設定CSS格式。原因有兩個，第一個是因為id屬性值是唯一的，所以你可能在沒注意到的情況下設定兩個相同的id，結果可能導致非預期的錯誤。第二個是因為JavaScript或JQuery經常使用id當作定位點，稱之為錨點，如果使用和他們相同的id也可能導致非預期的錯誤。總之就是盡量多使用class，少使用id就對了!
id選擇器的語法是 #+id屬性值。
#title {
color: red;
font-size: 20px;
}
也可以一次選擇多的選擇器，選擇器之間使用逗號隔開。
h1, p {
color: red;
}
我們在Day02講過DOM tree的概念，CSS也可以使用樹狀結構來定位。
後代選擇器可以選擇特定節點下所有子節點(包含子節點的子節點...)，語法為父節點+空格+子節點。
// demo.html
<div class="container">
<p>子節點</p>
<div>
<p>子節點的子節點</p>
</div>
</div>
// demo.css
.container p {
color: red;
}
顯示結果為：
和後代選擇器類似，差別在於子選擇器只影響該節點下一層的子節點，語法為父節點+>+子節點。
.container>p {
color: red;
}
顯示結果為：
事實上，CSS在決定樣式時，是依照優先度去決定的，優先度大的樣式會強制蓋過優先度小的樣式。
優先度的配置大致如下：
套用方式：行內載入 > 內部載入 > 外部載入
CSS選擇器：id > class > 標籤
CSS選擇器：id > class > 標籤
另外，在屬性宣告後方加上 !important 後，直接晉升為最大優先度，蓋過其他所有的樣式。
例如範例中，我們使用標籤、class和id選擇器設定同一個元素的顏色，猜猜看，文字會是什麼顏色呢?。
// demo.html
<h1 class="h1" id="h1">What's color?</h1>
h1 {
color: red;
}
.h1 {
color: blue;
}
#h1 {
color: purple;
}
結果為紫色，因為id選擇器的優先度最大。
但是如果改成這樣：
h1 {
color:red !important;
}
.h1 {
color:blue;
}
#h1 {
color: purple;
}
因為我在紅色格式後方加上 !important 的關係，結果就變成紅色了。
今天我們開始接觸了CSS，知道CSS的基本語法以及套用方式，並學習了好幾個CSS選擇器的用法，最後，還了解了CSS如何決定格式優先度。
明天我會介紹幾個常見的屬性值，讓你的網頁變得更加繽紛! 別忘了按下訂閱開啟小鈴鐺，我們明天準時見面~
如果喜歡這系列文章麻煩幫我按Like加訂閱，你的支持是我創作最大的動力~
本系列文章以及範例程式碼都同步更新在GitHub上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~
有任何問題或建議，都歡迎在底下留言區提出，還請大家多多指教。
iThome鐵人賽
看影片追技術