線上教室

認識 CSS3

講義

關於 CSS

CSS (Cascading Style Sheets ，串接樣式表) 是一種用來進行網頁文件排版與美化的語言，利用它的「樣式表」，就能指定文字的字型，樣式、留白，顏色等樣式，主要的用途是讓網頁設計師能夠輕易地修改網頁的外觀，若是將 CSS 與 HTML 分別寫在不同的檔案上，就能夠讓網頁的維護與修改工作變得更容易。目前網頁的分工是以 HTML 為網頁文件賦予意義，以 CSS 來進行網頁文件的美工與修改。而制定 CSS 標準時，也是以這個目標來進行。在 HTML 網頁文件的美化與佈局及外觀等相關內容，建議儘量利用 CSS 來完成。

關於 CSS3

原本的 CSS 語法是將其功能的模組成不同的規範來制定，希望能夠提昇網頁美化的效率。CSS3 是由 W3C 進行的標準化工作，它可以不使用圖片或JavaScript語，直接在用戶端網頁程現動畫效果，而且變得更嚴格定義段落和配置方式，在一般行動裝置上(例如：平板、智慧型手機)也能輕鬆瀏覽網頁，大幅地提昇了網頁的表現能力。

CSS 範例

利用 CSS 為文字加上顏色

範例

<!DOCTYPE html>
<html>
<head>
<title>大直高中網站設計</title>
<style type="text/css">
span {color: blue; /* 藍色 */
}
</style>
</head>
<body>
<p>這是用 <span>HTML5+CSS3</span>寫的網頁文件</p>
</body>
</html>

CSS 的檔案位置

在 Style 屬性中指定

在 HTML 網頁文件中嵌入 style 屬性，將樣式套用到網頁文件中。

<div style="color:blue;">套用 CSS 了！</div>

使用 style 在同一個網頁文件中進行指定

在 HTML 網頁文件中的 head 標籤中置入 style 屬性就可以使用 CSS 樣式來美化網頁文件，運用這種方式，可以輕易地為多個網頁文件套用相同的 CSS 樣式。

範例

<!DOCTYPE html>
<html>
<head>
<title>大直高中網站設計</title>
<style type="text/css">
#a1 {
   background-color: yellow; /* 黃色 */
   color: blue; /* 藍色 */
}
</style>
</head>
<body>
<p id="a1">歡迎光臨我的網頁</p>
</body>
</html>

從外部檔案匯入 CSS 樣式

除了將 CSS 樣式嵌入 HTML 網頁文件外，也可以將 CSS 樣式儲存成一個獨立的文字檔案，再將它由 HTML 網頁文件中匯入，通常網頁設計師普遍比較會使用這種做法。

範例

將以下文字儲存成 global.css 檔案。

#a1 {
   background-color: yellow /* 黃色 */
   color: blue; /* 藍色 */
}

在 HTML 網頁文件中匯入 global.css 檔案。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="global.css">
   <title>大直高中網站設計</title>
</head>
<body>
<p id="a1">歡迎光臨我的網頁</p>
</body>
</html>

CSS 規則

在編寫 CSS 規則(Ruleset)的時候，首先要先指明 CSS 樣式要套用對象，接著才是指定要修改那些屬性以及其設定值。指定要套用的對象後，用一對大括號 `{}` 將欲修改的屬性設值包含在其中，任兩組屬性與設定值之間以分號 `;` 隔開，每一組屬性設定以 `屬性名稱: 設定值` 的格式編排。如：

div p {
   background-color: yellow; /* 黃色 */
   color: blue; /* 藍色 */
}

div p是用來篩選套用對象的規則。
將欲調整的屬性及其設定值置於篩選規則後面的大括號 {}
background-color: dimgrey;背景色指定為黃色。
color: white;前景(文字)色指定為藍色。

