HTML與XHTML權(quán)威指南之八:級(jí)聯(lián)樣式表
樣式是一個(gè)規(guī)則,告訴瀏覽器如何表現(xiàn)特定的HTML標(biāo)簽中的內(nèi)容。樣式與標(biāo)簽結(jié)合的方式有三種:內(nèi)聯(lián)樣式表,文檔級(jí)樣式表,外部樣式表。
內(nèi)聯(lián)樣式表:最簡(jiǎn)單的方式,只需在標(biāo)簽中包含一個(gè)style屬性。如,<h2 style="color:blue;font-style:italic">Look!</h2>
文檔級(jí)樣式表:將樣式表放在<head>內(nèi)的<style>標(biāo)簽和</style>結(jié)束標(biāo)簽之間,就會(huì)影響文檔中所有相同標(biāo)簽的內(nèi)容;但含有內(nèi)聯(lián)style屬性的標(biāo)簽除外。
如,
<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屬性:級(jí)聯(lián)樣式表的類型為text/css;JavaScript樣式表為text/javascript。
media屬性:讓瀏覽器了解表現(xiàn)文檔的最佳方式。默認(rèn)值為screen(計(jì)算機(jī)顯示器),還有tv(電視),handheld(PDA)等。如,<style type="text/css" media="screen,handheld">,表示在計(jì)算機(jī)顯示屏和PDA設(shè)備上都要使用CSS顯示文檔。
外部樣式表:分離樣式表和文檔的內(nèi)容。這樣同一個(gè)樣式表就可以應(yīng)用于多個(gè)文檔中。有兩種方法引入外部樣式表:鏈接和引入。
鏈接方式:在<head>標(biāo)簽中使用<link>標(biāo)簽。如,
<head>
<link rel=stylesheet type="text/css" >
</head>
引入方式:在<style>標(biāo)簽中使用一個(gè)特殊命令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 常規(guī)類:定義段落樣式。如,
<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>
以上定義了三種段落樣式,然后在應(yīng)用時(shí):
<p class=abstract>first style.</p>
<p class=equation>a-b+1</p>
<p class=centered>another style</p>
一般類:定義類時(shí),不與某個(gè)特殊標(biāo)簽關(guān)聯(lián)起來,而有選擇的把該類應(yīng)用到整個(gè)文檔的多個(gè)標(biāo)簽中。
如,.italic {font-style:italic}。 創(chuàng)建了一個(gè)italic的類,應(yīng)用時(shí)只要把名稱包括在class屬性里面就可以。如,<p class-italic>或<h3 class=italic>。
ID類:幾乎所有html標(biāo)簽都支持id屬性。創(chuàng)建類時(shí),需要在類名前使用"#"而不是"."。如,
<style>
<!--
#yellow {color:yellow}
h2#blue {color:blue}
-->
</style>
在文檔中,使用同樣的id屬性來應(yīng)用樣式。如,<h1 id=blue>。由于HTML標(biāo)準(zhǔn)規(guī)定,每一個(gè)標(biāo)簽的id屬性值必須是唯一的。所以創(chuàng)建帶有id屬性的樣式表的方法不推薦使用。
偽類:為特定的標(biāo)簽狀態(tài)定義顯示樣式。方法與常規(guī)類相似,但區(qū)別有:1 連接到標(biāo)簽名時(shí)使用的是冒號(hào)而不是句號(hào)。2 有預(yù)先定義好的名稱,不能隨便給其取名。
超鏈接偽類::link(未訪問),active(正被訪問),a:visited(訪問過的)。如,
a.link(color:blue)
a.active(color:red; font-weight:bold)
a.visited(color:green)
交互左右偽類:與用戶動(dòng)作有關(guān)。如,a:hover{color:yellow}表示當(dāng)鼠標(biāo)指向它時(shí)會(huì)邊成黃色。a:focus允許在元素變成專注對(duì)象時(shí)改變其樣式。
混合類:把偽類名追加到選擇符的類名后,就可以混合使用偽類和常規(guī)類。
樣式屬性
屬性值:關(guān)鍵字,長(zhǎng)度值,百分比值,url,顏色,角度,時(shí)間和頻度。
屬性繼承:標(biāo)簽中的屬性及其值都是從父標(biāo)簽?zāi)抢锢^承而來。如<body>標(biāo)簽設(shè)置了屬性后,實(shí)際會(huì)把該屬性應(yīng)用到文檔主體部分的所有標(biāo)簽上。