CSS

串接樣式表 / Cascading Style Sheets

簡介

在網頁中以 HTML 排版或調製樣式時，往往過於繁雜且不容易製作元件。透過串接樣式表，我們可以設定相似元素的樣式，並且將樣式獨立於網頁骨幹之外，把語意跟形式分離。

要在 HTML 中使用 CSS ，通常透過下列三種方式：

inline style - 利用標籤的 style 屬性直接為標籤標記樣式
style 標籤 - 使用 <style> 標籤將樣式表寫在 HTML 中
link 標籤 - 使用 <link> 標籤載入外部樣式表

Inline Style

撰寫任何標籤時，我們都可以額外加入一個 "style" 屬性來為標籤加上樣式。如下例的 H1 標籤將會顯示為紅色：

<h1 style="color:red"> Hello World! </h1>

樣式表的寫法請參照後面解說。

style 標籤

與其在各別標籤中加上 inline style ，我們更可以將樣式表集中在同一個地方方便統一管理，並透過「CSS Selector」指定樣式表作用的對象。只要將樣式表寫在 style 標籤中即可：

<style type="text/css">
  h1 { color: red }
</style>

樣式表的寫法請參照後面解說。

<link> 標籤

為了管理方便，我們常會將 CSS 獨立於 HTML 之外，以不同檔案的形式透過引入來使用。這可以利用 <link> 標籤來達成：

樣式表的寫法請參照後面解說。

讓你的網頁動起來

試著使用 link 載入 @loadingio/loading.css 的 lite.min.css，並使用他提供的轉圖吧：

ld ld-spinner ld-cycle
ld ld-hourglass ld-spin
ld ld-square ld-tick

網址: https://cdn.jsdelivr.net/npm/@loadingio/[email protected]/lite.min.css

CSS 基本語法

CSS 主要用途即為為網頁元素增加樣式，各種樣式如背景色、大小等都有對應的名字。為各種樣式指定適當的值即為樣式表的基本結構，例如下例將背景樣式設定為紅色：

background: red

我們用「 樣式名: 樣式值 」這樣的方式來做樣式的指定。當有多組樣式同時要指定時，在各組指定間加上分號，便可以把多組樣式結合成起來；下例同時設定了背景色、文字色、邊框寬度三總屬性：

background: red;
color: white;
margin: 20px;

此即為寫在 Inline Style 中的樣式表的格式。為了方便重覆利用這些樣式，我們可以將這些樣式統一寫在一個地方，然後搭配 CSS Selector 來指定要套用這些樣式的標籤，此即稱為樣式表。下例即為樣式表的基本範例：

p {
  background: red;
  color: white;
}

上例中的「p」即為 CSS Selector。上例區塊重覆使用，便可針對多組標籤套用樣式：

p {
  background: red;
  color: white;
}
h1 {
  background: orange;
}

將之寫入 HTML 的基本範例如下：

<style type="text/css">
  p {
    background: red;
    color: white;
  }
  h1 {
    background: orange;
  }
</style>

需要顏色嗎

如果不曉得用什麼顏色的話，可以點擊下面這個輸入框來選取顏色：

顏色除了使用 hex 碼與名稱以外，亦可以使用下列形式：

rgba(R, G, B, A)

其中 R / G / B 各別對應到 0 ~ 255 之間的值，代表紅、綠、藍光的強度； A 則為介於 0 ~ 1 之間、表示透明度的值。例如下例表示半透明的紫色：

rgba(255, 0, 255, 0.5)

CSS Selector

「CSS Selector」是一個特殊的語法，讓你可以指定一群特定的 HTML 元素 - 然後看你要對他們幹嘛。在 CSS 的情境中，指定了 Selector 之後便可以對他們設定屬性，但在其它地方，你甚至可以利用程式來控制他們。

最基本的 Selector 即為標籤的名字，由純英文字母或數字所組成，例如：

選取所有 p 標籤

選取所有 img 標籤

img

選取所有 hr 標籤

然而，針對所有同名標籤設定樣式並不是很實用，我們有時需要將標籤分類，甚至命名。此時，我們可以運用兩個 HTML 屬性來定義標籤，再用特定的 Selector 指定他們。

class 屬性

在標籤上加上 class 屬性即可為標籤分類。接著再利用 Selector 語法 .類別名 來指定此類標籤：

HTML 碼

CSS 碼

.name { color: red }

你可以為多個 HTML 標籤分成相同類別，如下例中我們將四個標籤分成了兩類：

HTML 碼

<span class="name">
<span class="age">
<span class="name">
<span class="age">

CSS 碼

.name { color: red }
.age { color: blue }

每個 HTML 標籤都可以包含多個類別，例如下例中，我們同時對 span 標籤設定了兩種類別：

<span class="name crew">
<span class="name crew">
<span class="name guest">

