|
|
CSS教學
CASCADING
STYLE SHEET
|
|
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元素名稱> |
|
|
|
本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝！
Power by 9 Walker Studio
|
|
