實例演練

編輯一個獨立的體裁定義檔，您可以單改一個檔案而使所有的 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>
<HEAD>
<LINK rel="stylesheet" href="style1.css">
</HEAD>
<BODY>
<H1>Welcome!</H1>
<H3>下面列出了我最喜歡的顏色:</H3>
<UL>
<SPAN class="red"><LI>紅色</SPAN>
<SPAN class="green"><LI>綠色</SPAN>
<SPAN class="blue"><LI>藍色</SPAN>
</UL>
當然還有其他顏色我也喜歡,不過為了翻譯本文件,也只好隨便寫幾行字了
</BODY>
</HTML>

再來把下列的程式碼貼到另一份 HTML 文件中並命名為 doc2.html:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="style1.css">
</HEAD>
<BODY>
<H2>準備感受 CSS 魅力!</H2>
<STRONG id="big">這幾個字比較大,</STRONG> 再來 <SPAN id="upper" class="blue">藍色的上標字!</SPAN>
<P>
I like documents to be double-spaced. It covers more space, which makes people think I've written a whole lot more.
</P>
</BODY>
</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中圖層的定義

同意轉載，不過麻煩看一下轉載需知

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本頁本文內容

實例演練

以下為文章回應區