CSS 的呼叫、引用、文字風格、表單風格等應用

第十三堂課： CSS 的呼叫、引用、文字風格、表單風格等應用

我們之前已經講過很多 CSS 相關的話提，只是內容大多是直接應用為主，接下來的兩節課內容會提到比較多的 CSS 連續資料，會貫穿之前我們談到的許多概念。這節課主要談到 CSS 的引用方式，還有文字特效、表單特效等等，更高階的方塊應用下節課繼續討論！

樣式表的整體宣告之設定與基礎瞭解

CSS (Cascading Style Sheet) 樣式表，可以修訂原先單純 HTML 的呆板樣式，可以加入許多較為特殊的特效！他的應用方式有：
- 可以直接修改 html 標籤的顯示風格，例如『 p { color: blue; line-height: 1.5 } 』之類的風格宣告方式。
  - 上式中，p 被稱為『選取器』
  - 括號內的 color:blue 及 line-height:1.5 被稱為『宣告』
  - 每個項目中， color 被稱為屬性 (或元素)，而 blue 就被稱為屬性值 (或元素值)
- 『選取器』除了 HTML 原有的標籤之外，還可以新建某些特定選取器名稱，主要有：
  - 使用『 .類別 {...} 』建立，再以 class="類別" 來引用；
  - 使用『 #名稱 {...} 』建立，再以 class="名稱" 來引用
- 建立一個外部引用檔，在網頁 head 當中使用如下的方式來引用：
  - <link rel="stylesheet" href="filename" >

如何定義即將使用的標籤？就利用剛剛第一點談到的 <style> 即可。這個 style 放在 <head> </head> 之間。

<style type="text/css">
	HTML標籤1 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	HTML標籤2 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	HTML標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	HTML標籤4 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	....
</style>

如果樣式的內容一樣，那麼標籤可以整合起來一起寫在同一行。如下所示：

<style type="text/css">
	HTML標籤1, 標籤2, 標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	....
</style>

多層次的標籤，例如 table -> tr -> td 是一連續的階層，此時則可以這樣設定：

<style type="text/css">
	HTML標籤1 標籤2 標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	....
</style>

除了直接某些 HTML 標籤之外，還有許多不同的方式可以選擇與設定 CSS 的樣式選取器！主要有底下這些：

選取器名稱	功能意義	範例
全域選取器	套用到 body 內的所有元素上	* {....} 重點是那個 * 號！
類型選取器	找到符合的 HTML 標籤	h1, h2, h3 {...} 會影響到文件中的 h1, h2, h3 這三個標籤
class選取器(類別)	透過 class="" 來選取宣告	.class1 {...} 會影響到後來使用 class="class1" 的項目 p.class1 {...} (1)只對 p 標籤而且 (2)該標籤使用 class="class1" 才生效
id選取器(名稱)	透過 id="" 來選取宣告	#id1 {...} 影響到使用 id="id1" 的標籤項目
子標籤選取器	找到一標籤的直系子標籤	li>a {...} 在 <li> 緊接著的 <a> 標籤才有效果！
後代選取器	找出一標籤的後代標籤即可	p a {...} 在 <p> 後面出現的 <a> 標籤就有效果！(不須緊鄰)
相連手足選取器	找出『連續』的標籤處理	h1+p {...} 與子標籤類似，但是僅有第一個 p 元素生效

如果有兩條以上的規則重複了，那麼該標籤會以哪條規則為主呢？基本上重要的依據為：
- 後來先贏：就像程式設計的變數一樣，以後面設定的會生效為主；
- 指定程度 1：例如有 p b 以及 b 的規則，那麼 p b 的規則會比較具有指定性，會生效；
- 指定程度 2：例如 p#intro 會比 p 來的有指定性，只是 p#intro 就必須在 id="intro" 內才會生效
- 設定重要性：例如 p b { color:blue !important; } 會比 p b { color: violet; } 來的重要！(而不論是否出現在前面或後面)
但，無論如何，將 CSS 與 HTML 分開放置在不同的檔案，才是比較好的作法！網頁的外觀與內容分開，可以產生一致性的網頁風格！除非你的網頁所使用到的標籤具有獨特性，與本網站的任何檔案無關，那時將 CSS 寫在同一頁即可！
請參考這個檔案的內容結構，那個『大』是要放大字體到大約 20pt 左右，小則是縮小字體到大約 10pt 左右。如何透過外部的檔案連結功能，再透過剛剛上頭講的多層次標籤的功能，在不改變該檔案的 table 內容的情況下，達到我們想要處理的目的呢？請建立檔名 class_13_1.php 檔案來完成喔！

使用多重定義的樣式表，分別透過『 #名稱 -- id 』及『 *.類別 --class 』來定義

