HTML與XHTML權威指南之八：級聯樣式表
樣式是一個規則，告訴瀏覽器如何表現特定的HTML標簽中的內容。樣式與標簽結合的方式有三種：內聯樣式表，文檔級樣式表，外部樣式表。
內聯樣式表：最簡單的方式，只需在標簽中包含一個style屬性。如，<h2 style="color:blue;font-style:italic">Look!</h2>
文檔級樣式表:將樣式表放在<head>內的<style>標簽和</style>結束標簽之間，就會影響文檔中所有相同標簽的內容；但含有內聯style屬性的標簽除外。
如，
<head>
<style type="text/css">
h1(color:blue;font-style:italic)
</style>
</head>
<body>
<h1>this is a example.</h1>
<h1>this is another example.</h1>
</body>
type屬性：級聯樣式表的類型為text/css；JavaScript樣式表為text/javascript。
media屬性：讓瀏覽器了解表現文檔的最佳方式。默認值為screen(計算機顯示器),還有tv(電視),handheld(PDA)等。如，<style type="text/css" media="screen,handheld">，表示在計算機顯示屏和PDA設備上都要使用CSS顯示文檔。
外部樣式表：分離樣式表和文檔的內容。這樣同一個樣式表就可以應用于多個文檔中。有兩種方法引入外部樣式表：鏈接和引入。
鏈接方式：在<head>標簽中使用<link>標簽。如，
<head>
<link rel=stylesheet type="text/css" >
</head>
引入方式：在<style>標簽中使用一個特殊命令at。如，
<head>
<style type="text/css">
<!--
@import url(http://www.kunming.com/styles/gen.css);
@import "http://www.kunming.com/styles/gen.css";
body {background:url(backgrounds/marble.gif)}
-->
</style>
</head>
樣式類
1 常規類：定義段落樣式。如，
<style type="text/css">
<!--
p.abstract{font-style:italic;margin-left:0.5cm;margin-right:0.5cm}
p.equation{font-family:Symbol;text-align:center}
h1,p.centered{text-align:center;margin-left:0.5cm;margin-right:0.5cm}
-->
</style>
以上定義了三種段落樣式，然后在應用時：
<p class=abstract>first style.</p>
<p class=equation>a-b+1</p>
<p class=centered>another style</p>
一般類：定義類時，不與某個特殊標簽關聯起來，而有選擇的把該類應用到整個文檔的多個標簽中。
如，.italic {font-style:italic}。 創建了一個italic的類，應用時只要把名稱包括在class屬性里面就可以。如，<p class-italic>或<h3 class=italic>。
ID類：幾乎所有html標簽都支持id屬性。創建類時，需要在類名前使用"#"而不是"."。如，
<style>
<!--
#yellow {color:yellow}
h2#blue {color:blue}
-->
</style>
在文檔中，使用同樣的id屬性來應用樣式。如，<h1 id=blue>。由于HTML標準規定，每一個標簽的id屬性值必須是唯一的。所以創建帶有id屬性的樣式表的方法不推薦使用。
偽類：為特定的標簽狀態定義顯示樣式。方法與常規類相似，但區別有：1 連接到標簽名時使用的是冒號而不是句號。2 有預先定義好的名稱，不能隨便給其取名。
超鏈接偽類：:link(未訪問),active(正被訪問),a:visited(訪問過的)。如，
a.link(color:blue)
a.active(color:red; font-weight:bold)
a.visited(color:green)
交互左右偽類：與用戶動作有關。如，a:hover{color:yellow}表示當鼠標指向它時會邊成黃色。a:focus允許在元素變成專注對象時改變其樣式。
混合類：把偽類名追加到選擇符的類名后，就可以混合使用偽類和常規類。
樣式屬性
屬性值：關鍵字，長度值，百分比值，url，顏色，角度，時間和頻度。
屬性繼承：標簽中的屬性及其值都是從父標簽那里繼承而來。如<body>標簽設置了屬性后，實際會把該屬性應用到文檔主體部分的所有標簽上。
posted on 2007-12-18 20:34
matthew 閱讀(271)
評論(0) 編輯 收藏 所屬分類:
腳本語言及頁面設計