3. CSS3入門

一、關於CSS

Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
在<style type="text/css"></style>中，或者 .css 檔裡面使用註解，其註解符號為 /* 這裡寫CSS的註解 */
若是在<style type="text/css"></style>外面，或者 .html 檔裡面使用註解，其註解符號為

二、 CSS樣式設定的基本結構

基本概念：挑出網頁中的元素，套上指定樣式。
一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color:blue}」
若有多個，請用「;」隔開。
CSS樣式屬性以及可用的值可從這裡查詢：

(1) 英文版：http://www.w3schools.com/cssref/
(2) 中文版：http://css.doyoe.com/

三、【行內樣式】在HTML標籤中套用CSS

需靠style屬性，如：

<body style="background-image: url(images/templatemo_main_bg.jpg);">
<div style="width:960px;margin:0px auto;background-image: url(images/templatemo_wrapper_m.png);">

優先權最高，影響範圍最小（只限標籤內）。
其挑選器為該標籤，適合用在單一樣式上。

四、【頁內樣式】在單一網頁中套用相同CSS樣式

在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤，盡可能放在<head></head>裡面，例如：

<style type="text/css">
  body{
    background-image: url(images/templatemo_main_bg.jpg);
  }

  #container{
    width:960px;
    margin:0px auto;
    background-image: url(images/templatemo_wrapper_m.png);
  }

  .content{
    padding:10px;
    font-size: 12px;
    color:#594e51;
    line-height: 180%;
    text-align: justify;
  }
</style>

優先權中等，影響範圍為一整頁內。
上述的body、#container、.content都是挑選器
若一篇網頁中，有多個地方要套用相同樣式，可用頁內樣式。

五、【外部樣式】許多頁面套用相同CSS樣式

要讓多個頁面套用相同樣式，就必須把樣式表獨立出來，做成一個CSS檔，如：style.css（請存至 css 目錄下），如：
```
body{ background-color:#f5f5f5; }
#container{ width:980px; margin:0px auto;}
.keyword{color:red;}
```
要套用該樣式表的網頁需利用<link>標籤來呼叫引用：
```
<link rel="stylesheet" type="text/css" href="css/style.css" />
```
若將頁內樣式變成外部樣式後，發現圖片消失了，請檢查圖片連結的相對位置是否正確。例如原本的：
```
background-image:url('images/templatemo_header_background.gif');
```
可能要改為（因為現在的css檔放在css資料夾中）：
```
background-image:url('../images/templatemo_header_background.gif');
```
優先權最低，影響範圍最大，適合用在多頁用共用同一樣式。
一個頁面可以套用好幾個css檔，若裡面有挑選器重複的，則以最後讀到的為主。
在CSS檔中，還可以用import來引入其他的CSS檔：如：@import url("block.css");

六、 CSS的三種挑選器

標籤挑選器：即一般網頁標籤。如：p、img、body...等，只要是該標籤都會受影響。
- (1) 樣式表：
```
body{
  background-image: url(images/templatemo_main_bg.jpg);
}
```
- (2) 網頁：
```
<body>
</body>
```

ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如：

(1) 樣式表：

#container{
    width:960px;
    margin:0px auto;
    background-image: url(images/templatemo_wrapper_m.png);
}

(2) 網頁：
```
<div id="container">
</div>
```

類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如：

(1) 樣式表：

.content{
  padding:10px;
  font-size: 12px;
  color:#594e51;
  line-height: 180%;
  text-align: justify;
}

(2) 網頁：
```
<div class="content">
</div>
```

七、比較常用的關係挑選器

子層（>）：

CSS寫法：

.content > h2{
  font-size: 20px;
  color:#822444;
  font-family: "微軟正黑體";
}

網頁寫法：

<div class="content">
  <h2校務未來發展重點></h2>
  略
</div>

包含（空白）：

CSS寫法：

ul li{
  list-style-image: url(images/templatemo_list.png);
}

網頁寫法：

<ul>
  <li>推展絲竹樂教學，提升音樂風氣。</li>
  <li>推動竹編教學，潛移默化薰陶。</li>
</ul>

八、 CSS進階的選擇器

div *{color:red;}，意指<div>下任何標籤裡的所有元素文字均為紅色。
div[class]{color:red;}，意指<div>標籤中，若有用到屬性class 者其文字為紅色。
div[class="good"]{color:red;}，意指<div>標籤中屬性 class 值等於good者，其文字為紅色。
div[class~="good"]，意指<div>標籤中屬性 class 值中有包含good 者（如class="cool good nice"），其文字為紅色。
div[class|="good"]，意指<div>標籤中屬性 class 的值中有連字號「-」，且為good開頭者（如class="good-bye"），其文字為紅色。
div[class^="good"]，意指<div>標籤中屬性 class 的值中以good開頭者（如class="goodbye"），其文字為紅色。
div[class$="good"]，意指<div>標籤中屬性 class 的值中以good結尾者（如class="very_good"），其文字為紅色。
div[class*="good"]，意指<div>標籤中屬性 class 的值中有含有good者（如class="mygoodness"），其文字為紅色。

九、 CSS幾種專屬的選擇器

連結有四種狀態：a:link（未參觀過的連結）、a:active（正要參觀過的連結）a:visited（參觀過的連結）a:hover（滑鼠正移到的連結）
表單：input:focus（正在該輸入框中）、input:lang(zh-tw)（表單中有設定語言的輸入框）、input:enabled（表單中可用的輸入框）、input:disabled（表單中不可用的輸入框）、input:checked（表單中被選取的輸入框）
其他div:target（被連結的目的地）、td:empty（空的內容時）

2-1 HTML表單（僅參考，不上）