套用對象篩選規則	屬性設定
div p	background-color: yellow;`<br/>`color: blue;`\|背景色指定為黃色<br/>前景(文字)色指定為藍色

規則的放置處

這些規則組可以放在哪裡呢？

放在外部文件中，以 <link>標籤引之外部檔案，例如：

/* style_test.css */
div p {
   background-color: yellow; /* 黃色 */
   color: blue; /* 藍色 */
}

範例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>網站設計專題</title>
   <link rel="stylesheet" href="style_test.css">
</head>
<body>
   <div>
   <p>歡迎光臨我的網頁</p>
   </div>
</body>
</html>

- ++第 4, 6 行++，引用外部 CSS 檔案

在 HTML 網頁文件裡，放在 <style type="text/css"></style>標籤內中。

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
 <style type="text/css">
   div p {
     background-color: yellow; /* 黃色 */
     color: blue; /* 藍色 */
   }
 </style>
</head>
<body>
   <div>
   <p>歡迎光臨我的網頁</p>
   </div>
</body>
</html>

- ++第 4-11 行++，HTML文件內的 `<style>...</style>` 標籤

在 HTML 文件內直接在欲套用的元素上，將屬性設定放在該元素的 `style` 屬性內，例如：

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
   <title>網站設計專題</title>
</head>
<body>
 <div style="color: red; font-size: 18pt">歡迎光臨我的網頁</div>
</body>
</html>

- ++第 7 行++，直接指定這個 `<div>` 元素的屬性。因為是直接套用在這個元素上，所以不需要另外加上篩選條件

衝突處理

若某個 HTML 文件中，前面 3 種引用 CSS 規則的方式都有採用，若套用到相同元素的屬性在多組規則間存在著衝突的話會發生什麼事？比方說某個元素會被上述 3 種方式引用的規則修改到它的前景文字顏色，例如：

/* style.css */
p { 
   background-color: yellow; 
   color: blue; 
}

/* hello.css */
p { 
   color: green;
}

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
   <title>網站設計專題</title>    
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="hello.css">
</head>
<body>
   <style type="text/css">
     p { color: blue }
   </style>
   <p style="color: red">猜猜我是什麼顏色？</p>  
</body>
</html>

瀏覽器解決衝突的方式是：

1. 直接指定元素的 style屬性最優先
2. 其餘的方式，後載入的規則會覆蓋先載入的規則設定值。

因此上面的 CSS 與 HTML 的組合，最後 <p> 標籤內的「猜猜我是什麼顏色？」的呈現方式為：

<p style="background-color: yellow; color:red;">猜猜我是什麼顏色？</p>

因為直接指定了該標籤的 style，所以前景顏色為紅色；但背景色只有 style.css 檔案中有指定，沒有發生衝突，所以背景色被指定為灰色

若調整一下 HTML5 引用 CSS3 規則的順序：

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title> 
 <link rel="stylesheet" href="style.css">
 <style type="text/css">
   p {color: blue}
 </style>
 <link rel="stylesheet" href="hello.css">
</head>
<body>
 <p>猜猜我是什麼顏色？</p>  
</body>
</html>

因為最後被引用的是 hello.css裡的規則，所以最後「猜猜我是什麼顏色？」的呈現方式為灰底綠字：

<p style="background-color: yellow; color:green;">猜猜我是什麼顏色？</p>

選擇器器(Selector)

標籤選擇器

直接打上 HTML 標籤即可，例如：
h1, p, div, li, a

ID選擇器

HTML 檔案中的任何一個元素都可以指定一個 `id` 屬性作為它的識別代號，方便後續透過 CSS 或 Javascript 針對單一特定元素進行屬性修改或操作。例如：

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
</head>
<body>
   <h1 id="page_title">檢視帳號</h1>
   <table>
       <tr>
       <th>使用者帳號</th>
       <td id="user_account">manager</td>
       </tr>
       <tr>
       <th>使用者姓名</th>
       <td id="user_name">管理員</td>
     </tr>
   </table>
</body>

注意

在同一個 HTML 頁面上，每個元素的 id值應該是獨特、唯一、不可重覆的，也就是不可以有兩個元素的 id 值是相同的。

如果要透過 CSS 規則來修改某特定 id 值的元素，在篩選條件需在 id 值之前加上 # 符號，例如：

#user_account {color: green; border: 1px dashed grey}
#user_name    {color: red; border: 1px dashed grey}

類別(Class)選擇器

HTML 檔案中的任何一個元素都可以指定 class 屬性來將元素分群或分類，方便後續透過 CSS 或 Javascript 針對某一群元素進行屬性修改或操作。

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
</head>
<body>
   <h1 id="page_title">檢視帳號</h1>
   <table>
       <tr>
       <th>使用者帳號</th>
       <td id="user_account" class="value eng">manager</td>
       </tr>
       <tr>
       <th>使用者姓名</th>
       <td id="user_name" class="value cht">管理員</td>
       </tr>
   </table>
</body>
</html>

注意

每個元素套用的 class 可以重覆，如上面的 HTML 所示，manager 跟「管理員」所在的這兩個 <td> 元素都屬於 value 這個類別。另外，同一個元素可以同時套用不同的類別，例如： manager 所在的 <td> 元素同時屬於 value 以及 eng 類別。

舉個生活上的實例來說明，我們可以把套用的 CSS 類別想像成是某種角色或身份。以某個學生來說，他的身份是「學生」，他同時也具有「某所學校的人」的身份，而他可能還是「某個社團的社員」。

要透過 CSS 來修改某一類元素的屬性，在篩選條件需在指定的類別名稱之前加上 . 符號，例如：

#user_account {color: green}
#user_name    {color: red}
.value        {border: 1px dotted silver}
.cht          {padding: 5pt}
.eng          {padding: 3pt}

屬性(Attribute)選擇器

我們也可以透過元素的屬性值來進一步篩選元素，語法如下：

屬性名稱

只有有指定 `屬性名稱` 的元素才會被選取，不論其值為何。

屬性名稱=設定值

只有 `屬性名稱` 的值為 `設定值` 的元素會被選取。

屬性名稱~=設定值

只有元素的 `屬性名稱` 的值包含 `設定值` 時，元素才會被選取。

HTML 與 CSS

範例

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
</head>
<body>
   <ul>
       <li>飲料選單</li>
       <li data-category="tea" data-type="hot iced">菊花潽洱</li>
       <li data-category="tea" data-type="hot">烏龍茶</li>
       <li data-category="water" data-type="cold">白開水</li>
       <li data-category="juice" data-type="iced">柳橙汁</li>
       <li data-category="juice" data-type="iced">蘋果汁</li>
       <li data-category="juice" data-type="iced hot">金桔檸檬</li>
   </ul>
</body>
</html>

範例

在 HTML 網頁文件中，加入以下的 CSS 語法：

li[data-category]        {background-color: gold}
li[data-type="cold"]     {color: grey}
li[data-type="iced"]     {color: blue}
li[data-type~="hot"]     {border: 1px solid red}

HTML 網頁文件

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
 <style type="text/css">
   li[data-category]        {background-color: gold}
   li[data-type="cold"]     {color: grey}
   li[data-type="iced"]     {color: blue}
   li[data-type~="hot"]     {border: 1px solid red}
 </style>
</head>
<body>
   <ul>
       <li>飲料選單</li>
       <li data-category="tea" data-type="hot iced">菊花潽洱</li>
       <li data-category="tea" data-type="hot">烏龍茶</li>
       <li data-category="water" data-type="cold">白開水</li>
       <li data-category="juice" data-type="iced">柳橙汁</li>
       <li data-category="juice" data-type="iced">蘋果汁</li>
       <li data-category="juice" data-type="iced hot">金桔檸檬</li>
   </ul>
</body>
</html>

顯示效果如下：-

偽選擇器(Pseudo-selector)

另外還有兩種比較進階的偽選擇器(Pseudo-selector)，它們不是用來選擇元素，而是用來指涉元素的某一部份，或者進一步描述元素處在某些特定狀態下。

偽類別(Pseudo-class)選擇器

CSS 偽類別是以冒號 : 附加在基本選擇器後方的一組關鍵字，用來指示只有在某種狀態之下的元素才需要被選取。舉例來說，我們可以在連結元素被滑鼠游標碰到的時候變更它的樣式，或者讓核取方塊(Checkbox)在被禁用或被核取時有不同的外觀，亦或者讓某元素的第一個子元素的樣貌與眾不同。

以下列出一些比較常用的偽類別選擇器：

偽類別\|說明	範例
`checked`	元素目前被核取，僅適用在`radio`(`<input type="radio">`)
`input[type="radio"]:checked`	`checkbox`(`<input type="checkbox">`), 或是`option`(`<select>`裡的`<option>`) 等表單輸入元素上
`disabled`	元素處在被禁用的狀態`input:disabled`
`empty`	此元素下無其它子元素的存在`ul.disp:empty`
`hover`	滑鼠游標目前在元素範圍內`.list-item:hover`
`first-child`	此元素為其親代元素的第 1 個子元素`.story>p:fist-child`
`first-of-type`	此元素為其親代元素的第 1 個同類子元素`.report span:first-of-type`
`nth-child()`	此元素其親代元素的第 n 個子元素`ul.strip>li:nth-child(2n+1)`
`nth-of-type()`	\|此元素其親代元素的第 n 個同類子元素`p:nth-of-type(3n+2)`
`only-child`	元素為其親代元素的唯一子代`ul.disp>li:only-child`
`optional`	此輸入元素非必填`input:optional`
`required`	此輸入元素為必填`input:required`

需要特別說明的是 :nth-child() 與 :nth-of-type() 這兩個可以夾帶參數的偽類別，在計算元素序位的時候，是以 1 號起算，第 1 個元素的序位就是 1 號。它們的參數可以是以下這幾種型態：

直接的整數值

表示只有指定序位的元素會被選取，例如：

li:nth-child(2) {background-color: silver}

僅親代的第二個 `li` 元素的背景色被指定為銀色(淺灰色)

An+B

A與 B 必須都是整數，表示每 A 個為一組，每組當中的第 B 個元素。例如：

li:nth-child(3n+1) {color: red}

將親代的第 $1, 4, 7, 10, 13, ... 3n+1$ 等序位的 `li` 元素的文字顏色指定為紅色

關鍵字 `odd`、`even`

表示要選取奇數(odd)序位或偶數(even)序位的元素，例如要讓表格的奇數列底色皆是白色，偶數列底色皆是淺灰色的話，可以這樣寫：

tr:nth-child(odd)    {background-color: white}
tr:nth-child(even)   {background-color: silver}

註：

odd 相當於指定 An+B 形式的 2n+1，而 even 則等同於 2n。

來個範例練習一下，假設底下是某個餐廳的菜單頁面的 HTML 原始檔：

範例

請將以下的 CSS 文字儲存為「demo.css」。

nav {
   background-color: steelblue;
   color: white; 
   display: flex; 
   padding: 5pt;
}
.mtype  {width: 100%}
.mtitle {
   font-weight: bolder;
   font-size: 125%;
   margin-bottom: 5pt;
}

在 HTML 網頁文件中撰寫以下的文字。

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>
   <nav>
       <div class="mtype">
           <div class="mtitle">中式餐點</div>
           <div class="mitem">炒烏龍麵</div>
           <div class="mitem">什錦炒飯</div>
       </div>
       <div class="mtype">
           <div class="mtitle">披薩</div>
           <div class="mitem">瑪格利特披薩</div>
           <div class="mitem">夏威夷披薩</div>
           <div class="mitem">乳酪四重奏披薩</div>
       </div>
       <div class="mtype">
           <div class="mtitle">義大利麵</div>
           <div class="mitem">奶油義大利麵</div>
           <div class="mitem">蕃茄義大利麵</div>
           <div class="mitem">青醬義大利麵</div>
       </div>
       <div class="mtype">
           <div class="mtitle">飲料</div>
           <div class="mitem">拿鐵咖啡</div>
           <div class="mitem">美式咖啡</div>
           <div class="mitem">義式濃縮咖啡</div>
           <div class="mitem">英式伯爵奶茶</div>
           <div class="mitem">日式煎茶</div>
           <div class="mitem">阿里山紅茶</div>
       </div>
   </nav>
   <main>
       <h1>主要內容</h1>
       <p>菜單在旁邊噢！</p>
   </main>
</body>
</html>

- ++第 5 行++，透過 <link> 標籤引用外部的樣式檔 `demo.css`
- ++第 8-35 行++的 <nav>...</nav> 定義了一組導覽列的結構，為了簡化範例，每個導覽項目僅以 <div></div> 標籤代表，

在正式的網站上，導覽項目應為使用 <a></a>定義的連結項目。
- mtype 類別用來標示餐點類別
- mtitle 類別用來標示餐點類別的標題文字
- mitem 類別用來標示餐點類別的選項

然後試著編輯 `demo.css` 檔案來調整頁面的外觀：

- 調整 <nav>...</nav>的顯示方式，設定其底色，並將文字顏色調整為白色：

範例

請將以下的 CSS 文字儲存為「demo.css」。

body {
   display: flex;
}
main {
   width: 100%;
   border-left: 1px solid silver;
   margin-left: 5pt;
   padding-left: 5pt
}
nav {
   width: 200px;
   background-color: steelblue;
   color: white; 
   display: flex; 
   padding: 5pt;    
}
.mtype  {
   width: 100%;
}
.mtitle {
   font-weight: bolder;
   font-size: 125%;
   margin-bottom: 5pt;
}
.mtype:nth-child(even)  {
   background-color: dimgre;
}
.mtype:hover    {
   background-color: white;
   color: black;
}

- ++第 10-16 行++，調整 nav 標籤的顯示方式：
- ++第 12 行++，指定背景顏色
- ++第 13 行++，指定前景(文字)顏色
- ++第 14 行++，將呈現方式指定為 flex，排列內容項目
- ++第 15 行++，指定內邊界為 5pt
- ++第 17-19 行++，調整套用 mtype 類別元素的寬度需佔滿其親代元素的寬度。由於其親代元素 nav 指定其呈現方式為 flex，所以 nav 內套用 mtype 的 4 個 div 標籤的寬度被平均分配為 nav 元素的 1/4。
- ++第 20-24 行++，調整套用 mtitle 類別元素的屬性：
- ++第 21 行++，字體加粗
- ++第 22 行++，字體大小加大 25%
- ++第 23 行++，設定其下方的外邊界為 5pt

- ++第 25-27 行++ 為了區隔相鄰的餐點類別，調整一下偶數序位的 mtype 類別的背景色

- ++第 28-31 行++ 突顯被滑鼠游標碰到的餐點類別

在 HTML 網頁文件中撰寫以下的文字。

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>
   <nav>
       <div class="mtype">
           <div class="mtitle">中式餐點</div>
           <div class="mitem">炒烏龍麵</div>
           <div class="mitem">什錦炒飯</div>
       </div>
       <div class="mtype">
           <div class="mtitle">披薩</div>
           <div class="mitem">瑪格利特披薩</div>
           <div class="mitem">夏威夷披薩</div>
           <div class="mitem">乳酪四重奏披薩</div>
       </div>
       <div class="mtype">
           <div class="mtitle">義大利麵</div>
           <div class="mitem">奶油義大利麵</div>
           <div class="mitem">蕃茄義大利麵</div>
           <div class="mitem">青醬義大利麵</div>
       </div>
       <div class="mtype">
           <div class="mtitle">飲料</div>
           <div class="mitem">拿鐵咖啡</div>
           <div class="mitem">美式咖啡</div>
           <div class="mitem">義式濃縮咖啡</div>
           <div class="mitem">英式伯爵奶茶</div>
           <div class="mitem">日式煎茶</div>
           <div class="mitem">阿里山紅茶</div>
       </div>
   </nav>
   <main>
       <h1>主要內容</h1>
       <p>菜單在旁邊噢！</p>
   </main>
</body>
</html>

偽元素(Pseudo-element)選擇器

偽元素與偽類別很相似，但是它是用來指涉元素的某一部份而非元素本身。需要用兩個冒號 `::` 將代表偽元素的關鍵字附加在基本選擇器之後。

偽元素	說明	範例
after	此元素的尾端	.clear::after
before	此元素的開端	.list-item::before
first-letter	此元素的第 1 個字元	p::first-letter
first-line	此元素的第 1 行	.story>p::first-line
selection	此元素被選取的範圍	.article::selection

例如：

.clear::after {
   clear: both;
}
p::first-letter {
   font-size: 150%;
   font-weight: bold;
}

- 自動在套用 `clear` 類別的元素後，清除浮動(`float`屬性)顯示的設定。
- 每個段落(`p`)元素的第一個字元，尺寸加大 50% 並以粗體顯示。

選擇器組合運算與群組

一次使用單一選擇器很方便，但在某些情況之下會顯得沒有效率。CSS 提供了幾種方式依據網頁元素彼此間的關係來選擇網頁元素：

子代 A > B

會選擇 A 下一層的 B 元素。HTML範例如下：

<div class="title">主目錄</div>
<div class="card">
   <div class="title">子目錄1</div>
   <div>
   <div class="title">子目錄2</div>
   </div>
   <div class="title">子目錄3</div>
</div>

若 CSS 規則為：

.card>.title {color: dimgrey; font-size: 18pt}

則僅有「子目錄1」還有「子目錄3」會被套用到這條規則。

後代 A B

會選擇 A底下的 B元素，只要 B 元素被 A 包含即可，不管其間有幾層。

HTML 範例同上，但 CSS 規則修改為：

若 CSS 規則為：

.card .title {color: dimgrey; font-size: 18pt}

則「子目錄1」、「子目錄2」、「子目錄3」都會被套用到這條規則。

同層直接相鄰 A + B

會選擇與 A 同層，但是緊鄰它的 B 元素。也就是說只有當 A 元素下一個元素為 B 的情況下，這些 B 元素會被選取出來。

假設 HTML 網頁文件如下：

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網站設計專題</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>    
   <div class="example">
   <div class="item">項目1</div>
   <div class="item">項目2</div>
   <div id="pivot" class="item">項目3</div>
   <div class="item">項目4</div>
   <div class="item">項目5</div>
   </div>
</body>
</html>

欲套用的 CSS 規則為：

#pivot + .item {border: 1px dotted silver}

這樣只有「項目4」會套用到這個規則。

同層相鄰 A ~ B

會選擇與 A 同層，但是在它之後的 B 元素。也就是說只有當 A 元素之後的元素為 B 的情況下，這些 B 元素會被選取出來。

假設 HTML 網頁文件同上，但 CSS 規則若修改為：

#pivot ~ .item {border: 1px dotted silver}

則「項目4」與「項目5」都會套用這條規則。

群組(Grouping)

若是好幾組元素有共同的屬性設定，可以用群組的方式先將所有的篩選條件列成群組清單，然後再一起寫一組屬性設定就好。例如：

h1 {font-family: helvetica, 'sans serif'}

h2 {font-family: helvetica, 'sans serif'}

h3 {font-family: helvetica, 'sans serif'}

h4 {font-family: helvetica, 'sans serif'}

.title {font-family: helvetica, 'sans serif'}

可以用 , 合併為

h1, h2, h3, h4, .title {font-family: helvetica, 'sans serif'}

CSS Box Model

在正式介紹 CSS 的屬性之前，先介紹 CSS Box Model，中文有人翻成區塊模型，也有譯為盒模型。你可以想像，網頁上的每個可視的 HTML 元素都被放置在一個個的盒子(Box)裡，如下圖：

這裡補一張圖片

![](https://i.imgur.com/cz4Mz93.png)

- 元素的最外圍是框線(border)
- 外邊界(margin)是元素與周圍其他元素要保持的距離
- 內邊界(padding)是邊框與實際內容要保持的間距
- 內容(content)才是實際要顯示的內容
- 元素的寬度(width)與高度(height)，預設是指元素內容的寬與高，不包含內邊界與框線佔用的空間

常用CSS屬性

數值

指定數值型的設定值可以用以下方式：

- 絕對單位：以數值加上單位的方式，常用的單位如下：
- px: 畫素
- q, mm, cm, inch: 1/4公厘, 公厘, 公分, 英吋
- pt, pc: 點(Point, 1/72 英吋), Picas(12個點，也就是 1/6 英吋)
- 相對單位：
- em:
- 相對比例：以數值加上 % 的方式表示與其親代元素屬性值的相對比例。

顏色

指定顏色的設定值可以使用下列方式：

- 顏色名稱：

例如：red, blue, green, white, black, yellow, ... 等，完整的顏色名稱請參見 mdn web docs 網頁。

但其中有一個特殊的顏色名稱 transparent 代表透明，通常用在指定背景顏色時使用。

- 16進位色碼：

# 後面以 3 組 16 進位數字來表示紅、綠、藍三原色的強度，每組數字的範圍從 00 至 FF，對應到 10 進位的數值為 0 ~ 255，例如：

#64a57c

- RGB函數：

rgb() 函數接受 3 個參數，依序代表紅、綠、藍三原色的強度，每個參數的範圍由 0 ~ 255，例如：

rgb(100, 165, 110)

<span style="background-color: rgb(100, 165, 110); padding: 3pt">123</span>

- RGBA函數：

rgba() 函數接受 4 個參數，前 3 個同 rgb() 函數，第 4 個參數代表透明度 alpha 值，範圍為 0 ~ 1 之間的浮點數值，用 0 表示完全透明，1 表示完全不透明，例：

rgba(100, 165, 110, 0.4)

<span style="background-color: rgba(100, 165, 110, 0.4); padding: 3pt">123</span>

文字屬性

font-family 指定欲使用的字體的順序，例如：

body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
   
.title {
   font-family: "微軟正黑體", "標楷體", "細明體";
}

- font-size 指定元素的字體大小，例如：

.title {
   font-size: 15px;
}

- font-weight 指定字重(字的粗細)，例如：

.title {
   font-weight: bold;
}

其屬性的設定值有以下方式：

- 級數
一般通用的字重級數為 100、200、...、800、900 等整百數值，但是顯示效果要看套用的字型是否支援。但是在最新的 CSS 4 標準中，則放寬到 1 ~ 1000 間的任意整數值皆可。
- 關鍵字
- normal: 標準，對應到的級數為 400
- bold: 粗體，對應到的級數為 700
- 相對關鍵字
- bolder: 比親代元素稍粗一點
- lighter: 比親代元素稍細一點

下表為對照關係：

繼承自親代元素的字重級數	bolder對應級數	lighter對應級數
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

- color 指定元素的前景色，通常是指元素內容文字的顏色

例如：

body {color: grey}
h1, h2, h3 {color: #ff8a74}
.note {color: rgb(70, 98, 180)}

- text-decoration 指定文字裝飾方式

為以下 3 個屬性的縮寫：

- text-decoration-line 裝飾線的類型：

- underline <span style="text-decoration: underline">底線</span>

- line-through <span style="text-decoration: line-through">刪除線</span>
- overline <span style="text-decoration: overline">頂線</span>
- none 無裝飾線

註：若為 none 的話，則不需設定以下兩項。

- text-decoration-style 裝飾線樣式：
- solid <span style="text-decoration: underline solid">實線</span>
- double <span style="text-decoration: underline double">雙實線</span>
- dotted <span style="text-decoration: underline dotted">點虛線</span>
- dashed <span style="text-decoration: underline dashed">短虛線</span>
- wavy <span style="text-decoration: underline wavy">波浪線</span>

- text-decoration-color 裝飾線顏色同 color 指定方式

如果要取消預設的裝飾線(例如連結元素 <a>瀏覽器在顯示的時候預設會有連結項目下方的裝飾底線)，可以將此屬性設定為 none，例如：

.bookname {text-decoration: underline wavy dimgrey}
a {text-decoration: none}

也可以分別指定各個屬性，例如：

.bookname {
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: dimgrey;
}

元素背景

- background-color 指定背景顏色

同 color 指定方式，例如：

.content {background-color: white}
.title {background-color: dimgrey; color: white}

- background-image 指定背景圖片

以 url() 函數來指定圖片來源，例如：

.content    {background-image: url('back.jpg')}
.title      {background-color: url('https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png')}

清單

- list-style
- list-style-type
- list-style-position
- list-style-image

元素框線與陰影

- border
- border-left, border-right, border-top, border-bottom
- border-radius
- border-color
- box-shadow 盒陰影

<span style="box-shadow: 2px 2px 3px">aaa</span>

- text-shadow 文字陰影

<span style="text-shadow: 2px 2px 3px blue">123</span>

排版類

- width, height 元素尺寸：寬度、高度

例如：

.box1 {
   width: 25%;
   height: 100px;
}

將套用 box1 類別的元素的寬度設定為其親代元素的 `25%`，高度指定為 100 個像素。

- box-sizing 元素尺寸的計算方式

回想一下前面提過的盒模型：

指定元素的寬度與高度的時候，預設指的是元素內容的寬度與高度，而內邊界與框線所佔用的空間則是另外計算的。例如：

<div id="parent">
   Parent Content
   <div id="child">
       Child Content
   </div>
</div>

#parent {
   width: 100%;
   border: 1px solid grey;
}
#child {
   margin-top: 10px;
   width: 100%;
   border: 1px solid red;
   padding: 10px;
}

顯示效果如下所示：

<div style="width: 100%; border: 1px solid grey">
<p>Parent Content</p>
<div style="margin-top: 10px; width: 100%; border: 1px solid red; padding: 10px; box-sizing: content-box">
Child Content
</div>
</div>

內部的 #child 元素，寬度竟然超過它上層的 #parent 元素。這是因為 width 的設定值 100% 指的是內容寬度，再加上內邊界(`padding`)的 `20px` (左右內邊界各 `10px`)，以及框線 `2px` (左右框線各 `1px`)，因此內部的 `#child` 元素實際佔用的寬度比它的親代元素 `#parent` 多了 `22px`，所以在畫面上會看到它超出 `#parent` 的範圍。

