首頁
文章清單
RSS 
|
在一份 HTML 文件中定義體裁對修改該份文件而言是非常方便的， 但如果您想同時修改數份文件時，甚至整個網站的所有文件呢? 所以用連結外部體裁定 義檔的方式就顯的重要而且必要了。
首先，建立一個含有下列內容的檔案，並存檔命名為 basic.css
| h3 { font-family: 標楷體; font-style: italic; color:green } |
接下來，開啟一份 HTML 文件 (命名為 basic.html)，加入名為 <LINK> 標籤呼叫外部體裁定義檔在 head 標籤中:
| <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="basic.css" title="style1"> </HEAD> |
<LINK> 標籤的屬性告訴流覽器去連尋找 外部的體裁定義檔，也就是 CSS 檔。現在檔案名稱是 basic.css ( 假設您的體裁定義檔 和 HTML 文件是在同一個資料夾之下，如果不在同一資料夾下，則要以 href 屬性來指定路徑 ) title 屬性只是單純的指定一個名稱使得容 易辨識。basic.css 這個體裁定義檔定義了 basic.html 文件中使用的體裁， 所以每個您在 HTML 文件中使用到的 <H3> 標題文字都會變成綠色、斜體的標楷體。定義如下；
<BODY>
|
您也可以結合另一份外部體裁定義檔在 HTML 文件中，使用 CSS @import 指令:
| <HEAD> <STYLE type="text/css"> <!-- @import url( "basic.css") -- > </STYLE> </HEAD> |
輸入指令: @import 像極了 <LINK>標籤，雖然語法有點不同 (參閱 CSS 規格 詳列有關 @import 的討論) 在本例中， 使用url ("basic.css") 來呼叫名為 basic.css 的外部體裁定義檔
注意: @import 指令在 通訊家族及 IE 4.0. 中仍存在許多錯誤。在這些錯誤修正之前， 仍建議您使用<LINK> 標籤
經常，用結合的方式是應用體裁的好辦法。舉例說，您可以利用控制體裁定義的 方式來使整個網頁看起來有一致性。但是如果您想要使某一個特定的頁面有一些其他附加 的體裁，您同樣可以另行加在 HTML 文件的檔頭。或是您只是要使頁面中的某一段看起來 不一樣，那麼在使用時直接定義也行 ( in-line style )即使用 <DIV> 或 <SPAN> 標籤。
您也可以使用 @import 標籤來同時叫用多個不同的體裁定義檔來用，但是 <LINK>標籤則是只能叫用一個外部的體裁 定義檔。當您輸入多個體裁定義檔時，則必需要是 <STYLE> 標籤中的第一行。換句話說， 如果您同時在 HTML 文件中定義體裁而且又另外輸入體定義檔時，一定要先執行輸入的動作 ，再定義新的體裁。 這就是 這就是所謂的多層規則 ( cascading rules )： 兩個體裁同時存在而且有衝突時，以文件內部的體裁為準。
| 上一頁:應用在文件中 | 下一頁: 定義的語法 |
同意轉載，不過麻煩看一下轉載需知
卜維丰 2008/7/15 下午 05:08:00
朵拉拉, 先作個測試頁, 把文件模式改成 xHTML 情況可能會改善很多
但一些 javascript 也可能相對應要改
朵拉拉 2008/7/15 下午 03:33:00
卜老師您好~
目前正在規劃一個大型網站
由於是利用firefox來測試的
當我網站完成的差不多的時候
用IE6.0跑了一次卻走了樣... >_<
例如我使用了兩個外部CSS檔案
((一個是架構))
用來分隔所有區塊大小置左置右的.css檔案
((一個是顏色背景定義檔))
用來區分同樣的架構但是有不同的背景顏色產品等等的~
所以同樣的DVI或者是CLASS命名都有可能同時出現在架構跟內容的兩個CSS裡面...這樣會導致IE6無法完整呈現出來嗎!? 但是firefox卻是可以的...
