新聞資訊

在頁面中插入CSS樣式表的(de)方法

要(yào)想在浏覽器(qì)中顯示出預↕♣→期的(de)CSS樣式表效果,就(jiù)要(yào)讓浏覽器(q®¥↔ì)識别并正确調用(yòng)CSS。當浏覽器(qì)讀(dú)取樣式表時(s'​↓&hí),要(yào)依照(zhào)文(wé§↓₽n)本格式來(lái)讀(dú),這(zhè)裡(lǐ★> )介紹四種在頁面中插入CSS樣式表的(de)方法:鏈入外(wàiφ♠→₹)部樣式表、內(nèi)部樣式表、導入外(wài)表樣式表和(hé)內 •(nèi)嵌樣式。并特别講解多(duō)重樣式表的(de  )疊加的(de)運用(yòng)以及如(r♥≥ú)何在xml中插入CSS。


1. 鏈入外(wài)部樣式表

鏈入外(wài)部樣式表是(shì)把樣式表保存為(wèi)一(✘δ >yī)個(gè)樣式表文(wén)件(jiàn),然後在‍↕>λ頁面中用(yòng)<link>标記鏈接到(dào)這(zhè)<₩‍個(gè)樣式表文(wén)件(jiàn),這(zhè)∏♠個(gè)<link>标記必須放(fàng)到(dào)頁面的(÷∑de)<head>區(qū)♠∑€內(nèi),如(rú)下(xià):

<head>

……

<link href="mystyle.δ>©css" rel="stylesheet&quo♠σ✘t; type="text/css" m↓•edia="all">

……

</head>

上(shàng)面這(zhè)個(gè)例子(zǐ)表示浏覽器(qì)從≠‌↓(cóng)mystyle.css文(wén)件(jiàn)中以文(₽• αwén)檔格式讀(dú)出定義的(de)樣式表。rel=”s♣$"tylesheet”是(shì)指在頁面中使用(yòng)這(zhè)φ​£個(gè)外(wài)部的(de)樣式表。ty≠↑™&pe=”text/css”是(shì)指文(wén)件(j★σ≤iàn)的(de)類型是(shì)樣式表文(wén)本。href=”m≥π≈βystyle.css”是(shì)文(wén)件(jiàn)所在的(d✘→★≠e)位置。media是(shì)選擇媒體(tǐ)類型,這(zhè)些(xi±♠ ē)媒體(tǐ)包括:屏幕,紙(zhǐ)張α♦★€,語音(yīn)合成設備,盲文(wén)閱讀(dú)設備等。

一(yī)個(gè)外(wài)部樣式表文(wén)件(jiàn)可(kě↔≤)以應用(yòng)于多(duō)個(gè)頁面。當你(nǐ)改變這'​₽(zhè)個(gè)樣式表文(wén)件(ji≤₽≤∞àn)時(shí),所有(yǒu)頁面的♣₹γ‍(de)樣式都(dōu)随之而改變。在制(zhì•α")作(zuò)大(dà)量相(xiàng)同樣式頁&®面的(de)網站(zhàn)時(shí),非常有(yǒu)用∞★☆≠(yòng),不(bù)僅減少(shǎo)¶≥了(le)重複的(de)工(gōng)作(zuò)量,而且有'↕α(yǒu)利于以後的(de)修改、編輯,浏覽時(shí)也(yě)減少(shα≤✔ǎo)了(le)重複下(xià)載代碼。≥∏


2.內(nèi)部樣式表

內(nèi)部樣式表是(shì)把樣式表放(fàng)到(dào)≠π↓頁面的(de)<head>區(​‌↔✘qū)裡(lǐ),這(zhè)些(xiē)定義的(de)樣式就(jiù)應用(←'♥yòng)到(dào)頁面中了(le),樣式表是(shìφ ↑§)用(yòng)<style>标記插入的(de),從(cóng)λ≥∑下(xià)例中可(kě)以看(kàn)出<style>©≠标記的(de)用(yòng)法:

<head>

……

<style type="tex∑÷t/css">

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url&σ♠<("images/back40.g★→ if")}

</style>

……

</head>

注意:有(yǒu)些(xiē)低(dī)版本的(de)浏覽<™器(qì)不(bù)能(néng)識别style标記,這(z™ hè)意味著(zhe)低(dī)版本的(de)<☆¥浏覽器(qì)會(huì)忽略style标記裡(lǐ)的(de)內(nèi)容♠‌₽,并把style标記裡(lǐ)的(de)內(nèi)容以文£☆(wén)本直接顯示到(dào)頁面上(shàng)。為(wèi)≤÷‌ 了(le)避免這(zhè)樣的(de)情況發生(shēng↑∑),我們用(yòng)加HTML注釋的(de)方式(<!-- 注釋 ←∑×₹-->)隐藏內(nèi)容而不(bù)讓它顯示。


3. 導入外(wài)部樣式表

導入外(wài)部樣式表是(shì)指在內(nèiφ ★)部樣式表的(de)<style&g×≈↕♠t;裡(lǐ)導入一(yī)個(gè)外(wài)ו∑€部樣式表,導入時(shí)用(yòng)@im'ε★port,看(kàn)下(xià)面這(zhè)個(gè)實例:

<head>

……

<style type=”text/css”>↑₩;

<!--

@import “mystyle.css”

其他(tā)樣式表的(de)聲明(míng)

-->

</style>

……

</head>

例中@import “mystyle.css”表示導入m±αΩαystyle.css樣式表,注意使用(yòng)時(shí)外(wài£↕)部樣式表的(de)路(lù)徑。方法和(hé)鏈入樣式< ‌表的(de)方法很(hěn)相(xiàng)似,但(dàn)導入外(w✔¥σ☆ài)部樣式表輸入方式更有(yǒu)優勢。實質上(<®>shàng)它相(xiàng)當于存在內(nèi)部樣式表中的(d<δe)。

注意:導入外(wài)部樣式表必須在樣式表的(de)開(≠★ kāi)始部分(fēn),在其他(tā)內(n★ ♥èi)部樣式表上(shàng)面。


4. 內(nèi)嵌樣式

內(nèi)嵌樣式是(shì)混合在HTML标記裡(lǐ)使用(yòn®£←g)的(de),用(yòng)這(zhè)種方↕♥法,可(kě)以很(hěn)簡單的(de)對(duì)某個(gè)¶™≠₩元素單獨定義樣式。內(nèi)嵌樣式的(de)使用(yòng)>∑$←是(shì)直接将在HTML标記裡(lǐ)加入style參數(s§∞$'hù)。而style參數(shù)的(de)內(nèi)容就(♥§φjiù)是(shì)CSS的(de)屬性和(hé)值α₩♦↕,如(rú)下(xià)例:

<p style="co""λ±lor: sienna;margin-left: 2βλε©0px;">

這(zhè)是(shì)一(yī)個(gè)段落

</p>

<!--這(zhè)個(gè)段落顔色為(wèi)土(tǔ)黃(huán↓♥g),左邊距為(wèi)20象素-->

在style參數(shù)後面的(de)引号裡(l∞ ǐ)的(de)內(nèi)容相(xiàn®φ₽g)當于在樣式表大(dà)括号裡(lǐ)的(de)內(nèi)容。


5.多(duō)重樣式表的(de)疊加

CSS樣式表有(yǒu)層疊順序,這(zhè)裡(lǐ)我們討♥∞(tǎo)論插入樣式表的(de)這(zhè)幾種方法的(∏ αde)疊加,如(rú)果在同一(yī)個(gè)£πα選擇器(qì)上(shàng)使用(yòng)幾個(gè)不(bù)同的(±"γ∏de)樣式表時(shí),這(zhè)個(gè)屬性值将會(huì)疊✔ε加幾個(gè)樣式表,遇到(dào)沖突的(de)地(dì)方會(huì)以φ"​最後定義的(de)為(wèi)準。例如(rú),我們₹♠π首先鏈入一(yī)個(gè)外(wài)部樣式 ✔Ω±表,其中定義了(le)h3選擇符的(de)color 、te​∑εxt-alig和(hé)font-size屬性:

h3

{

color: red;

text-align: left;

font-size: 8pt;

}

/*标題3的(de)文(wén)字顔色為(wèi)紅(hóng)色 ∑;向左對(duì)齊;文(wén)字尺寸為(wè↓'i)8号字*/

然後在內(nèi)部樣式表裡(lǐ)也(yě)定義了(le)₹ε§₽h3選擇符的(de)text-align✘λ∑和(hé)font-size屬性:

h3

{

text-align: right;

font-size: 20pt;

}

/*标題3文(wén)字向右對(duì)←$齊;尺寸為(wèi)20号字*/

那(nà)麽這(zhè)個(gè)頁面疊加後的(de)樣式就(jiù↕βγ)是(shì):

color: red;

text-align: right;

font-size: 20pt;

/*文(wén)字顔色為(wèi)紅(hóng)γ<≈✔色;向右對(duì)齊;尺寸為(wèi)20号字*/

字體(tǐ)顔色從(cóng)外(wài)部樣式表裡(lǐ)保留γ♦ 下(xià)來(lái),而對(duì)齊方式和(hé)字體(tǐ)尺∏£寸都(dōu)有(yǒu)定義時(shí),按σ♠ ≈照(zhào)後定義的(de)優先而依照(zhào)內(n← εèi)部樣式表。

注意:依照(zhào)後定義的(de)優先,所以優先級最±♠¶λ高(gāo)的(de)是(shì)[s]內(nèi)∑<π嵌樣式[/s],[s]內(nèi)部樣式表[/s]高(gāo)于[s]導入₹σΩ外(wài)部樣式表[/s],[s]鏈入的(de)外♣≈®¥(wài)部樣式表[/s]和(hé)[s]內(nèi)部樣式表ελπ[/s]之間(jiān)是(shì)最後定義的(de)優先級高(g⣱o)。