CSS樣式表的使用-如何引用

第十七章、CSS樣式表的引用與基本語法

CSS 樣式表的引用

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

CSS (Cascading Style Sheet) 樣式表的功能在於將一些常用的重複設定預先定義好，再透過 HTML 的 <style> 標籤來引用，就能夠處理預先定義的標籤囉。可以簡化非常多的重複工作。
XHTML(本課程前面所講的HTML進階版本)建議使用動態 HTML (DHTML) 配合 CSS 與 <div> 處理 Java/VB scripts 來美化網頁！所以，本週起將介紹 CSS 這個好用的樣式功能表。

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

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

請參考課本 16-13 建立多個 h1~h3 標籤，其中顏色的樣式元素為 color，字體大小為 font-size 。網頁內容如下：

C語言初學者指引 <== 使用 h1 標籤，顏色(color:) 00ff00，字體大小(font-size:) 18 點字；
VB6初學者指引   <== 使用 h2 標籤，顏色(color:) ff0000，字體大小(font-size:) 18 點字；
ASP初學者指引   <== 使用 h3 標籤，顏色(color:) 0000ff，字體大小(font-size:) 18 點字；

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

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

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

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

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

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

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

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

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

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

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

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

其他樣式表的使用方式：
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>
```

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

實作題一：請使用按此連結察看。然後依據課本 17-2, 17-5, 17-9 的元素，重新改寫上述的網頁，讓該網頁以 CSS 的樣式來呈現！請取檔名為 chap_17_1.html
參考如按此連結察看，並依據課本 17-14 的元素，重新改寫該網頁，讓底圖可以單一一張在網頁正中央，且底圖不會隨著捲軸而變！這是非常有用的功能喔！(底圖請自行制訂)請取檔名為 chap_17_2.html
重新修改如按此連結察看。請利用 CSS 的相關功能，讓該網頁變的更美觀。注意，使用文字排版 CSS 特效來處理，尤其是可以讓中文字對齊的話，那就更好了！注意，不要有中文全形在文章內了喔！
修改您的 index.html ，讓本週的習題可以被瀏覽。

回到最上方 (top)