新聞資訊

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

要想在浏覽器中顯示出預期的CSS樣式表效果,就要讓浏覽器識别并正确調用CSS。當浏覽器讀取樣式表時,要依照文本格式來讀,這裏介紹四種在頁面中插入CSS樣式表的方法:鏈入外部樣式表、内部樣式表、導入外表樣式表和内嵌樣式。并特别講解多重樣式表的疊加的運用以及如何在xml中插入CSS。


1. 鏈入外部樣式表

鏈入外部樣式表是(shì)把樣式表保存爲一個樣式表文件,然後在頁面中用<link>标記鏈接到這個樣式表文件,這個<link>标記必須放(fàng)到頁面的<head>區内,如下:

<head>

……

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

……

</head>

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

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


2.内部樣式表

内部樣式表是(shì)把樣式表放(fàng)到頁面的<head>區裏,這些定義的樣式就應用到頁面中了,樣式表是(shì)用<style>标記插入的,從下例中可以看出<style>标記的用法:

<head>

……

<style type="text/css">

hr {color: sienna}

p {margin-left: 20px}

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

</style>

……

</head>

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


3. 導入外部樣式表

導入外部樣式表是(shì)指在内部樣式表的<style>裏導入一個外部樣式表,導入時用@import,看下面這個實例:

<head>

……

<style type=”text/css”>

<!--

@import “mystyle.css”

其他樣式表的聲明

-->

</style>

……

</head>

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

注意:導入外部樣式表必須在樣式表的開始部分,在其他内部樣式表上面。


4. 内嵌樣式

内嵌樣式是(shì)混合在HTML标記裏使用的,用這種方法,可以很簡單的對某個元素單獨定義樣式。内嵌樣式的使用是(shì)直接将在HTML标記裏加入style參數。而style參數的内容就是(shì)CSS的屬性和值,如下例:

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

這是(shì)一個段落

</p>

<!--這個段落顔色爲土黃,左邊距爲20象素-->

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


5.多重樣式表的疊加

CSS樣式表有層疊順序,這裏我們讨論插入樣式表的這幾種方法的疊加,如果在同一個選擇器上使用幾個不同的樣式表時,這個屬性值将會疊加幾個樣式表,遇到沖突的地方會以最後定義的爲準。例如,我們首先鏈入一個外部樣式表,其中定義了h3選擇符的color 、text-alig和font-size屬性:

h3

{

color: red;

text-align: left;

font-size: 8pt;

}

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

然後在内部樣式表裏也定義了h3選擇符的text-align和font-size屬性:

h3

{

text-align: right;

font-size: 20pt;

}

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

那麽這個頁面疊加後的樣式就是(shì):

color: red;

text-align: right;

font-size: 20pt;

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

字體顔色從外部樣式表裏保留下來,而對齊方式和字體尺寸都有定義時,按照後定義的優先而依照内部樣式表。

注意:依照後定義的優先,所以優先級最高的是(shì)[s]内嵌樣式[/s],[s]内部樣式表[/s]高于[s]導入外部樣式表[/s],[s]鏈入的外部樣式表[/s]和[s]内部樣式表[/s]之間是(shì)最後定義的優先級高。