`box-sizing` 屬性可以用來調整這個狀態，它的設定值有以下 2 種選項：

- content-box 這是預設值，元素的寬高設定值僅針對其內容。
- border-box 元素的寬高設定值包含整個邊框以內的範圍，因此元素內容實際佔用的空間，就需扣除邊框與內邊界。

延續原本的範例，若將 #child 的 box-sizing 屬性指定為 border-box 的話，整個 #child 所佔用的空間就會被 #parent 所包覆：

#child {
   margin-top: 10px;
   width: 100%;
   border: 1px solid red;
   padding: 10px;
   box-sizing: border-box;
}

<div style="width: 100%; border: 1px solid grey">
   <p>Parent Content</p>
   <div style="margin-top: 10px; width: 100%; border: 1px solid red; padding: 10px; box-sizing: border-box">
           Child Content
   </div>
</div>

- margin 外邊界(四周與其他元素的距離)

外邊界的設定方式，依據給定的設定值的個數與其代表的邊界意義如下：

- 僅給定一個設定值表示要同時設定上下左右四個方向的邊界，例：

.demobox {margin: 5px}

- 給定 2 個設定值，第 1 個表示上下邊界，第 2 個表示左右邊界，例：

.demobox {margin: 3px 5px}

- 給定 4 個設定值，依序表示上、右、下、左四個方向的邊界，例：

