線上教室

認識排版語言(CSS3)

講義

關於 CSS
CSS (Cascading Style Sheets ，串接樣式表) 是一種用來進行網頁文件排版與美化的語言，利用它的「樣式表」，就能指定文字的字型，樣式、留白，顏色等樣式，主要的用途是讓網頁設計師能夠輕易地修改網頁的外觀，若是將 CSS 與 HTML 分別寫在不同的檔案上，就能夠讓網頁的維護與修改工作變得更容易。目前網頁的分工是以 HTML 為網頁文件賦予意義，以 CSS 來進行網頁文件的美工與修改。而制定 CSS 標準時，也是以這個目標來進行。在 HTML 網頁文件的美化與佈局及外觀等相關內容，建議儘量利用 CSS 來完成。
關於 CSS3
原本的 CSS 語法是將其功能的模組成不同的規範來制定，希望能夠提昇網頁美化的效率。CSS3 是a由 W3C 進行的標準化工作，它可以不使用圖片或JavaScript語，直接在用戶端網頁程現動畫效果，而且變得更嚴格定義段落和配置方式，在一般行動裝置上(例如：平板、智慧型手機)也能輕鬆瀏覽網頁，大幅地提昇了網頁的表現能力。
CSS 範例
利用 CSS 為文字加上顏色。
Lesson01
- 將以下文字儲存成lesson01.html
```
<!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 樣式。
Lesson02
- 將以下文字儲存成lesson02.html
```
<!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 網頁文件中匯入，通常網頁設計師普遍比較會使用這種做法。
Lesson03
- 將以下文字儲存成 global.css 檔案。
```
#a1 {
   background-color: yellow; /* 黃色 */
   color: blue; /* 藍色 */
}
```
- 將以下文字儲存成lesson03.html
```
<!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/>前景(文字)色指定為藍色
規則的放置處
- 這些規則組可以放在哪裡呢？
Lesson04
- 將以下文字放到 lesson04.html 檔案。
- 放在外部文件中，以 <link>標籤引之外部檔案。
```
<!DOCTYPE html>
<html lang="en">
<head>
   <title>南港高中網頁程式設計</title>
   <link rel="stylesheet" href="style_test.css">
</head>
<body>
   <div>
   <p>歡迎光臨我的網頁</p>
   </div>
</body>
</html>
```
- 將以下文字放到 style_test.css 檔案。
```
div p {
   background-color: yellow; /* 黃色 */
   color: blue; /* 藍色 */
}
```
- ++第 4, 6 行++，引用外部 CSS 檔案
- 在 HTML 網頁文件裡，放在 <style type="text/css"></style>標籤內中。
Lesson05
- 將以下文字放到 lesson05.html 檔案。
```
<!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` 屬性內，例如：
Lesson06
- 將以下文字放到 lesson06.html 檔案。
```
<!DOCTYPE html>
<html lang="zh-hant">
<head>
   <title>南港高中網頁程式設計</title>
</head>
<body>
 <div style="color: red; font-size: 18pt">歡迎光臨我的網頁</div>
</body>
</html>
```
- ++第 7 行++，直接指定這個 `<div>` 元素的屬性。因為是直接套用在這個元素上，所以不需要另外加上篩選條件
衝突處理
Lesson07
若某個 HTML 文件中，前面 3 種引用 CSS 規則的方式都有採用，若套用到相同元素的屬性在多組規則間存在著衝突的話會發生什麼事？比方說某個元素會被上述 3 種方式引用的規則修改到它的前景文字顏色。
- 將以下文字放到 sytle.css 檔案。
```
/* style.css */
p { 
   background-color: yellow; 
   color: blue; 
}
```
- 將以下文字放到 hello.css 檔案。
```
/* hello.css */
p { 
   color: green;
}
```
- 將以下文字放到 lesson07.html 檔案。
```
<!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 規則的順序：
Lesson08
將以下文字放到 lesson08.html 檔案。
```
<!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 針對單一特定元素進行屬性修改或操作。例如：
Lesson09
- 將以下文字放到 lesson09.html 檔案。
```
<!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 針對某一群元素進行屬性修改或操作。
Lesson10
- 將以下文字放到 lesson10.html 檔案。
```
<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>南港高中網頁程式設計</title>
 <style>
    #user_account {color: green}
    #user_name    {color: red}
    .value        {border: 1px dotted silver}
    .cht          {padding: 5pt}
    .eng          {padding: 3pt}
 </style>
</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)選擇器
我們也可以透過元素的屬性值來進一步篩選元素，語法如下：
- 屬性名稱
只有有指定 `屬性名稱` 的元素才會被選取，不論其值為何。
- 屬性名稱=設定值
只有 `屬性名稱` 的值為 `設定值` 的元素會被選取。
- 屬性名稱~=設定值
只有元素的 `屬性名稱` 的值包含 `設定值` 時，元素才會被選取。

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