→常用的CSS樣式屬性
  ←上一頁
  →回CSS選單
  →回首頁

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厚、淡天空藍色的虛線。