Tad 教材網 - 線上書籍

:::

\[1001\]XOOPS網站門面專業設計
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/tad.zip) [![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/06.pdf)

### 一、CSS樣式設定的基本結構

1. 基本概念：挑出網頁中的元素，套上指定樣式。
2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，若有多個，請用「;」隔開。
3. CSS樣式屬性以及可用的值可從這裡查詢：
 
- (1) 英文版：[http://www.w3schools.com/css/css\_reference.asp](http://www.w3schools.com/css/css_reference.asp)
- (2) 中文版：[http://www.w3school.com.cn/css/css\_reference.asp](http://www.w3school.com.cn/css/css_reference.asp)
- [下載topStype](http://www.tad0616.net/uploads/tad_book3/file/1001/Downloads.rar)
 
### 二、在HTML標籤中套用CSS

1. 在HTML標籤中套用CSS得靠style屬性，如：<p style="color:red;"></p>
2. 這叫「行內樣式」，優先權最高，影響範圍最小（只限標籤內）。
3. 其挑選器為該標籤。
4. 適合用在單一樣式上。
 
### 三、在單一網頁中套用相同CSS樣式

1. 在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤，盡可能放在<head></head>裡面，例如：  
   <span style="color: rgb(0, 0, 255);"><head>  
   <style type="text/css">  
   p {color:red;}  
   #line {color: sienna;margin:20px auto;}  
   .bg {background-image: url("images/back40.gif");}  
   </style>  
   </head></span>
2. 這叫「內嵌樣式」或「內部樣式」，優先權中等，影響範圍為一整頁內。
3. 上述的p、#line、.bg都是挑選器
4. 若一篇網頁中，有多個地方要套用相同樣式，可用頁內樣式。
 
### 四、許多頁面套用相同CSS樣式

1. 要讓多個頁面套用相同樣式，就必須把樣式表獨立出來，做成一個CSS檔，如：style.css，其內容如下：  
   <span style="color: rgb(0, 0, 255);">p {color:red;}  
   #line {color: sienna;margin:20px auto;}  
   .bg {background-image: url("images/back40.gif");}</span>
2. 要套用該樣式表的網頁需利用<link>標籤來呼叫引用。  
   <span style="color: rgb(0, 0, 255);"><link rel="stylesheet" type="text/css" href="style .css" /></span>
3. 這叫「連結樣式」或「外部樣式」，優先權最低，影響範圍最大。
4. 適合用在多頁用共用同一樣式。
 
### 五、三種挑選器

1. 標籤挑選器：即一般網頁標籤。如：p、img、table...等，只要是該標籤都會受影響。 
  - (1) 樣式表：p {color:red;}
  - (2) 網頁：<p></p>
2. ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如： 
  - (1) 樣式表：#line {color: sienna;margin:20px auto;}
  - (2) 網頁：<hr id="line">
3. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如： 
  - (1) 樣式表：.bg {background-image: url("images/back40.gif");}
  - (2) 網頁：<div class="bg">

:::