(一)CSS 基本套用樣式
1. 行內套用 (Inline Style Sheets)
<h2 style=color:blue;font-family:"標楷體">......</h2>
2. 整頁套用 (Embedding Style Sheets)
在<head></head>之間宣告與套用
<style type="text/css">
h2 {
color:blue
}
</style>
3. 外部套用(External Style Sheets)
外部套用的宣告也是在head區段中, 有下列二種方法
(A) 連結(Linking Style Sheets)
<link rel=stylesheet type="text/css" href="../main.css">
(B) 外部匯入(Import Style Sheets)
<style>
@import url("../main.css");
</style>
(二)CSS 規則
樣式規則(rule) = 選擇子 {宣告} = Selector(選取器,html標籤) { property(屬性) : value(設定值) }
1.選擇子(Selector)：通常為文件中的元素(element)，如html中的body, p, strong等標籤 ，多個選擇子可以逗號隔開。
2.屬性(property)：CSS1 / CSS2 / CSS3 規定了許多的屬性，目的在控制選擇子的樣式。
3.值(value)：指屬性接受的設定值，可由各種關鍵字(keyword)組成，多個關鍵字時大都以空格隔開。
4.要針對沒有標籤定義範圍進行樣式設定時，可利用 <div> 與 <span> 標籤
5.選擇子的種類
(A) 類別選擇子(class selector)：可多次套用
(B) 識別選擇子(ID selector)：每一個網頁只能有一個唯一的ID可以套用樣式, 多用於版面配置或搭配程式
(C) 脈絡選擇子(contextual selector) ：依指定的樹狀架構套用樣式
(D) 利用CSS的position進行元素位置的定位，可將文書架構與編排配置定義分離(W3C強烈建議)
6.CSS的顏色
(A) 可用的顏色名稱(color-name)：aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, yellow
(B) 顏色值的設定(color-value)：紅綠藍( rgb)的16進位表示法： #336699, #369, rgb(51,102,153), rgb(30%,60%,100%)
7.CSS設定值的度量單位
| CSS單位 | 代表英文 | 說明 |
|---|---|---|
| px | pixel | 像素 (相對) |
| pt | point | dpi,像素,1/72英吋 (相對於螢幕解析度) |
| pc | pica | 點 (絕對) |
| em | em | 字型的主體大小 (相對) |
| ex | x-height | 小寫"x"字母的高度 (相對) |
| in | inch | 英吋 (絕對) |
| cm | centimeter | 公分 (絕對) |
| mm | millimeter | 公厘 (絕對) |
其它文章
留言列表
ZK (1)
