匯入CSS樣式表


阿瑟 發表



不知道您在使用CSS寫網頁的時候有沒有發現更多的問題?如果您要套用一套CSS設定到每一頁網頁的話,如果你的網頁一多你要怎麼辦呢?這篇匯入樣式表可以解決您的煩惱!這樣您就不用改個板全部的頁面都要各自改版…不是累死了?

不知道您在使用CSS寫網頁的時候有沒有發現更多的問題?
如果您要套用一套CSS設定到每一頁網頁的話,如果你的網頁一多你要怎麼辦呢?
這篇匯入樣式表可以解決您的煩惱!
這樣您就不用改個板全部的頁面都要各自改版...不是累死了?



STEP1:【獨立樣式表檔案的地製作方式】
<head>
<style>
<!--
.text1{font-size:9pt; font-family:arial; text-decoration:underline; font-weight:bold; color:green}
-->
<style>
</head>
<body>
<font class="text1">
這是設定過後的文字
<font>
</body>

看到這一段了嗎?現在我們用Notepad來寫.css檔案並且儲存一個叫做「style.css」在您的檔案目錄下。附檔名別忘了打.css
style.css檔的內容如下:

.text1{font-size:9pt; font-family:arial; text-decoration:underline; font-weight:bold; color:green}

你只需要把在<style><!--與--></style>中間的設定內容複製到一個另外的檔案並且將那個檔案命名為xxx.css就可以了。

STEP2:【匯入獨立樣式表】

有兩種方法:

<head>
<style>
<!--
@import URL("style.css")
-->
<style>
</head>

或者
<head>
<LINK REL=stylesheet TYPE="text/css" HREF="style.css">
</head>
上例中的 style.css 請更換成您的獨立樣式表檔案的檔名
如果您用第一種方法:@import
的話,你的瀏覽器會自動在載入網頁的時候匯入 style.css 這個樣式表檔案。

如果您用的是第二種方法:link
你的瀏覽器會在讀取第一個用到樣式的區域的時候讀取這個樣式表檔案...
筆者建議使用第一個啦,省的麻煩。

這樣一來您就不需要每一頁都寫一大段的CSS來囉!只要每一頁加上上述兩種語法的其中一種就可以套用了!﹝如果您很神經質的話也可以兩種都寫﹞
筆者在這裡就先留給大家練習,這個章節的樣式表檔案只不過是把設定的內容帶到外面去而已!其他的東西依舊照常地寫法。如果您有很多頁要套用這個設定檔案,只要每一頁都加上連結檔案的語法就可以了,如果貴站要更改版面的話只要改那個.css檔案中的顏色,所有的網頁都會套用了新的顏色了...方便吧?有問題歡迎來信諮詢 阿得,我都會很樂意的為大家服務。

最後更新日期: 7/15/2001 1:58:09 AM