新聞資訊

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

要想在浏覽器中顯示出預期的(de)CSS樣式表效果,就要讓浏覽器識别并正确調用(yòng)CSS。當浏覽器讀取樣式表時(shí),要依照(zhào)文本格式來(lái)讀,這(zhè)裏介紹四種在頁面中插入CSS樣式表的(de)方法:鏈入外部樣式表、内部樣式表、導入外表樣式表和(hé)内嵌樣式。并特别講解多(duō)重樣式表的(de)疊加的(de)運用(yòng)以及如何在xml中插入CSS。


1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存爲一個(gè)樣式表文件,然後在頁面中用(yòng)<link>标記鏈接到這(zhè)個(gè)樣式表文件,這(zhè)個(gè)<link>标記必須放到頁面的(de)<head>區(qū)内,如下(xià):

<head>

……

<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">

……

</head>

上面這(zhè)個(gè)例子表示浏覽器從mystyle.css文件中以文檔格式讀出定義的(de)樣式表。rel=”stylesheet”是指在頁面中使用(yòng)這(zhè)個(gè)外部的(de)樣式表。type=”text/css”是指文件的(de)類型是樣式表文本。href=”mystyle.css”是文件所在的(de)位置。media是選擇媒體類型,這(zhè)些媒體包括:屏幕,紙張,語音(yīn)合成設備,盲文閱讀設備等。

一個(gè)外部樣式表文件可(kě)以應用(yòng)于多(duō)個(gè)頁面。當你改變這(zhè)個(gè)樣式表文件時(shí),所有頁面的(de)樣式都随之而改變。在制作大(dà)量相同樣式頁面的(de)網站時(shí),非常有用(yòng),不僅減少了(le)重複的(de)工作量,而且有利于以後的(de)修改、編輯,浏覽時(shí)也(yě)減少了(le)重複下(xià)載代碼。


2.内部樣式表

内部樣式表是把樣式表放到頁面的(de)<head>區(qū)裏,這(zhè)些定義的(de)樣式就應用(yòng)到頁面中了(le),樣式表是用(yòng)<style>标記插入的(de),從下(xià)例中可(kě)以看出<style>标記的(de)用(yòng)法:

<head>

……

<style type="text/css">

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

</style>

……

</head>

注意:有些低版本的(de)浏覽器不能識别style标記,這(zhè)意味著(zhe)低版本的(de)浏覽器會忽略style标記裏的(de)内容,并把style标記裏的(de)内容以文本直接顯示到頁面上。爲了(le)避免這(zhè)樣的(de)情況發生,我們用(yòng)加HTML注釋的(de)方式(<!-- 注釋 -->)隐藏内容而不讓它顯示。


3. 導入外部樣式表

導入外部樣式表是指在内部樣式表的(de)<style>裏導入一個(gè)外部樣式表,導入時(shí)用(yòng)@import,看下(xià)面這(zhè)個(gè)實例:

<head>

……

<style type=”text/css”>

<!--

@import “mystyle.css”

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

-->

</style>

……

</head>

例中@import “mystyle.css”表示導入mystyle.css樣式表,注意使用(yòng)時(shí)外部樣式表的(de)路徑。方法和(hé)鏈入樣式表的(de)方法很相似,但導入外部樣式表輸入方式更有優勢。實質上它相當于存在内部樣式表中的(de)。

注意:導入外部樣式表必須在樣式表的(de)開始部分(fēn),在其他(tā)内部樣式表上面。


4. 内嵌樣式

内嵌樣式是混合在HTML标記裏使用(yòng)的(de),用(yòng)這(zhè)種方法,可(kě)以很簡單的(de)對(duì)某個(gè)元素單獨定義樣式。内嵌樣式的(de)使用(yòng)是直接将在HTML标記裏加入style參數。而style參數的(de)内容就是CSS的(de)屬性和(hé)值,如下(xià)例:

<p style="color: sienna;margin-left: 20px;">

這(zhè)是一個(gè)段落

</p>

<!--這(zhè)個(gè)段落顔色爲土黃(huáng),左邊距爲20象素-->

在style參數後面的(de)引号裏的(de)内容相當于在樣式表大(dà)括号裏的(de)内容。


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

CSS樣式表有層疊順序,這(zhè)裏我們討(tǎo)論插入樣式表的(de)這(zhè)幾種方法的(de)疊加,如果在同一個(gè)選擇器上使用(yòng)幾個(gè)不同的(de)樣式表時(shí),這(zhè)個(gè)屬性值将會疊加幾個(gè)樣式表,遇到沖突的(de)地方會以最後定義的(de)爲準。例如,我們首先鏈入一個(gè)外部樣式表,其中定義了(le)h3選擇符的(de)color 、text-alig和(hé)font-size屬性:

h3

{

color: red;

text-align: left;

font-size: 8pt;

}

/*标題3的(de)文字顔色爲紅色;向左對(duì)齊;文字尺寸爲8号字*/

然後在内部樣式表裏也(yě)定義了(le)h3選擇符的(de)text-align和(hé)font-size屬性:

h3

{

text-align: right;

font-size: 20pt;

}

/*标題3文字向右對(duì)齊;尺寸爲20号字*/

那麽這(zhè)個(gè)頁面疊加後的(de)樣式就是:

color: red;

text-align: right;

font-size: 20pt;

/*文字顔色爲紅色;向右對(duì)齊;尺寸爲20号字*/

字體顔色從外部樣式表裏保留下(xià)來(lái),而對(duì)齊方式和(hé)字體尺寸都有定義時(shí),按照(zhào)後定義的(de)優先而依照(zhào)内部樣式表。

注意:依照(zhào)後定義的(de)優先,所以優先級最高(gāo)的(de)是[s]内嵌樣式[/s],[s]内部樣式表[/s]高(gāo)于[s]導入外部樣式表[/s],[s]鏈入的(de)外部樣式表[/s]和(hé)[s]内部樣式表[/s]之間是最後定義的(de)優先級高(gāo)。