:::
5-1 上課範例
6. 套用CSS
一、CSS樣式設定的基本結構
- 基本概念：挑出網頁中的元素，套上指定樣式。
- 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，若有多個，請用「;」隔開。
- CSS樣式屬性以及可用的值可從這裡查詢：
- (1) 英文版：http://www.w3schools.com/css/css_reference.asp
- (2) 中文版：http://www.w3school.com.cn/css/css_reference.asp
- 下載topStype
二、在HTML標籤中套用CSS
- 在HTML標籤中套用CSS得靠style屬性，如：<p style="color:red;"></p>
- 這叫「行內樣式」，優先權最高，影響範圍最小（只限標籤內）。
- 其挑選器為該標籤。
- 適合用在單一樣式上。
三、在單一網頁中套用相同CSS樣式
- 在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤，盡可能放在<head></head>裡面，例如：
<head>
<style type="text/css">
p {color:red;}
#line {color: sienna;margin:20px auto;}
.bg {background-image: url("images/back40.gif");}
</style>
</head> - 這叫「內嵌樣式」或「內部樣式」，優先權中等，影響範圍為一整頁內。
- 上述的p、#line、.bg都是挑選器
- 若一篇網頁中，有多個地方要套用相同樣式，可用頁內樣式。
四、許多頁面套用相同CSS樣式
- 要讓多個頁面套用相同樣式，就必須把樣式表獨立出來，做成一個CSS檔，如：style.css，其內容如下：
p {color:red;}
#line {color: sienna;margin:20px auto;}
.bg {background-image: url("images/back40.gif");} - 要套用該樣式表的網頁需利用<link>標籤來呼叫引用。
<link rel="stylesheet" type="text/css" href="style .css" /> - 這叫「連結樣式」或「外部樣式」，優先權最低，影響範圍最大。
- 適合用在多頁用共用同一樣式。
五、三種挑選器
- 標籤挑選器：即一般網頁標籤。如：p、img、table...等，只要是該標籤都會受影響。
- (1) 樣式表：p {color:red;}
- (2) 網頁：<p></p>
- ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如：
- (1) 樣式表：#line {color: sienna;margin:20px auto;}
- (2) 網頁：<hr id="line">
- 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如：
- (1) 樣式表：.bg {background-image: url("images/back40.gif");}
- (2) 網頁：<div class="bg">