id 屬性

在標籤上加上 id 屬性即可為標籤命名。接著再利用 Selector 語法 #名稱 來指定此類標籤。要注意 code id 不像 class，不能重覆使用，同一個 id 只能用在一個標籤上：

HTML 碼

CSS 碼

#name { color: red }

複合式 Selector

若你需要指定符合多個條件的標籤，可以將所有的 Selector 接在一起寫。如下例，我們選取了有 name, pro 類別的 span 標籤：

HTML 碼

CSS 碼

span.name.pro {
  color: red
}

巢狀 Selector

由於 HTML 的巢狀結構，有時我們也會想指定特定標籤內的子標籤。這時我們只要將多組 Selector 以空白或「>」符號組合起來即可：

.user .meta .name {
  color: red
}

.user > .meta > .name {
  color: red
}

空白與 > 符號可以混用。他們分別代表：

a b：只要 b 在 a 裡面，就符合。
a > b: 如果 b 剛好在 a 的下一層中，才符合。

什麼時候用得到？

巢狀 Selector 適合用在較複雜的樣式元件。比方說，我們有「學生」與「老師」兩種角色，想要讓他們的名字有不同的顏色，我們可以定義成：

.student .name { color: #940 }
.teacher .name { color: #049 }

若有更複雜的結構，比方說班級有名字、班級裡面也有學生，那我們就會需要 > 來更明確的指定。

試試看吧！

大象班有兩個老師、四個學生，除了一名學生為男性以外，其他均為女性。試著重現下圖：

使用 table 排版
- 班級名稱無姓別，可設置 colspan 屬性合併儲存格
使用 > 關係選擇符號設定正確的姓名顏色
使用額外的類別定義男生的背景色

名稱	姓別
大象班
王老師	女
林老師	女
陳同學	女
李同學	女
張同學	女
吳同學	男

虛擬類別

一些特別的選擇器以「:」開頭，可以指定屬性、標籤以外的概念，例如「第一個字」、「第三個元素」等等。如下例選取第三個 div :

div:nth-child(3)

以下列出一些常見且實用的虛擬類別

:nth-child(k) - 第 k 個子元素. k 可以是數字，或者以 ( an + b ) 表達 ( a 與 b 填數字, 如 2n + 1 )
:first-child - 第一個子元素
:last-child - 最後一個子元素
:first-letter - 第一個字
:first-line - 第一行
:hover - 滑鼠移入時
:after - 在目標元素的結尾插入虛擬元素. 需要定義 `content` 與 `display` 樣式才會生效.
:before - 在目標元素的開頭差入虛擬元素. 需要定義 `content` 與 `display` 樣式才會生效.

更多虛擬類別可參考 MDN Web Docs - Pseudo-classes.

CSS Selector 博大精深，但這裡剛好有個很簡明的練習網站，請參考: https://flukeout.github.io/

練習看看吧！

使用 :nth-child、:hover 與類別選擇器達成以下效果：

文字穿插深淺顏色
定義 .mocha 類別幫抹茶加上綠色
使用 :hover、background 加上滑鼠動態

愛找茶

杉林溪奶香烏龍
梨山烏龍
阿里山凍頂茶
白金Gaba
抹綠茶
日月潭紅玉
北埔東方美人

補充鈣

鮮奶茶
白鬍子奶蓋
黑糖珍珠鮮奶
抹茶鮮奶
仙芋鮮奶凍

指定單位

樣式設定牽涉到顏色、大小、樣式、比例等各種不同的值，其中有些值我們必須要提供單位，才能正確的設定。

當我們討論到長、寬等尺吋的寬度時，我們通常有下列幾種單位可以使用：

px - 像素
em - 相對於當前字形大小的倍數 ( 1em 為一倍 )
% - 相對於參考值的比例 ( 100% 為一倍 )
vh - 相對當前畫面高度的比例 ( 100vh 為一倍 )
vw - 相對當前畫面寬度的比例 ( 100vw 為一倍 )

下例展示了設定一個 div 標籤內文字為 32 像素寬, 而 div 高度為 3 倍字形大小高：

<div style="font-size:32px;height:3em"> hello </div>

hello

試試看吧！

使用 em 定義類別內的文字大小，然後再用 px 設定類別的文字大小吧！

定義一個 .people 類別，內有姓名、性別、生日等以 em 設定不同小的文字。
使用這個類別重覆套用到數個元素上，分別指定不同的文字大小。

王小明

男

01/23

陳小春

男

04/01

丁小噹

女

02/22

常見樣式

有些 CSS 樣式相當複雜，但也有許多樣式只是單純變更顏色或位置，這裡先針對簡單的基本樣式做表列。

文字樣式

樣式名	可能的值	用途
color	<顏色>	字體顏色。顏色有以下幾種使用模式：顏色文字，如「red」。顏色內碼，如「#ff0000」或「#f00」代表紅色。不同色彩空間的數值，如「rgba(255,0,0,1)」
font-size	<數值>px 或 <數值>em	字體大小。利用 <數值>em 指定相對大小， <數值>px 指定絕對大小
font-weight	light / bold / heavy 等, 或數值	字體粗細。亦可用 100 / 200 ... / 900 方式來指定，越大越粗。見下例： font-weight: 100 font-weight: 300 font-weight: 500 font-weight: 700 font-weight: 900
font-family	見右	指定文字要用的字體。預設有： sans-serif ( 無襯線 ) serif ( 有襯線 ) fantasy ( 草寫 ) monospace ( 定寬字 ) 亦可載入網路字型，可參考 Google Font ( https://fonts.google.com/ )
text-align	left right center justify	文字水平對齊。靠左、靠右、置中、展開等。
vertical-align	top bottom middle super sub 等	文字垂直對齊。請參考 CSS 顯示樣式相關屬性 - 垂直對齊 topbottommiddlebaselinesupersub

茶飲菜單超進化！

了解文字樣式以後，讓我們使用各種文字樣式來加強剛剛的菜單吧：

加上分隔線 ( hr )
標題使用粗體襯線字 ( serif )
內文使用無襯線字 ( sans-serif )
標題首字放大 ( 使用相對大小 em )，並上紅色
使用 Emoji ( 0x1f44d ) + 垂直對齊 super 表示推薦
紅色的「季節限定」並使用較小的字體大小
使用 Emoji ( 0x1f379 ) + 水平靠右對齊 super 提供加料資訊

愛找茶

杉林溪奶香烏龍
梨山烏龍
阿里山凍頂茶
白金Gaba 👍
抹綠茶
日月潭紅玉
北埔東方美人

補充鈣

鮮奶茶
白鬍子奶蓋 👍
黑糖珍珠鮮奶
抹茶鮮奶
仙芋鮮奶凍 / 季節限定

🍹 加料：粉圓 5 元 / 愛玉 15 元 / 芋頭 30 元

樣式優先級 / Specificity

綠茶系列的顏色似乎在藍色背景上不夠顯眼。但滑鼠移上去時他不是應該要變白嗎？這是因為有多個樣式設定互相衝突了，而為了解決衝突的問題，CSS 對各種不同的選擇器定義了優先級，具有較高優先級的樣式 ( 比如說這裡的綠色 ) 就會優先顯示。

你可以參考 Specifishity 網站來快速了解各種選擇器寫法的優先順序。

尺寸與背景

樣式名	可能的值	用途
width	<數值>px, 如 30px	設定區塊寬度。 ( 常用在 <div> 標籤上 )
height	<數值>px, 如 20px	設定區塊高度。 ( 常用在 <div> 標籤上 )。範例： <div style="width:100px;height:100px;"></div>
background-color	<顏色>	設定背景色
background-image	url(/path/to/image)	設定背景影象。使用範例: background-image: url(http://xinmeti.co/04/img/1.jpg)
background-repeat	見右	設定背景影像是否重覆描繪。可能的值如下： repeat repeat-x repeat-y no-repeat
background-attachment	fixed scroll	設定背景影像是否要固定不動
background-position	見說明	背景圖的靠齊方式。可指定兩個值，第一個值為 X 方向的靠齊，第二個值為 Y 方向。兩個值以空白分隔。 X 方向的值可以是 left, right 或 center。 Y 方向則可能是 top, bottom 或 center。範例 ( 靠左上對齊 )： background-position: left top
background-size	cover contain 數值	設定背景的尺寸。 cover - 圖覆蓋整個標籤 contain - 圖完整的呈現在標籤中數值 - 指定大小

練習看看吧！

我們來練習使用 width、height 與 background 等屬性。

首先，試做一方形區塊 ( 長寬 200px x 200px )，將其背景填滿黑色 (black)，如下例：

接著試使用 ( http://xinmeti.co/assets/img/sample/cloud.svg ) 這張圖練習設定背景，並做出下列效果：

黑背景 (black)

藍背景 (##08aae1)

置中不重覆

固定式 (捲動看效果)

變小

佔滿

使用漸層色？

你可以在 background 樣式中使用 linear-gradient 語法做出漸層顏色。一個簡單的範例為：

background: linear-gradient(#f00,#f90,#ff0,#0f0,#00f)

在前面加上角度 ( 如 45deg ) 決定角度, 在顏色後面加上比例 ( 如 50% ) 決定位置。

你已經學完 CSS 的基礎囉！接下來就從 CSS 顯示樣式相關屬性繼續吧！

簡介 CSS 語法 CSS Selector 指定單位常見文字樣式尺寸與背景樣式