.demobox {margin: 0 6px 5px 3px}

- margin 的屬性值除了指定數值之外，也可以指定為 auto 讓瀏覽器自動計算。例如：

<div class="outerdiv">
   <div class="innerdiv">
   </div>
</div>

.outerdiv {
   height: 200px;
   border: 1px solid grey;
}
.innerdiv {
   height: 100px;
   width: 100px;
   margin: 50px auto;
   border: 1px solid red;
}

顯示效果示意如下：

<div style="height: 200px; border: 1px solid grey; position: relative">
<span style="position: absolute; background: grey; color: white; padding: 3px">outerdiv</span>
<div style="height: 100px; width: 100px; margin: 50px auto; border: 1px solid red; position: relative">
<span style="position: absolute; background: red; color: white; padding: 3px">innerdiv</span>
</div>
</div>

- 套用 innerdiv 類別的 div 元素，因為左右邊界的設定值被指定為 auto，因而造成它被水平置中了。
- 另外，若要單獨指定某個方向的外邊界的話，則可使用下列這些屬性名稱：margin-left, margin-right, margin-top, margin-bottom。例：

.title {margin-top: 5pt; margin-bottom: 10pt}

- padding 內邊界(與內部內容的間距)
- 與 margin 設定方式相同。
- 若要單獨指定某方向的內邊界，可透過 padding-left, padding-right, padding-top 以及 padding-bottom 這幾個屬性名稱來操作

