風格表有三種取用法:
- 使用外部風格表檔案:可將主要的,泛用的風格表定義存在檔案中。如此可以讓多個類似的網頁文件,讀取同一個風格表檔案。讀取外部風格表檔案要用 LINK 元件或 @import 。風格表檔案中不必加上 <style type='text/css'> 及 </style>。
- 使用 LINK 元件:
<LINK href="beautiful.css" rel="stylesheet" type="text/css" />
- 使用 @import:
<style type='text/css'> @import "beautiful.css"; </style>
- 使用 LINK 元件:
- 在網頁文件中植入 STYLE 區塊風格表:
- 風格用法:
<style type='text/css'>
.tbl TD { border:solid 1px blue; color:red}
</style>
<table class='tbl'>
<tr><td>土豆網 <td>蘋果日報 <td>統一發票
</table> - 執行結果:
土豆網 蘋果日報 統一發票
- 風格用法:
- 在個別元件上用 STYLE 屬性,定義風格表:
- 風格用法:
<table class='tbl'>
<tr><td>土豆網 <td>蘋果日報 <td style='color:green'>統一發票
</table> - 執行結果:
土豆網 蘋果日報 統一發票
- 上例中,第三個 TD 元件設定了 color:green,這會取代前面植入區塊風格表的定義。
- 風格用法: