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)樣式表的類(lèi)型為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>
樣式類(lèi)
1 常規(guī)類(lèi)：定義段落樣式。如，
<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>
一般類(lèi)：定義類(lèi)時(shí)，不與某個(gè)特殊標(biāo)簽關(guān)聯(lián)起來(lái)，而有選擇的把該類(lèi)應(yīng)用到整個(gè)文檔的多個(gè)標(biāo)簽中。
如，.italic {font-style:italic}。 創(chuàng)建了一個(gè)italic的類(lèi)，應(yīng)用時(shí)只要把名稱(chēng)包括在class屬性里面就可以。如，<p class-italic>或<h3 class=italic>。
ID類(lèi)：幾乎所有html標(biāo)簽都支持id屬性。創(chuàng)建類(lèi)時(shí)，需要在類(lèi)名前使用"#"而不是"."。如，
<style>
<!--
#yellow {color:yellow}
h2#blue {color:blue}
-->
</style>
在文檔中，使用同樣的id屬性來(lái)應(yīng)用樣式。如，<h1 id=blue>。由于HTML標(biāo)準(zhǔn)規(guī)定，每一個(gè)標(biāo)簽的id屬性值必須是唯一的。所以創(chuàng)建帶有id屬性的樣式表的方法不推薦使用。
偽類(lèi)：為特定的標(biāo)簽狀態(tài)定義顯示樣式。方法與常規(guī)類(lèi)相似，但區(qū)別有：1 連接到標(biāo)簽名時(shí)使用的是冒號(hào)而不是句號(hào)。2 有預(yù)先定義好的名稱(chēng)，不能隨便給其取名。
超鏈接偽類(lèi)：:link(未訪問(wèn)),active(正被訪問(wèn)),a:visited(訪問(wèn)過(guò)的)。如，
a.link(color:blue)
a.active(color:red; font-weight:bold)
a.visited(color:green)
交互左右偽類(lèi)：與用戶(hù)動(dòng)作有關(guān)。如，a:hover{color:yellow}表示當(dāng)鼠標(biāo)指向它時(shí)會(huì)邊成黃色。a:focus允許在元素變成專(zhuān)注對(duì)象時(shí)改變其樣式。
混合類(lèi)：把偽類(lèi)名追加到選擇符的類(lèi)名后，就可以混合使用偽類(lèi)和常規(guī)類(lèi)。
樣式屬性
屬性值：關(guān)鍵字，長(zhǎng)度值，百分比值，url，顏色，角度，時(shí)間和頻度。
屬性繼承：標(biāo)簽中的屬性及其值都是從父標(biāo)簽?zāi)抢锢^承而來(lái)。如<body>標(biāo)簽設(shè)置了屬性后，實(shí)際會(huì)把該屬性應(yīng)用到文檔主體部分的所有標(biāo)簽上。
posted on 2007-12-18 20:34
matthew 閱讀(271)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
腳本語(yǔ)言及頁(yè)面設(shè)計(jì)