認識 CSS

前言

上一篇我們講了路徑，也算是把 HTML 劃一個句號了。從今天開始，我們要正式進入 CSS 的領域，CSS 對很多人來說是非常折磨人的，可以說是前端三件套中最煩人的技術了。在開始學習 CSS 之前，請確定自己已經足夠了解 HTML。

什麼是 CSS

CSS 的全稱是 Cascading Style Sheets，翻譯成中文就是「階層式樣式表」。前面有說過CSS 是人的血肉，既然每個人的樣子都是不一樣的，例如胖瘦、高矮、五官位置、膚色等，那麼 CSS 就是在定義這些視覺化的東西。

CSS 語法（Syntax）

CSS 是一種規則類的語言，如上圖，CSS 是由選擇器、屬性（Property）、值這三個部分組成的。所有的選擇器都會有一對一對的屬性和值，並用大括號（{}）包起來。這段程式碼是在將 body 的背景顏色設定為 #1f1f1f（大概是深灰色）。

嵌入 CSS

在書寫完 CSS 後，總得套用吧？接下來我們來學一下怎麼套用，以及有多少種方法套用。

外部樣式表（External Stylesheet）

外部樣式表說白了就是把一個一個副檔名為 css 的檔案引入（不討論 less 或 scss），這是最常用的方式，也會讓 HTML 最大程度的保持簡潔。就像是下面的程式那樣：

<!DOCTYPE html>
<html>
    <head>
        <!-- 略 -->
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <!-- 略 -->
    </body>
</html>

內部樣式表（Internal Stylesheet）

內部樣式表是將 CSS 寫在 HTML 檔案裡面，像是這樣：

<!DOCTYPE html>
<html>
    <head>
        <!-- 略 -->
        <style>
            body {
                background-color: #1f1f1f;
            }
        	/* 其它樣式 */
        </style>
    </head>
    <body>
        <!-- 略 -->
    </body>
</html>

所有的內部樣式都會寫在 style 元素裡面。

內嵌樣式（Inline Styles）

內嵌樣式（行內樣式）是優先級最高的樣式設定的方法。他是透過以 CSS 樣式為 style 屬性的值，並將屬性添加給元素的方式套用的。例如說：

<div style="padding: 0.5rem;">
    <!-- 省略 -->
</div>

雖然這種方式容易，但是應該盡量避免使用這種方法，因為它的維護難度高且難以閱讀。

選擇器（Selector）

選擇器，顧名思義就是選一個或多個元素進行 CSS 設定。下面說說一般的選擇器類型：

類型選擇器（Type Selector）
```
h1 {}
```
直接選擇一個元素。
類選擇器（Class Selector）
```
.title {}
```
選擇一個類名（Class）。
ID 選擇器（ID Selector）
```
#title {}
```
選擇一個 ID。
屬性選擇器（Attribute Selector）
```
a[title] {}
input[type="text"] {}
```
這組選擇器提供了根據元素上是否存在特定屬性來選擇元素的不同方法，甚至根據是否存在具有特定值的屬性進行選擇。
偽類（Pseudo-class Selector）
```
button:hover {}
```
偽類選擇器用於設置元素的某些狀態的樣式。例如 :hover 偽類僅在滑鼠指標將滑鼠懸停在元素上時才選擇該元素。
偽元素（Pseudo-element Selector）
```
p::first-line {}
```
偽元素選擇器選擇元素的某個部分而不是元素本身。例如 ::first-line 始終選擇元素內的第一行文本。
通用選擇器（Universal Selector）
```
* {}
```
將樣式套用於全部元素中，通常是在做初始化的時候會怎麼做。

前面介紹了這麼多的類型，現在說說選擇器清單。假設我們有好幾個選擇器內的程式都一樣，那麼我們不需要重複書寫，只需要像下面這樣即可：

h1,
h2,
h3,
h4,
h5,
h6,
.title {
    color: blue;
}

說了這麼多選擇器，接下來要說說一個稍微複雜一些的選擇器——關係選擇器（Combinator）。

