回首頁 與我們連絡 網站地圖 加入我的最愛



 



css 基礎網頁應用



進階的<LINK>樣式表檔案參照:

如果我們有很多的檔案要採用統一的設計風格,如果在每張網頁中都加入相同的樣式宣告未免太麻煩、太沒效率啦!因此,我們可以先自行建立一個樣式參照檔案,這個參照檔案只是一個純文字的檔案格式,任意一種文書編輯器就可以用來編輯參照檔案的內容!

樣式表檔案的內容並不需要加上<STYLE></STYLE>標籤,同時,更不需要加上<!-- --> 註解標籤,現在就請你開啟你慣用的文書編輯器來編輯一個樣式參照檔案,同時將檔案名稱定為 test1.css (這只是範例,參照檔案的名稱你可以自訂)並且加入以下內容:

BODY {font-size: 12pt ; font-family: 標楷體}
BODY {background: #008800 ; color: #FFFFFF}

P {color:RED}
P {font-size:14pt}

這樣的樣式內容是什麼意思呢?就是將被包括在<BODY>與<BODY>標籤之間的文字字型設定為標楷體、文字大小為12pt,網頁的背景設設定為綠色,文字外觀顏色都變成白色;包括在<P>與</P>標籤之間的文字大小為14pt、文字外觀顏色都變成紅色。

[範例樣式檔內容]

在建立好參照檔案後,接著我們就要利用LINK標籤來指定樣式表的關聯啦!現在我們就來建立一個HTML網頁檔:

<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" HREF="test.css">
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>

REL=STYLESHEET :表示我們要參照一個外部的樣式檔案
TYPE="text/css" :說明我們參照的檔案類型
HREF="test.css":指定我們要參照的樣式檔案位置及檔名

[實例展示]


進階的@import 樣式表檔案參照:

我們除了可以用LINK標籤來指定樣式表的關聯外,也可以採用@import 指定法!但是這種指定法比較麻煩一點,不但要把它加在<STYLE>與</STYLE>標籤內,同時還得加上<!-- 與 --> 註解標籤。

我們沿用上一個範例的test1.css樣式檔案來說明,現在就讓我們來建立一個以@import 指定法的HTML網頁檔:

<HTML>
<HEAD>
<TITLE>參照樣式檔案範例</TITLE>
<STYLE>
<!--
@import URL(./test.css);
-->
</STYLE>
</HEAD>
<BODY>
這是在BODY標籤內的文字
<P>
這是在P標籤內的文字
</P>
</BODY>
</html>

URL(./test.css); 指定我們要參照的樣式檔案位置及檔名
使用@import 指定法來參照外部樣式檔案;請注意:@import 敘述的最後面一定要加上一個分號!

[實例展示]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為