有些宣告的內容會用在多種不同的標籤中，如果要如前面的方式來定義整體標籤，又可能導致我們不想要的畫面！畢竟標籤的內容可能會隨時變化。此時制訂一個『能夠讓不同標籤引用的相同樣式定義』就很有幫助了！

首先介紹『樣式名稱』法：使用 # 配合 id 來宣告的方式，如下所示：

<style type="text/css">
	#樣式名稱1{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	#樣式名稱2{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	....
</style>

	<標籤名稱 id=樣式名稱1>.....</標籤名稱>

將上面第 8 點的網頁進行修改，將三個『大』的字樣設定出三種不同的樣式，分別是：
- 顏色為：00ff00，字體大小為 15 點字，加底線(text-decoration:underline}
- 顏色為：ff0000，字體大小為 18 點字，不加底線
- 顏色為：0000ff，字體大小為 12 點字，加底線

再來介紹『樣式類別』法：使用 *.樣式類別，配合 class 來使用

<style type="text/css">
	*.樣式類別1{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	*.樣式類別2{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
	....
</style>

	<標籤名稱 class=樣式類別1>.....</標籤名稱>

將剛剛第 3 點的資料，再度修改為 class 的樣式類別方式來處理。
樣式表的繼承：在原本的 HTML 標籤內，只要是巢狀標籤時，那麼該 CSS 樣式就會一直繼承，除非子標籤有特別自行指定 CSS 樣式。請點選13_1_chap_13-2.txt來瞭解什麼是繼承吧！
其他樣式表的使用方式：
1. 利用 style="xx" 在標籤內，直接指定。例如：<h1 style="color:0000ff;font-size:18">之類；
2. 利用外部已經定義好的 CSS 檔案(通常檔名為 xx.css)來進行呼叫，你可以參考崑山科大的首頁查詢其原始碼，看看有沒有相關的資料？至於呼叫外部 CSS 預先定義的樣式表檔案，主要有兩種方法：
  - 使用 @import 方法
```
<style type="text/css">
	@import url("外部檔案的完整檔名");
</style>
```
  - 使用 link 的方法
```
<link type="text/css" rel="stylesheet" href="外部的 CSS 樣式表完整檔名" />
			
```
觀念：樣式表設定的結果，網頁的顯示順序：我們知道有多種樣式表了，那麼哪種樣式表的資料會先被顯示出來？基本上，順序如下所示：
1. 插入的樣式表，亦即 <標籤 style="xx"> 為最高優先
2. 接下來的 <style>, @import, <link> 這三者優先度相同，因此以最後出現的那個樣式表為主。
如果想要隨意插入任何 CSS 的樣式功能時，可以使用 <span style="xxx"> 或 <div style="xxx">。其中 span 比較傾向較小的範圍，而 div 比較傾向大範圍！我們以 span 為例來說明：
```
<span style="xx"> .......... </span>
<span id="xx">    .......... </span>
<span class="xx"> .......... </span>
```

實作題：請依照如下提示來製作本週習題：

實作題一：請使用第四週的習題，如按此連結察看。然後依據課本 13-32 與 13-34 的元素，重新改寫上述的網頁，讓該網頁以 CSS 的樣式來呈現！請取檔名為 week10-13-1.html
參考第五週的習題，如按此連結察看，並依據課本 13-39 的元素，重新改寫該網頁，讓底圖可以單一一張在網頁正中央，且底圖不會隨著捲軸而變！這是非常有用的功能喔！請取檔名為 week10-13-2.html
參考第四週的習題，如按此連結察看，然後依據課本 13-36 頁的元素，修改各個清單。若需要使用球形，可以按此下載，當然，您也可以使用自己製作的小動畫來顯示，將讓你的清單更容易使用喔。請設定檔名為 week10-13-3.html
重新修改第六週的實作題，如按此連結察看。請利用 CSS 的相關功能，讓該網頁變的更美觀。注意，使用文字排版 CSS 特效來處理，尤其是可以讓中文字對齊的話，那就更好了！注意，不要有中文全形在文章內了喔！
建立屬於你自己的 CSS 樣式表 (例如 vbird.css)，將你喜歡的、常用的樣式製作成為外部呼叫的樣式表檔案，然後，未來使用 CSS 時，請呼叫此一檔案來製作屬於您自己的網頁。請將樣式表的內容連結到你的 index.html 當中，讓老師可以按下連結連到該檔案察看內容即可。檔名自訂
修改您的 index.html ，讓本週的習題可以被瀏覽。

本章練習與習題：

將小陳老師或大陳老師的作業，一些簡易的影片檔案，轉檔為 .mp4 或音效轉檔為 .ogg 並且注意檔案容量大小後，嵌入到你的個人網站中！
將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！