假設我的 HTML 如下：

<main id="element1">
	<div id="element3">
        測試內容
    	<div id="element4">測試內容</div>
    	<div id="element5">測試內容</div>
    </div>
	<div id="element6">測試內容</div>
	<div id="element7">測試內容</div>
</div>
<div id="element2">測試內容</div>

後代選擇器（Descendant Combinator）
See the Pen <a href="https://codepen.io/canis-infinity/pen/OJGppqW"> CSS 後代選擇器</a> by Canis (<a href="https://codepen.io/canis-infinity">@canis-infinity</a>) on <a href="https://codepen.io">CodePen</a>.
兩個（含以上）數量的選擇器的結合，選擇器之間用半型空格隔開。只有當第二個選擇器的目標為第一個選擇器目標的後代時才會起作用。後代選擇器跟子選擇器相似，但是不要求元素之間要是嚴格的父子關係。

假設我的 CSS 如下：
```
div {
    color: black;
}
 
main div {
    color: red;
}
```
你會發現，element3、element4、element5、element6、element7 這五個元素的文字顏色都會被套用紅色樣式。
子選擇器（Child Combinator）
See the Pen <a href="https://codepen.io/canis-infinity/pen/mdgWmWW"> CSS 子選擇器</a> by Canis (<a href="https://codepen.io/canis-infinity">@canis-infinity</a>) on <a href="https://codepen.io">CodePen</a>.
兩個（含以上）數量的選擇器的結合，選擇器之間用大於（>）隔開。它僅匹配與第二個選擇器匹配的那些元素，這些元素是與第一個選擇器匹配的元素的直接子元素。這個選擇器會比後代選擇器更加嚴格一些，就好像金字塔那樣，第一層的直接子元素是第二層，其它層的它不管。

假設我的 CSS 如下：
```
div {
    color: black;
}
 
main > div {
    color: red;
}
```
你會發現，element3、element6、element7 這三個元素的文字顏色都會被套用紅色樣式，而 element4、element5 因為不是直接就是 element1 的子元素。
鄰接同層選擇器（Next-sibling Combinator）
See the Pen <a href="https://codepen.io/canis-infinity/pen/poBePLG"> CSS 鄰接同層選擇器</a> by Canis (<a href="https://codepen.io/canis-infinity">@canis-infinity</a>) on <a href="https://codepen.io">CodePen</a>.
兩個（含以上）數量的選擇器的結合，選擇器之間用加號（+）隔開。並且僅當它緊跟第一個元素並且兩者都是同一父 element 元素的子元素時才匹配第二個元素。

假設我的 CSS 如下：
```
div {
    color: black;
}
 
div + div {
    color: red;
}
```
你會發現， element5、element6、element7 這三個元素的文字顏色都會被套用紅色樣式。
通用同層選擇器（Subsequent-sibling Combinator）
See the Pen <a href="https://codepen.io/canis-infinity/pen/OJGpmZQ"> CSS 通用同層選擇器</a> by Canis (<a href="https://codepen.io/canis-infinity">@canis-infinity</a>) on <a href="https://codepen.io">CodePen</a>.
兩個（含以上）數量的選擇器的結合，選擇器之間用波浪號（~）隔開。並匹配第二個元素的所有元素，這些元素跟在第一個元素之後（不一定要緊跟着，也可以隔幾個元素）並共用相同的父元素。

假設我的 CSS 如下：
```
div {
    color: black;
}
 
div ~ div {
    color: red;
}
```
你會發現， element5、element6、element7 這三個元素的文字顏色都會被套用紅色樣式。

結語

CSS 說難不難，就是花樣比較多而已。其實我還有很多沒講的，例如說 At 規則，不過這個我覺得應該可以單獨變成一篇文？這個部分我再考慮一下。這一篇就說這些東西吧。

參考資料

Learn to style HTML using CSS - Learn web development | MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS
Day23-css 選擇器-3: 複合選擇器 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天：https://ithelp.ithome.com.tw/articles/10336377