CSS語法的定義及元素樣式? ■CSS語法的定義:
CSS 的語法定義基本上如以下的形式:
<style> slector {property:value; property:value; ....} </style>
第一種 selector 方式是以指定 HTML 元素樣式的方式定義,比如 FONT、BODY、 TD...等等 第二種 selector 方式是以 CLASS 元素樣式的方式定義 第三種 selector 方式則是以 ID 樣式的方式定義 第四種 selector 方式則是以 inline 樣式的方式定義 第五種 selector 方式則是以 Contextual 樣式的方式定義
而 property 則是指要修改的性質,如 boder、font-color、font-size...等性質 value 則是給予 property 的值,如:P {color: #FF0000; } 或 P {color: red; } 通常編輯時會把所有的定義,如以下的方式全放置於在 STYLE裏面,再放到 HEAD 內:
<head> <style> <!-- #slidemenubar, #slidemenubar2{ position:absolute; left:-155px; width:160px; top:0px; border:1.5px solid green; background-color:skyblue; layer-background-color:skyblue; font:bold 12px Verdana; line-height:20px; } --> </style> </head>
或先編輯一個CSS的外在樣式檔,再於網頁中以下列方式包含入網頁中:
<head> <link rel=stylesheet type="text/css" href="樣式檔名稱.css"> </head>
■CSS語法的元素樣式:
HTML元素樣式 | 說明: | 在<style></style>中做設定,當slector為HTML元素名稱時,瀏覽器會以HTML元素本身的特性為依據,再加上此部分之HTML元素樣式設定,以增加HTML元素本有的特性,來呼喚使用。 | 設定格式: | HTML元素名稱 {property:value; property:value; ....} | 使用格式: | <HTML元素名稱></HTML元素名稱> |
CLASS元素樣式 | 說明: | 在<style></style>中做設定,針對群族做樣式處理,以達到使用同一個HTML元素名稱時,有多個不同樣式設定的選擇。 | 設定格式: | HTML元素名稱.CLASS樣式名稱 {property:value; property:value; ..} | 使用格式: | <HTML元素名稱 class="CLASS樣式名稱"></HTML元素名稱> |
ID樣式 | 說明: | 在<style></style>中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。 | 設定格式: | #ID樣式名稱 {property:value; property:value; ..} | 使用格式: | <HTML元素名稱 id=ID樣式名稱></HTML元素名稱> |
inline樣式 | 說明: | 直接在HTML元素在中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。 | 設定格式: | style=" property:value; property:value; .." | 使用格式: | <HTML元素名稱 style="property:value property:value; .."></HTML元素名稱> |
Contextual樣式 | 說明: | 在<style></style>中做設定,針對元素階層做樣式設定。 | 設定格式: | 父HTML元素名稱 子HTML元素名稱 { property:value; property:value; ..} | 使用格式: | <父HTML元素名稱><子HTML元素名稱></子HTML元素名稱></父HTML元素名稱> |
|
|