<div class="box-container">
   <div class="p1">p1 content</div>
   <div class="p2">p2 content</div>
</div>

.box-container {border: 1px solid grey; padding: 5pt}
.p1 {border: 1px solid green; padding: 5px; margin-bottom: 5pt}
.p2 {
   border: 1px solid red;
   padding-top: 3px;
   padding-bottom: 20px;
   padding-left: 10pt;
}

顯示效果如下：

<div class="box-container" style="border: 1px solid grey; padding: 5pt">
<div style="border: 1px solid green; padding: 5px; margin-bottom: 5pt">p1 content</div>
<div style="border: 1px solid red; padding-top: 3px; padding-bottom: 20px; padding-left: 10pt;">p2 content</div>
</div>

- display 顯示類型

這個屬性用來指定元素的顯示類型，由元素如何生成盒模型的 2 個的基本特徵所組成：

- 外部顯示類型：用來定義元素的盒模型如何被排版，常用的有以下選項：
- block 此元素被當成區塊元素來排版。一般說來，區塊元素不與其它元素並排，可以指定寬度與高度。
- inline 此元素被當成行內元素來排版。行內元素可與其它行內元素並排在同一行，直到超出整行的寬度，才會被排到下一行。元素的寬度與高度僅由內容決定，無法人為指定。
- 內部顯示類型：用來定義元素內容如何編排，常用的選項如下：
- flow 預設值，表示視內部元素為 block 或 inline 來編排內容。
- table 將內容以表格形式來編排。
- flex 彈性盒子佈局(flexible box layout)，這種編排方式的子元素可以由任意方向開始編排(由下而上，由右往左都可以)，而且子元素的尺寸也可以彈性自動調整，像是自動延展來佔滿未使用的空間，或是緊縮尺寸以避免超出其親代元素，也可以很方便的操作子元素的水平與垂直對齊方式。
- grid 格線佈局(grid layout)，將元素的內容空間切割成二維的格子，將子元素依照切分出來的格子進行編排。子元素的寬度與高度的設定可改由要佔用幾個格子的數量來指定。

