第3講 CSS
- 何為CSS
- CSS的幾種設定方式
- 樣式規則選取器
- 樣式規則的注釋與有效範圍
- 樣式屬性詳解
什麼是CSS和CSS的設定方式
作者:Loncer 更多學習資源盡在:wwww.loncer.cn
什麼是CSS
CSS即:Cascading Style Sheets這幾個英文單詞的縮寫,中文為:層疊樣式表.它除了可以輕鬆設定網頁元素的顯示位置和格式外,還能產生濾鏡,映像淡化,網頁淡入淡出的漸層效果.簡而言之.CSS就是要對網頁的顯示效果實現與Word一樣的排版控制.
例如下的代碼:
即設定了一個CSS樣式.
由上可知:一個HTML元素的style屬性可以指定多種樣式風格,每種樣式 風格的名稱和它的設定值之間用冒號來分開,每種樣式風格之間用分號來分開.各種"樣式風格名稱"被稱之為"CSS屬性",樣式風格的"設定值"被稱為"CSS屬性值".這種設定網頁元素的顯示效果的方式就是CSS.
CSS的設定方式
- 內聯樣式表(inline style sheets)
直接設定HTML正方標籤的style屬性的方法稱為內聯樣式表。
例如：
在使用內聯樣式表時HTML4.01標準建議使用者在網頁的標籤之間增加一個標籤,
如下:
使用這種方法有兩點不足:
1、如果要將同樣的樣式風格設定到所有的段落上，則要對每一個
標籤進行重複的設定。
2、一個網頁可以在多種介質或媒體上輸出，使用內聯樣式表設定的樣式會在所有的媒體上輸出時都會起作用，而沒法為不同的媒體指定不同的樣式表。
- 內建樣式表(Embedded style sheets)
media說明這個樣式在什麼介質上顯示
是為了那些不支援CSS的瀏覽器而寫的 在之間的樣式規則定義語句放在一個單獨的外部檔案中，這個外部檔案就是外部樣式表檔案，其副檔名這.css。一個外部樣式表檔案可以通過HTTP的標籤串連到HTML文檔中。
例：
先建一個test.css檔案，代碼如下：
P{
"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"
}
|
再寫一個要使用該樣式表的檔案，設他倆在同一檔案夾下：
type和media是可選的,rel和href是必須的 |
使用外部樣式表，網頁製作者可以通過改變一個檔案就可以改變整個網路的外觀。大多數瀏覽器會將外部樣式表檔案儲存在緩衝區中，從而加快了網站的瀏覽速度。
- 輸入樣式表(imported sytle sheets)
可以使用CSS的@import將一個CSS檔案輸入到另外一個CSS檔案中,被輸入的CSS樣式規則定義語句就成了輸入的CSS樣式規則定義語句的一部分。也可以用@inport將一個CSS檔案輸入到標籤對中。被輸入的CSS樣式規則定義語句就成了標籤對中的定義語句。
例：
| <style type="text/css" media="screen"><br> <!--<br> @import url(http://………………);<br> @import url(/XXXX……………);<br> p{background:yellow;color:black}<br> --><br> </style><br> 註：所有的@import部分要放在前面 |
