當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來(lái)讀，這里介紹四種在頁(yè)面中插入CSS樣式表的方法：鏈入外部樣式表、內(nèi)部樣式表、導(dǎo)入外表樣式表和內(nèi)嵌樣式。并特別講解多重樣式表的疊加的運(yùn)用以及如何在xml中插入CSS。 1. 鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用link標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)link標(biāo)記必須放到頁(yè)面的head區(qū)內(nèi)，如下： head …… link href="mystyle.css" rel="stylesheet" type="text/css" media="all" …… /head 上面這個(gè)例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁(yè)面中使用這個(gè)外部的樣式表。type=”text/css”是指文件的類(lèi)型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類(lèi)型，這些媒體包括：屏幕，紙張，語(yǔ)音合成設(shè)備，盲文閱讀設(shè)備等。 一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁(yè)面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁(yè)面的樣式都隨之而改變。在制作大量相同樣式頁(yè)面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時(shí)也減少了重復(fù)下載代碼。 樣式表文件可以用任何文本編輯器（例如：記事本）打開(kāi)并編輯，一般樣式表文件擴(kuò)展名為.css。內(nèi)容是定義的樣式表，不包含HTML標(biāo)記，mystyle.css這個(gè)文件的內(nèi)容如下： hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} /*定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁(yè)面的背景圖片為images目錄下的back40.gif文件*/ 2.內(nèi)部樣式表 內(nèi)部樣式表是把樣式表放到頁(yè)面的head區(qū)里，這些定義的樣式就應(yīng)用到頁(yè)面中了，樣式表是用style標(biāo)記插入的，從下例中可以看出style標(biāo)記的用法： head …… style type="text/css" hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} /style …… /head 注意：有些低版本的瀏覽器不能識(shí)別style標(biāo)記，這意味著低版本的瀏覽器會(huì)忽略style標(biāo)記里的內(nèi)容，并把style標(biāo)記里的內(nèi)容以文本直接顯示到頁(yè)面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（!-- 注釋 --）隱藏內(nèi)容而不讓它顯示： head …… style type="text/css" !-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} -- /style …… /head 3. 導(dǎo)入外部樣式表 導(dǎo)入外部樣式表是指在內(nèi)部樣式表的style里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用@import，看下面這個(gè)實(shí)例： head …… style type=”text/css” !-- @import “mystyle.css” 其他樣式表的聲明 -- /style …… /head 例中@import “mystyle.css”表示導(dǎo)入mystyle.css樣式表，注意使用時(shí)外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表輸入方式更有優(yōu)勢(shì)。實(shí)質(zhì)上它相當(dāng)于存在內(nèi)部樣式表中的。 注意：導(dǎo)入外部樣式表必須在樣式表的開(kāi)始部分，在其他內(nèi)部樣式表上面。 4. 內(nèi)嵌樣式 內(nèi)嵌樣式是混合在HTML標(biāo)記里使用的，用這種方法，可以很簡(jiǎn)單的對(duì)某個(gè)元素單獨(dú)定義樣式。內(nèi)嵌樣式的使用是直接將在HTML標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值，如下例： p style="color: sienna;margin-left: 20px;" 這是一個(gè)段落 /p !--這個(gè)段落顏色為土黃，左邊距為20象素-- 在style參數(shù)后面的引號(hào)里的內(nèi)容相當(dāng)于在樣式表大括號(hào)里的內(nèi)容。 注意：style參數(shù)可以應(yīng)用于任意BODY內(nèi)的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。 多重樣式表的疊加 CSS樣式表有層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表，遇到?jīng)_突的地方會(huì)以最后定義的為準(zhǔn)。例如，我們首先鏈入一個(gè)外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性： h3 { color: red; text-align: left; font-size: 8pt; } /*標(biāo)題3的文字顏色為紅色；向左對(duì)齊；文字尺寸為8號(hào)字*/ 然后在內(nèi)部樣式表里也定義了h3選擇符的text-align和font-size屬性： h3 { text-align: right; font-size: 20pt; } /*標(biāo)題3文字向右對(duì)齊；尺寸為20號(hào)字*/ 那么這個(gè)頁(yè)面疊加后的樣式就是： color: red; text-align: right; font-size: 20pt; /*文字顏色為紅色；向右對(duì)齊；尺寸為20號(hào)字*/ 字體顏色從外部樣式表里保留下來(lái)，而對(duì)齊方式和字體尺寸都有定義時(shí)，按照后定義的優(yōu)先而依照內(nèi)部樣式表。 注意：依照后定義的優(yōu)先，所以優(yōu)先級(jí)最高的是[s]內(nèi)嵌樣式[/s]，[s]內(nèi)部樣式表[/s]高于[s]導(dǎo)入外部樣式表[/s]，[s]鏈入的外部樣式表[/s]和[s]內(nèi)部樣式表[/s]之間是最后定義的優(yōu)先級(jí)高。 如何在xml中插入CSS A brief CSS2 tutorial for XML——翻譯自Cascading Style Sheets, level 2 CSS可以被應(yīng)用于任何形式的結(jié)構(gòu)化文檔，比如可擴(kuò)展性標(biāo)記語(yǔ)言XML，因?yàn)橹谱髡呖梢宰远x沒(méi)有任何表現(xiàn)的標(biāo)記，比起HTML，XML的表現(xiàn)依賴于更多的樣式。 下面是一個(gè)XML的片段。 ARTICLE HEADLINEFredrick the Great meets Bach/HEADLINE AUTHORJohann Nikolaus Forkel/AUTHOR PARA One evening, just as he was getting his INSTRUMENTflute/INSTRUMENT ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. /PARA /ARTICLE 為了讓XML文檔擁有普通的視覺(jué)效果，我們首先必須定義標(biāo)簽元素的樣式是內(nèi)嵌（inline-level）的還是塊級(jí)（block-level）的。 例子： INSTRUMENT { display: inline }/*定義標(biāo)簽樣式為內(nèi)嵌元素*/ ARTICLE, HEADLINE, AUTHOR, PARA { display: block }/*定義標(biāo)簽樣式為塊級(jí)元素*/ 如何將定義好的CSS應(yīng)用到XML文檔中呢？使用下面這段代碼。 ?
創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站設(shè)計(jì)、做網(wǎng)站的網(wǎng)絡(luò)公司。作為專業(yè)的建站公司,創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！
[img]1、首先，在電腦中打開(kāi)編輯器，創(chuàng)建html文檔。
2、然后，創(chuàng)建h1標(biāo)簽，用行內(nèi)樣式控制字體顏色為紅色。
3、接下來(lái)，用內(nèi)部樣式選擇器選擇h1標(biāo)簽，控制它的樣式。
4、外部樣式需要，創(chuàng)建外部樣式.css文件。
5、然后，在html文件里面引入css文件。
6、最后，在瀏覽器看是否生效，就可以了。
1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過(guò)一個(gè)小demo演示它們的用法，首先新建一個(gè)html文件，放入3個(gè)button按鈕，給前兩個(gè)按鈕分別設(shè)置class屬性為btn1和btn2：
2、接著準(zhǔn)備一個(gè)css文件，命名為demo.css，在文件內(nèi)寫(xiě)入按鈕A的樣式，保存css文件：
3、回到剛才的html文件，在style標(biāo)簽中用link標(biāo)簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結(jié)就是創(chuàng)建好的css文件內(nèi)寫(xiě)好樣式，然后在html文件中用link標(biāo)簽引入即可，這也是大部分網(wǎng)站使用的方法，因?yàn)槠湟敕奖?，管理起?lái)也比較方便：
4、接著是內(nèi)部樣式表的使用，這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽，在里面加入btn2的樣式。對(duì)于內(nèi)部樣式表簡(jiǎn)單的html文件，內(nèi)部樣式是很方便的，但是結(jié)構(gòu)復(fù)雜的html文件使用它就會(huì)讓文件顯得很混亂：
5、最后是內(nèi)聯(lián)樣式的使用，直接在第三個(gè)標(biāo)簽內(nèi)使用style屬性加入樣式就可以了：
6、最后保存html文件，打開(kāi)瀏覽器可以看到三個(gè)按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：
CSS的調(diào)用，按照CSS出現(xiàn)在頁(yè)面的不同位置，可以分為3種方法：
元素中直接使用；
從頁(yè)面頭部調(diào)用；
采用鏈接的形式調(diào)用。
不同的調(diào)用方法有不同的寫(xiě)法和優(yōu)先級(jí)。下面分別做一下介紹。
一、元素中直接使用
這種調(diào)用方式的寫(xiě)法如下：
元素名稱 style="屬性:屬性值;"/元素名稱
在樣式中直接使用CSS，語(yǔ)法是使用style標(biāo)簽，在雙引號(hào)中，樣式的語(yǔ)法結(jié)構(gòu)和獨(dú)立樣式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接調(diào)用。/div
該樣式中定義了元素寬、高為360、80像素，背景色為灰色，字體大小為14像素。其應(yīng)用到頁(yè)面中的顯示如圖1。
二、從頁(yè)面頭部調(diào)用
從頁(yè)面頭部調(diào)用CSS是將CSS寫(xiě)在頁(yè)面的head元素中，然后在頁(yè)面中調(diào)用。其語(yǔ)法結(jié)構(gòu)如下：
style
選擇符{屬性:屬性值;}
/style
頁(yè)面上的所有樣式都可以寫(xiě)在style和/style中。使用這種方式調(diào)用CSS，在頁(yè)面中必須有相應(yīng)的調(diào)用代碼。
其中，類(lèi)選擇符的調(diào)用代碼如下：
元素名稱 class="類(lèi)選擇符名稱"/元素名稱
ID選擇符的調(diào)用代碼如下：
元素名稱 id="id 類(lèi)選擇符名稱"/元素名稱
下面我們來(lái)用一個(gè)示例演示一下。
head
titleCSS調(diào)用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：從頁(yè)面頭部調(diào)用。/div
/body
該樣式應(yīng)用到頁(yè)面的效果如圖2所示。
三、采用鏈接的形式調(diào)用
采用鏈接的形式調(diào)用CSS通常有兩種方法：
使用link元素
使用link元素調(diào)用CSS的語(yǔ)法如下：
link rel="stylesheet" href="css文件路徑" type="text/css"/
其中rel="stylesheet"指這個(gè)link和其href之間的關(guān)聯(lián)樣式為樣式表文件。type="text/css"指文件類(lèi)型是樣式表文本。
使用@import
使用@import調(diào)用和使用link元素調(diào)用的區(qū)別在于，使用@import的調(diào)用方法只能使用在樣式文件中，即只能在調(diào)用的樣式文件，或style元素中才能正常使用
CSS按其位置可以分成三種：
內(nèi)嵌樣式(Inline Style)
內(nèi)部樣式表(Internal Style Sheet)
外部樣式表(External Style Sheet)
內(nèi)嵌樣式(Inline Style)
Inline Style是寫(xiě)在Tag里面的。內(nèi)嵌樣式只對(duì)所在的Tag有效。
P style="font-size:20pt; color:red"這個(gè)Style定義p/p里面的文字是20pt字體，字體顏色是紅色。/p
內(nèi)部樣式表(Internal Style Sheet)
內(nèi)部樣式表是寫(xiě)在HTML的head/head里面的。內(nèi)部樣式表只對(duì)所在的網(wǎng)頁(yè)有效。
HTML
HEAD
STYLE type="text/css"
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
/STYLE
/HEAD
BODY
H1 class="mylayout" 這個(gè)標(biāo)題使用了Style。/H1
H1這個(gè)標(biāo)題沒(méi)有使用Style。/H1
/BODY
/HTML
內(nèi)部樣式表(Internal Sytle Sheet)要用到Style這個(gè)Tag，寫(xiě)法如下：
STYLE type="text/css"
......
/STYLE
外部樣式表(External Style Sheet)
如果很多網(wǎng)頁(yè)需要用到同樣的樣式(Styles)，用什么方法呢？
將樣式(Styles)寫(xiě)在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式(Styles)的網(wǎng)頁(yè)里引用這個(gè)CSS文件。
比如可以用文本編輯器(NotePad)建立一個(gè)叫home的文件，文件后綴不要用.txt，改成.css。文件內(nèi)容如下：
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一個(gè)網(wǎng)頁(yè)，代碼如下：
HTML
HEAD
link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"
/HEAD
BODY
H1 class="mylayout" 這個(gè)標(biāo)題使用了Style。/H1
H1這個(gè)標(biāo)題沒(méi)有使用Style。/H1
/BODY
/HTML
使用外部(Extenal)樣式表，相對(duì)于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點(diǎn)：
樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁(yè)共用。
便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁(yè)。
提高網(wǎng)頁(yè)顯示的速度。如果樣式寫(xiě)在網(wǎng)頁(yè)里，會(huì)降低網(wǎng)頁(yè)顯示的速度，如果網(wǎng)頁(yè)引用一個(gè)CSS文件，這個(gè)CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁(yè)早已經(jīng)引用過(guò)它)，網(wǎng)頁(yè)顯示的速度就比較快。
css樣式是HTML的一個(gè)補(bǔ)充，簡(jiǎn)單的css使用樣式如下:
html
body
div?id=div/div
/body
style?type="text/css"
width:300px;//設(shè)置div的寬度300像素
height:500px;//設(shè)置div高度500像素
background-color:red;//設(shè)置div的背景顏色為紅色
/style
/html
css代碼位于style之間，詳細(xì)的css代碼解釋見(jiàn)代碼注釋。
重慶分公司
重慶分公司
