[1001]XOOPS網站門面專業設計
一、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得靠style屬性,如:<p style="color:red;"></p>
- 這叫「行內樣式」,優先權最高,影響範圍最小(只限標籤內)。
- 其挑選器為該標籤。
- 適合用在單一樣式上。
- 在單一網頁中套用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檔,如: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">