[2021 IT鐵人賽] Day 04：專案01 - 超簡單個人履歷03

[2021 IT鐵人賽] Day 04：專案01 - 超簡單個人履歷03 | CSS簡介

CSS是什麼?

CSS，全名為Cascading Style Sheets，中文為階層式樣式表。跟HTML一樣，CSS既非標準程式語言，也不是標記語言，而是一種風格頁面語言，它能為你的HTML文件中的元素套用不同的樣式(ex: 顏色、字體…等)。CSS也分為好幾代，目前主流使用的是CSS3，而CSS3可以相容於多數的瀏覽器。

就像前面提到的，CSS就像HTML的衣服，決定了網頁的顏色以及圖案。

CSS基本語法

Selector：選擇器，用於定位HTML元素，通常為標籤名稱、class名稱或id名稱。
Declaration：宣告區域，用於宣告元素的屬性，包含了 屬性(Property) 和 屬性值(Value) 兩個區塊。用兩個大括號包圍，宣告間用分號分隔。
Property：屬性，搭配屬性值使用，屬性和屬性值間用冒號區隔。
Value：屬性值，設定前方屬性的值。

簡單講，上面那段範例所代表的意思就是：

HTML文件中所有的h1元素，將文字顏色設為藍色，字體大小設為12px。

CSS套用方式

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選擇器

選擇器用於定位元素，決定哪些元素要被設定格式。

CSS有很多種選擇器，常見的有標籤選擇器、class選擇器或id選擇器…等等。

標籤選擇器

使用標籤名稱來定位，所有該標籤的元素都會設定格式。

像上面範例就是將所有<p>設定格式。

p {
    color: red; 
    font-size: 20px;
}

class選擇器

還記得第一天提過的class屬性嗎? class選擇器可以將所有符合class屬性值的元素設定格式。語法為.+class屬性值。

將所有class="title"的元素設定樣式。

.title {
    color: red; 
    font-size: 20px;
}

id選擇器

這麼說來，我好像還沒說過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 > 標籤

另外，在屬性宣告後方加上 !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上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議，都歡迎在底下留言區提出，還請大家多多指教。

如果喜歡這篇文章，請訂閱我並且拍五下手給予回饋(使用Google或Facebook帳號免費登入，只需要30秒)，資金由LikeCoin提供，完全不會花到各位半毛錢!

因為您的支持，我才更有動力創作出更優質的文章~

Chito's Blog

搜尋此網誌