CSS層級式樣式表(Cascading Style Sheets)
CSS 是一種樣式語言，可以重新定義HTML標籤的顯示效果。
CSS 的基本語法：
名稱 { 屬性1: 值1；屬性2: 值2;… }
上述樣式組使用「{ }」包含著設定標籤(Tags)「名稱」的樣式，大括號中可以包含許多不同的屬性。
而屬性與屬性間只要以「;」隔開，屬性的值則使用「:」緊跟在屬性後面做描述即可。
〔通用表示法〕
<html>
<head>
<title>CSS 樣式表</title>
<style type="text/css">
A {text-decoration:none}
A:hover {color:#ff0000; text-decoration:none}
</style>
</head>
<body>
網頁內容
</body>
</html>
上例是將CSS 樣式表放在網頁的Head區中，宣告本網頁中所有的<a>標籤的Link顯示屬性是"text-decoration:none"，
而<a>標籤的hover顯示屬性是"color:#ff0000; text-decoration:none"，也就是本網頁所有的超鏈結均不顯示底線，而當滑鼠指到超鏈區時，超鏈結文字的顏色顯示"ff0000"色。
•如要自訂Class樣式名稱，可以在自訂的名稱前加「.」表示：
.名稱 { 屬性1: 值1；屬性2: 值2;… }
例：
<html>
<head>
<title>CSS 樣式表</title>
<style type="text/css">
.Apple {
color: #00ff00;
background-color: black;
font-size: 16pt
}
</style>
</head>
<body>
<span class=Apple>網頁內容</span>
</body>
</html>
上例的顯示效果：
網頁內容
•如要在有使用ID的物件顯示特殊的效果，可以在該物件名稱前加「#」表示：
#名稱 { 屬性1: 值1；屬性2: 值2;… }
例：
<html>
<head>
<title>CSS 樣式表</title>
<style type="text/css">
.Apple {
color: #00ff00;
background-color: black;
font-size: 16pt
}
#money {
color: #ff0000;
background-color: gold;
font-size: 12pt
}
</style>
</head>
<body>
<span class=Apple>1.自訂Class樣式</span><br>
<span id=money>2.指定ID物件</span>
</body>
</html>
上例的顯示效果：
1.自訂Class樣式
2.指定ID物件
〔特定表示法〕
<標籤名稱 style="屬性1: 值1；屬性2: 值2;…">
例：<hr style="border:1px dashed lightskyblue">
上例設定<hr>的屬性為1px厚、淡天空藍色的虛線。
|
