方法A:<style>標籤
在HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。
定義方式請參閱樣式表語法。示例如下:
<html> |
是允許不支持這類型的瀏覽器忽略樣式表單。
有些低版本的瀏覽器不能識別style標記,這意味著低版本的瀏覽器會忽略style標記里的內容,
並把style標記里的內容以文本直接顯示到頁面上。
為了避免這樣的情況發生,我們用加HTML註釋的方式(<!-- 註釋 -->)隱藏內容而不讓它顯示。
→在commerce作的網頁是用這個方法。
方法B:外部樣式表
你可以先建立外部樣式表文件(.css),然後使用HTML的link對象。示例如下:
<head> |
而在XML中,你應該如下例所示在聲明區中加入:
<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/rainer.css" ?>> |
當你改變這個樣式表文件時,所有頁面的樣式都隨之而改變。
在製作大量相同樣式頁面的網站時,非常有用,不僅減少了重覆的工作量,
而且有利於以後的修改、編輯,瀏覽時也減少了重覆下載代碼。
→所以幾乎所有網頁設計都是使用外部樣式表啦!而我是到現在的公司才開始使用這個方法,
真的比較方便修改,不過樣式表一大串,看了眼很花…@@
方法C:@import
導入外部樣式表是指在內部樣式表的<style>裡導入一個外部樣式表,
導入時用@import,看下面這個實例:
<head> |
例中@import “mystyle.css”表示導入mystyle.css樣式表,註意使用時外部樣式表的路徑。
方法和鏈入樣式表的方法很相似,但導入外部樣式表輸入方式更有優勢。
實質上它相當於存在內部樣式表中的。
注意:導入外部樣式表必須在樣式表的開始部分,在其他內部樣式表上面。
→這個方法我就沒用過了,但有在無名的樣式分享看到有人這樣用。
( 請參見樣式設計達人"魚與貓的呢儂軟語"的此篇網誌 )
--------------------------------------------------------------------------
/*album_notebook*/
@import url(http://fish7515.googlepages.com/notebook_album.css);
--------------------------------------------------------------------------
把以上兩行貼在樣式表裡就可以使用此樣式了。
方法D:行內樣式
行內樣式是混合在HTML標記裡使用的,用這種方法,可以很簡單的對某個元素單獨定義樣式。
行內樣式的使用是直接將在HTML標記裡加入style參數,而style參數的內容就是CSS的屬性和值,
如下例:
<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補丁</p> |
由於行內樣式是串聯的最底層,因此它們會覆蓋所有外部樣式表的宣告、
以及宣告在頁面<head>內、<style>標籤裡面的規則。這是個在頁面各處加上樣式設定的簡單做法,
但是使用它必須付出代價,因為樣式會綁死在標籤上。
→ 這方法適合初學者的使用,像我會先在行內寫好樣式,確定要用後再轉成外部樣式。
§ 重點歸納:
方法A:
1.需要把樣式放在每個頁面的<head>區段內。
無法讓許多頁面共享同一份樣式,而且必須在每次讀取頁面時除新下載。
2.放在<style>之內的樣式無法完全對古老的瀏覽器隱藏起來。
3.適合在測試、開發階段使用。標記內容與樣式能放在相同檔案裡一起修改。
方法B:
1.讓一組樣式能在許多份頁面之間、甚至整個網站之內共用。
2.外部樣式表只會下載一次,瀏覽器經常會做快取,節省重複造訪的下載時間。
3.把共享的樣式放在一個檔案內,代表設計變動易於維護。
4.以<link>標籤參照的樣式表無法對古老的瀏覽器隱藏起來。
方法C:
1.讓一組樣式能在許多份頁面之間、甚至整個網站之內共用。
2.外部樣式表只會下載一次,瀏覽器經常會做快取,節省重複造訪的下載時間。
3.把共享的樣式放在一個檔案內,代表設計變動易於維護。
4.@import能對Netscape 4.x瀏覽器隱藏樣式內容。
方法D:
1.樣式定義在行內,讓顯示效果與標記內容靠得太近。
2.無法與其他標籤、整份文件甚至是全站共用樣式定義。
3.維護十分麻煩、缺乏效率。
4.適於暫時性的問題,或是無法存取外部檔案、修改頁面<head>的時候用。
資料來源:
http://www.allwiki.com/wiki/%E5%9C%A8%E7%BD%91%E9%A1%B5%E4%B8%AD%E6%8F%92%E5%85%A5CSS (天下維客)
http://crow.myweb.hinet.net/css/ (css2.0中文手冊)
Web Standards Solutions網頁設計標準規格 (書籍)
留言列表