例如：

nav.main-menu   {
   display: block flex;
}

除了上述的設定值之外，還有以下幾種常用的選項：

- list-item 將元素當成清單項目來顯示。
- none 在排版時略過此元素，畫面上不會顯示此元素，就像此元素不存在，頁面上也不會預留此元素佔用的空間。
- inline-block 元素本身是行內元素，但寬度與高度可人為指定。

- position 元素在文件中的定位方式

依照定位方式的不同，搭配 top, right, bottom, left 等 4 個屬性，可決定元素最終的擺放位置。常用的設定選項有：

- static 靜態定位

此為預設值。指元素使用正常的規則進行佈局，在此定位方式下，top, right, bottom, left, z-index 等屬性無效。

- relative 相對定位

指元素使用正常的規則進行佈局，但與 static 不同的是，top, right, bottom, left 的設定值是指相對於其原預設位置的偏移值。

- absolute 絕對定位

指元素被從正常的佈局規則中移除，頁面上不會保留其排版空間，也就是頁面在排版時，會先略過絕對定位的元素，最後再根據其 top, right, bottom, left 屬性來安排元素的在頁面上的擺放位置，而這 4 個屬性的值是指相對該元素最接近的非靜態定位先代(ancestor)元素的偏移值。

- fixed 固定定位

