HTML5 將網頁技術做了清楚的分工, 即 HTML 專注於內容; Javascript 負責行為或動作; 而網頁外觀樣式則交由 CSS 控制呈現方式, 三者透過 link 元素(或 style 屬性) 以及 script 元素耦合, 如下圖所示 :
因為 HTML5 取消了大部分 HTML4 裡面原本負責樣式的標籤, 將外觀呈現全部交給效果更豐富的 CSS 來完成, 因此要讓網頁看起來美觀, 具有視覺傳達效益, 必須對 CSS 有基礎運用能力.
本系列之前的筆記參考 :
#
申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com
#
網頁技術速學筆記 (一) : HTML 基礎
一. 加入 CSS 樣式表的四個方法 :
在網頁中套用樣式的四種方法如下表 :
| 加入 CSS 的四種方法 | 說明 |
| 1. 在網頁元素的 style 屬性內 (inline 行內) | <p style="color:blue; font-wight:bold;"></p> |
| 2. 在網頁標頭的 <style></style> 內嵌入 | <style>
p {color:blue; font-wight:bold;}
</style> |
| 3. 在網頁標頭內以 <link> 連結外部 CSS 檔 | <link ref="stylesheet" href="hello.css"> |
4. 在網頁標頭的 <style></style> 內
以 @import url() 匯入外部 CSS 檔 | <style>
@import url("hello.css")
</style> |
前兩種用法為套用內部樣式, 後兩種為套用外部樣式. 其中第一種行內 (inline) 樣式最優先, 因為它是最後才套用, 其他三種方法則依其載入順序而定, 最後載入的會蓋掉先載入的樣式. 注意, link 元素為空元素 (沒有結束標籤), 只能放在 head 標頭內, 但可以出現一次以上, 它還有一個屬性 type="text/css", 但可以省略.
範例 1 : 行內 (inline) 樣式
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<p
style="color:blue; font-wight:bold;">Hello World</p>
<p
style="font-size:x-large;font-style:italic;">Hello World</p>
<p
style="font-family:微軟正黑體;">Hello World</p>
</body>
</html>
同樣效果改用標頭內的 style 嵌入如下 (使用樣式類別) :
範例 2 : 網頁標頭內用 style 元素嵌入樣式
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.p1 {color:blue; font-wight:bold;}
.p2 {font-size:x-large;font-style:italic;}
.p3 {font-family:微軟正黑體;}
</style>
</head>
<body>
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>
<p class="p3">Hello World</p>
</body>
</html>
範例 3 : 在網頁標頭內用 link 元素連結外部樣式檔
先編輯一個純文字檔 p.css
以 utf-8 編碼存放在 css 子目錄下 :
.p1 {color:blue; font-wight:bold;}
.p2 {font-size:x-large;font-style:italic;}
.p3 {font-family:微軟正黑體;}
然後在 head 裡面用 link 連結此樣式檔 :
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/p.css">
</head>
<body>
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>
<p class="p3">Hello World</p>
</body>
</html>
範例 4 : 在網頁標頭的 style 內用 @import 匯入外部樣式檔
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
@import url("css/p.css")
</style>
</head>
<body>
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>
<p class="p3">Hello World</p>
</body>
</html>
二. CSS 的語法 :
CSS 串接樣式表主要是透過選擇器挑選網頁中的元素, 套用指定之樣式.
1. 樣式結構 :
寫在 style 元素內以及外部 .css 樣式檔中的 CSS 樣式結構如下 :
選擇器 {
屬性1: 值1; /* 這是註解 */
屬性2: 值2;
屬性3: 值3;
....
}
選擇器用來指定樣式要套用的對象, 後面用大括弧 {} 包起來的是樣式內容, 每一個樣式以 "屬性:內容" 格式指定, 可同時指定多個樣式串接, 每一種樣式之間用分號隔開, 這也是 CSS 稱為串接式樣式表的原因.
注意,
屬性值若含有英數字, 小數點, 減號以外字元例如空白時必須加引號, 例如 :
p {font-family:"Times New Roman";}
放在 /* 與 */ 之間的文字會被當做註解不予解析, 但註解文字中不要含有 CSS 的屬性識別字, 例如 :
h1 {
color:blue; /* 大標題用藍色凸顯 */
font-style: italic;
}
如果是行內 (inline) 樣式, 則只要在 HTML 元素的 style 屬性中直接填入樣式內容即可 (不含大括號 {} 與註解), 例如 :
<h1
style="color:blue; font-style: italic;">Hello World</h1>
樣式內容 (包括屬性與值) 雖然都不分大小寫, 例如 Color: BLUE; 與 color: Blue; 均能被正確解析且呈現效果相同, 但習慣上樣式內容最好都用小寫. 但選擇器就不同了, 選擇器中與 Javascript 有關的 id 與 class 有分大小寫.
2. 常用樣式屬性 :
CSS 最常用的樣式屬性如下表 :
| 文字樣式屬性 | 說明 |
| font-family | 字型 : 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用) |
| font-size | 大小 : 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) |
| font-style | 風格 : normal (正常)/italic (斜體)/oblique (粗體) |
| font-weight | 粗細 : 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder |
| font | 設定字型/大小/顏色/風格/粗細等, 例如 font: 15px 標楷體 italic bold |
| text-shadow | 陰影格式: 顏色 右(正)左(負)長度 下(正)上(負)長度 範圍 |
| text-decoration | 添加裝飾 : none/underline/overline/line-through (刪除線) |
| text-transform | 大小寫轉換 : none/lowercase/uppercase/capitalize |
| vertical-align | 垂直對齊 : baseline/super(上標)/sub(下標)/top/middle/bottom |
| 文字樣式屬性 | 說明 |
| font-family (字型) | 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用) |
| font-size (大小) | 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) 大小 |
| font-style (風格) | 有 normal (正常)/italic (斜體)/oblique (粗體) 三個值 |
| font-weight (粗細) | 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder |
| font (綜合) | 以空格隔開, 例如 font: 15px 標楷體 italic bold |
| 色彩樣式屬性 | 說明 |
| color | 設定元素前景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee |
| background-color | 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee |
| border-color | 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee |
| opacity | 設定元素透明度, 值範圍 0.0 (完全不透明) ~ 1.0 (完全透明, 預設) |
| 背景樣式屬性 | 說明 |
| background-color | 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee |
| background-image | 設定元素背景圖片, 可用 url() 設定, 例如 url("img/aaa.png") |
| background-position | 設定元素背景圖片位置, 可用 top/center/bottom/left/right |
| background | 設定元素背景顏色, 圖片, 位置等, 例如 background: red center |
| 尺寸樣式屬性 | 說明 |
| width | 設定元素寬度, 可用 px, %, 或 auto (自動) |
| height | 設定元素高度, 可用 px, %, 或 auto (自動) |
| min-width | 設定元素最小寬度, 可用 px, %, 或 auto (自動) |
| max-width | 設定元素最大寬度, 可用 px, %, 或 auto (自動) |
| min-height | 設定元素最小高度, 可用 px, %, 或 auto (自動) |
| max-height | 設定元素最大高度, 可用 px, %, 或 auto (自動) |
| 邊界留白樣式屬性 | 說明 |
| margin | 設定元素的上右下左邊界寬度, 可用px, %, 或 auto |
| padding | 設定元素內容的上右下左留白寬度, 可用px, %, 或 auto |
| 邊框樣式屬性 | 說明 |
| border-color | 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee |
| border-top | 設定元素的上邊框, none/dotted/dashed/solid/double/groove/inset/outset |
| border-right | 設定元素的右邊框, none/dotted/dashed/solid/double/groove/inset/outset |
| border-bottom | 設定元素的下邊框, none/dotted/dashed/solid/double/groove/inset/outset |
| border-left | 設定元素的左邊框, none/dotted/dashed/solid/double/groove/inset/outset |
| border-style | 設定元素的四邊框, none/dotted/dashed/solid/double/groove/inset/outset |
| border | 設定元素的邊框框線, 顏色, 寬度樣式, 例如 border: dotted 5px blue |
text-shadow 樣式至少需指定兩個數值, 第一個是向右的陰影距離 (負數表示向左), 第二個是向下的陰影距離 (負數表示向上), 第三個數值是陰影範圍 (可有可無). 顏色若不指定預設為黑色陰影.
注意, 樣式中用到外部資源, 例如 background-image 中用到外部圖片當背景, 都使用 url() 來指定資源所在之 URL, 可用本機相對位址例如 url("img/abc.jpg") 或網路位址例如 url("http://www.blabla.com/a.jpg").
更多樣式屬性參考 :
#
https://www.w3schools.com/css/
3. 選擇器種類 :
選擇器可分為如下 7 類 :
| 樣式選擇器 | 說明 |
| 1. 類型選擇器 | 套用對象為 HTML 元素 (標籤選擇器), 例如 p, div, table 等 |
| 2. 後代選擇器 | 套用到符合指定之父子元素 (空格隔開) 關係的子元素上, 例如 div a |
| 3. ID 選擇器 | 套用到指定該 id 屬性值之元素, 選擇器為 id 屬性值前加點號, 例如 .myID |
| 4. Class 選擇器 | 套用到所有該樣式類別之元素, 選擇器為 class 屬性值前加 # 號, 例如 #myClass |
| 5. 屬性選擇器 | 套用到具有指定屬性特徵之元素, 例如 [attr], [attr=val], [attr~=val], [attr|=val] |
| 6. 全域選擇器 | 套用到全部元素, 選擇器為星號 * |
| 7. 偽類選擇器 | 套用到具有指定父子節點關係的多個元素的最後一個元素, 以空格隔開 |
注意, 選擇器中的 id 與 class 一定要大小寫都符合才會套用, 但選擇器若是 HTML 標籤或屬性時則可不分大小寫, 這是因為 HTML 不分大小寫之故, 屬性名稱與值都不分大小寫. 參考 :
#
小细节:css中的的大小写区分
多個套用相同樣式的選擇器
可用逗號合併, 例如 :
p {color: red;}
div {color: red;}
這兩行樣式可用逗號合併為一行 :
div
, p {color: red;}
這表示 p 元素與 div 元素均套用相同樣式.
要注意後代選擇器 (descendant selector) 與合併選擇器的差別, 後代選擇器是以空格隔開
父子元素, 而合併選擇器是用逗號隔開多個要共用同一樣式的選擇器.
類型選擇器 (type selector) 就是以 HTML 標籤當作選擇之對象, 因此網頁中所有這種標籤都會被套用此樣式, 例如 :
範例 5 : 類型選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
p {color:red; font-wight:bold;}
DIV {
COLOR:green; FONT-wight:bold;}
span {text-shadow:navy 3px 3px 3px;}
</style>
</head>
<body>
<p>Hello World</p>
<div>Hello World</div>
<span>Hello World</span>
</body>
</html>
此例中的樣式表定義了 p, div, 與 span 這三種元素的樣式, 可見它們各自套用到指定的元素類型上, 而且樣式內容不論屬性或值都不分大小寫.
下面的範例測試後代選擇器, 這是選擇 HTML DOM 樹階層結構中具有指定之父子關係的子元素, 注意, 它是套用到最後那一個子元素 :
範例 6 : 後代選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
div p span{color:green; font-wight:bold;}
div p {color:blue; font-style:italic;}
p {color:red;}
</style>
</head>
<body>
<
p>Hello World</p>
<
div><
p>Hello World</p></div>
<
div><
p><
span>Hello World</span></p></div>
</body>
</html>
此例定義了三個樣式, 選擇器 div p span 只會套用在 span 元素的內容 Hello World 3; 而 div p 則會套用到 div 的子元素 p 的內容, 因此 Hello World 2 與 Hello World 3 都會套用, 兩個都是斜體字, 顏色部分會先套用 div p 的藍色, 然後馬上又被較嚴格的 div p spam 的綠色覆蓋掉. 總之, 後代較多的會最後套用.
ID 與 Class 選擇器是最常用的選擇器, 尤其是 Class 選擇器, 因為它會套用到有相同 class 屬性值的所有元素; 而 ID 則只能套用到唯一的元素, 因為網頁中的 ID 屬性值必須唯一.
範例 7 : ID 選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#p1 {color:green; font-weight:bold;}
#p2 {color:blue; font-style:italic;}
#p3 {color:red; font-size:24px;}
</style>
</head>
<body>
<p id="
p1">Hello World 1</p>
<p id="
p2">Hello World 2</p>
<p id="
p3">Hello World 3</p>
<p id="
P3">Hello World 3</p>
</body>
</html>
此例樣式表定義了 #p1, #p2, #p3 三個 ID 樣式 (注意, ID 樣式的選擇器是在 id 屬性值前面加上 #), 它們會分別套用到網頁元素中 id 屬性值分別是 p1, p2,p3 的元素. 可見第四個 p 元素因為 id 屬性為大寫的 "P3", 因此不會套用 #p3 的樣式.
類別選擇器是在元素的 class 屬性值前面加個點號, 它會套用到全部具有該樣式類別之元素上, 其使用頻率最廣, 許多前端框架大量使用類別來控制網頁之呈現方式.
範例 8 : Class 選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.header {background:violet;}
.odd {background:lightgray;}
.even {background:orange;}
</style>
</head>
<body>
<table>
<tr class="
header">
<th>代號</th>
<th>公司</th>
<th>股價</th>
<th>現金股利</th>
</tr>
<tr class="
even">
<td>2330</td>
<td>台積電</td>
<td>254</td>
<td>2.5</td>
</tr>
<tr class="
odd">
<td>2412</td>
<td>中華電</td>
<td>107.5</td>
<td>4.48</td>
</tr>
<tr class="
even">
<td>2308</td>
<td>台達電</td>
<td>148.5</td>
<td>5</td>
</tr>
<tr class="
odd">
<td>1301</td>
<td>台塑</td>
<td>93.4</td>
<td>5.08</td>
</tr>
</table>
</body>
</html>
此例定義了三個樣式 header, odd, 與 even, 分別給表格的標題, 奇數列, 偶數列套上底色樣式. 關於顏色名稱參考 :
參考 :
#
https://www.w3schools.com/html/html_colors.asp
#
https://www.w3schools.com/colors/colors_names.asp
#
常用 CSS 屬性列表
屬性選擇器挑選含有指定屬性之元素作為套用樣式之對象, 選擇器形式為將屬性名稱與屬性值篩選條件放入中括號內, 常用的屬性值篩選條件如下 :
| 屬性選擇器 | 說明 |
| [attr] | 套用到具有 attr 屬性之元素 |
| [attr="val"] | 套用到具有 attr 屬性且其值為 val 之元素 |
| [attr~="val"] | 套用到具有 attr 屬性且其值含有 val 之元素 |
| [attr|="val"] | 套用到具有 attr 屬性且其值含有 val- 之元素 |
| [attr^="val"] | 套用到具有 attr 屬性且其值以 val 開頭之元素 |
| [attr$="val"] | 套用到具有 attr 屬性且其值以 val 結尾之元素 |
其中 [attr|=
"val"] 常用在全域屬性 lang, 例如中文有 zh-Hans (簡體中文), zh-Hant (繁體中文), 篩選條件 [lang|="zh"] 就會套用到所有具有 lang 屬性且值為中文語言的元素上. [attr^="val"] 則可用來篩選網址中的 URL 協定 (以 http 開頭) 等, 例如 [href^="http://"]; 而 [attr$="val"] 則常用在篩選副檔名, 例如 [href$=".jpg"].
範例 9 : 屬性選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
[class] {color:blue;}
[class="p2"] {font-weight:bold;}
[lang|="zh"] {font-style:italic;}
[href^="html"] {background:yellow;}
[src$=".jpg"] {border: inset 5px violet}
</style>
</head>
<body>
<p
class="p1">Hello World 1</p>
<p
class="p2">Hello World 2</p>
<p
lang="zh-Hant">Hello World 3</p>
<p><a
href="html_test_hello_world.htm" target="_blank">開啟 Hello World</a><p>
<img
src="img/20190510-cat.jpg" width="400" height="225" alt="Missing">
</body>
</html>
此例定義了五個屬性選擇器, 第一個 [class] 會套用於所有包含 class 屬性之元素, 因此前兩個 p 元素文字顏色都是藍色. 第二個 [class="p2"] 只套用於 class 屬性值為 p2 者, 因此只有第二個 p 元素變粗體. 第三個 [lang|="zh"] 只套用於 class 屬性值為 "zh-" 開頭者, 因此只有第三個 p 元素變斜體. 第四個 [href^="html"] 只套用於 href 屬性值以 "html" 開頭者, 因此只有超連結 a 元素背景色變黃色. 第五個 [src$=".jpg"] 只套用於 src 屬性值以 ".jpg" 結尾者, 因此只有圖片 img 元素套用邊框樣式.
最後來測試偽類選擇器, 偽類選擇器 (pseudo-class selector) 用來選擇具有特定狀態或資訊之元素, 而這無法透過 DOM 樹來選擇, 例如滑鼠滑過 (hover) 之元素等, 最常用在控制超連結或表單元件因狀態而變之外觀, 常用的偽類選擇器如下表 :
| 偽類選擇器 | 說明 |
| :link | 套用尚未瀏覽過之超連結 |
| :visited | 套用已瀏覽過之超連結 |
| :hover | 套用游標在其上方之元素 |
| :focus | 套用取得焦點之元素 |
| :active | 套用所點選之元素 |
| :enabled | 套用表單中可用之元件 |
| :disabled | 套用表單中不可用之元件 |
| :checked | 套用表單中被選取之 radio 或 checkbox 元件 |
| :not() | 套用非指定之選擇器的元素 |
| :valid() | 套用表單中已驗證成功之欄位 |
| :required | 套用表單中之必填欄位 |
偽類選擇器前面可加上元素名稱限定, 例如 a:link 或 input:checked 等.
更多偽類選擇器參考 :
#
https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
#
Day24：小事之 CSS 偽類 與 偽元素
#
CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例
範例 10 : 偽類選擇器測試
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
a:link {color:blue;}
a:visited {color:violet;}
a:hover {background-color:yellow;}
div.hello:hover {background:violet;}
:checked {height:20px; width:20px;}
:disabled {background-color:lightgray;}
:focus {background-color:yellow;}
:required {border:dotted 2px blue;}
</style>
</head>
<body>
<p><a href="http://www.google.com">Google</a><p>
<p><a href="http://tw.yahoo.com">Yahoo</a><p>
<div class="hello">Hello World</div><br>
<form>
<input type="text"
required>
<input type="text"
disabled><br><br>
<input name="language" type="checkbox" value="Python"> Python
<input name="language" type="checkbox" value="R"> R
<input name="language" type="checkbox" value="C#"> C#
</form>
</body>
</html>
此例樣式表中的 :link 與 :visited 均只套用到超連結, 因此前面不加 a 亦可, 而 hover 則可套用到所有元素 (此例為 div). 第一個 text 輸入欄位因為是必填欄位 (required), 因此會套用虛線邊框樣式. 最後面的 checkbox 元件被核取時會套用 :checked 樣式, 即尺寸會變大.
OK, 大功告成, 以上便是網頁專案中最常用的樣式用法.
參考 :
#
https://www.w3schools.com/css/
#
網頁樣式表-CSS的提示與竅門
