編輯一個獨立的體裁定義檔,您可以單改一個檔案而使所有的 HTML 文件外觀改變。 想了解這樣的變化,複製下列程式碼到一個文字檔中,並且存檔,檔名為style1.css:
h1, h2, h3, h4, h5 { color: red
} body { background-color: #cccccc; font-family: Arial, Helvetica, sans-serif } p { line-height: 200% } ul li { font-size: 70% } .red { color: red } .green { color: green } .blue { color: blue } #big { font-size: 120% } #upper { text-transform: uppercase } |
第一行會使 <H1> 到 <H5> 標題文字是紅色的。 第二行指定文件背景色是灰色而且使用 Arial 為內定字體‧再來改變標籤 <P> 使其有兩倍的行距 (200% line-height). 第四行使 <LI> 文字在 <UL> 標籤下時級數只剩 70% 按下來的三行則是自行定義了三種不同的體裁元件: red 體裁元件使文字以紅色顯示,以此類推。 最後兩行則是建立兩個體裁標籤 big 體裁標籤使文字級數放大至 120% upper 體裁標籤使文字變為上標字。
完整的屬性及其內含值請參閱CSS 屬性一覽表.
把下列程式碼貼到一份 HTML 文件中,並命名為 doc1.html:
<HTML> |
再來把下列的程式碼貼到另一份 HTML 文件中並命名為 doc2.html:
<HTML> |
現在只要您修改 style1.css 的內容, doc1.html 及 doc2.html 就會有明顯的改變,而您甚至連 這兩個檔案都沒有開啟過。 例如:修改 style1.css 中 body 這行成為:
body { background-color: #000000; font-family: Courier, monospace; color: #eeeeee } |
看看結果會變成:
doc1.html ![]() |
doc2.html ![]() |
上一頁:特殊的定義方式 | 下一頁:CSS中圖層的定義 |
同意轉載,不過麻煩看一下轉載需知