指元素被從正常的佈局規則中移除，頁面上不會保留其排版空間，也就是頁面在排版時，會先略過固定定位的元素。它會固定在頁面可視範圍(viewport)畫面的指定位置，不會隨著頁面捲動而移動。它的 top, right, bottom, left 屬性指的是相對於可視範圍的偏移值。如果想做一個固定出現在畫面上方的導覽列，可將其定位方式設為 `fixed`。

- left, right, top, bottom 元素座標

左上角X座標、右下角X座標、左上角Y座標、右下角Y座標，相對於其參考對象的偏移值。例：

#back-to-top {
   position: fixed;
   right: 5pt;
   bottom: 5pt;
}

- 將 id 為 back-to-top 的元素固定在可視範圍的右下角。

- float 浮動排版

將元置往其容器的左邊或右邊放置，並致使文字與其它的行內元素環繞該元素。如果你在 Word 的文件裡使用過圖片，也許對「文繞圖」這功能會有點印象。

若要將套用 fl-right 類別的元素指定為靠右浮動，其它行內元素與其左方保持 5pt 的邊界，可這樣設定：

.fl-right {
   float: right;
       margin-left: 5pt;
}

示意範例：

<div style="border: 1px solid grey">
<div style="border: 1px solid red; width: 150px; height: 50px; float: right; margin-left: 5pt; position: relative">
<span style="position: absolute; background: red; color: white">fl-right</span>
</div>
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字...
魚</div>

- text-align 行內元素的水平對齊方式

常用的設定值有：

- left 靠左對齊
- right 靠右對齊
- center 置中對齊

- justify 分散對齊

雜項

- cursor 指定游標移到元素上方時游標的樣式
- visibility 顯示與否

指是否要在頁面上顯示此元素，常用的設定值為：

- visible 將元素設為可視狀態
- hidden 隱藏元素

要讓元素在頁面上不顯示可以透過 visibility 或 display 屬性來指定，但兩種方式有一點點差異：

- visibility: hidden 在排版時會保留元素的空間，只是讓它不顯示而已。
- display: none 在排版時會略過元素，不會在頁面上保留該元素的空間。