趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系,河北 石家莊 050081)

?

使用CSS控制網(wǎng)頁的四種方式及比較

趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系,河北 石家莊 050081)

CSS控制網(wǎng)頁方法有行內(nèi)樣式、內(nèi)嵌式樣式、鏈接式樣式和導(dǎo)入式樣式四種.其中，行內(nèi)樣式最簡單，用在少量需要獨(dú)立設(shè)置的標(biāo)記中；內(nèi)嵌式樣式主要用于獨(dú)立網(wǎng)頁的樣式控制；鏈接樣式最實(shí)用，使用也最廣泛；導(dǎo)入式樣式可以在一個(gè)HTML文件中導(dǎo)入多個(gè)樣式表，在樣式表文件中也可以導(dǎo)入其他樣式表.這四種樣式同時(shí)存在時(shí)，使用優(yōu)先級依次為行內(nèi)樣式、鏈接式樣式、內(nèi)嵌式樣式和導(dǎo)入式樣式.

CSS；網(wǎng)頁樣式；樣式表；優(yōu)先級

CSS(Cascading Style Sheets，層疊樣式表)是一種用來為結(jié)構(gòu)化HTML文檔或XML應(yīng)用添加樣式(字體、邊框、顏色和排版等)的計(jì)算機(jī)標(biāo)記性語言，由W3C定義和維護(hù).CSS用于控制網(wǎng)頁樣式，能夠?qū)邮叫畔⑴c網(wǎng)頁內(nèi)容分離，也能更好地控制頁面布局，使網(wǎng)頁的體積更小，下載更快[1].因此，使用CSS控制網(wǎng)頁已經(jīng)成為目前網(wǎng)頁設(shè)計(jì)中應(yīng)用最廣泛的技術(shù)之一.使用CSS控制頁面的方法主要有行內(nèi)樣式、內(nèi)嵌式樣式、鏈接式樣式和導(dǎo)入式樣式四種，這四種方式的使用范圍各不相同.

1 行內(nèi)樣式

行內(nèi)樣式直接在HTML標(biāo)記中添加style屬性，將CSS代碼直接寫在其中即可.

例如：

行內(nèi)樣式舉例

/* 設(shè)置段落文字顏色、下劃線、字號 */

行內(nèi)樣式舉例

/* 設(shè)置段落文字顏色、背景顏色、文字加粗 */

/* 設(shè)置標(biāo)題1文字顏色、邊框：點(diǎn) */

在瀏覽器中的效果如圖1.

圖1 行內(nèi)樣式示意

標(biāo)記和

標(biāo)記都使用了style屬性，并設(shè)置了各自不同的CSS樣式，它們按照自己的樣式顯示.

這種方式的優(yōu)點(diǎn)是每個(gè)標(biāo)記的樣式互相不會產(chǎn)生影響，獨(dú)立實(shí)現(xiàn)，這是最簡單的CSS使用方式；缺點(diǎn)是每個(gè)標(biāo)記必須單獨(dú)設(shè)置style屬性.在后期維護(hù)時(shí)，每個(gè)需要修改的樣式都需要逐一修改，維護(hù)成本很高；同時(shí)會產(chǎn)生過多的網(wǎng)頁代碼，網(wǎng)頁文件容易過大.因此，不推薦大量使用行內(nèi)樣式，只用在少量需要獨(dú)立設(shè)置的標(biāo)記中.

2 內(nèi)嵌式樣式

內(nèi)嵌式樣式將CSS寫在標(biāo)記之間，并用標(biāo)記進(jìn)行聲明.如：

內(nèi)嵌式樣式1

內(nèi)嵌式樣式2

內(nèi)嵌式樣式

瀏覽器效果如圖2.

圖2 內(nèi)嵌式樣式示意

這種方式將CSS集中放置在

在中的應(yīng)用如下：

導(dǎo)入樣式

導(dǎo)入樣式

瀏覽器效果如圖4.

圖4 導(dǎo)入式樣式示意

導(dǎo)入式樣式與鏈接式樣式的功能基本相同，區(qū)別在于用import導(dǎo)入樣式表時(shí)，在HTML文件初始化時(shí)就被導(dǎo)入到HTML文件內(nèi)，并作為文件的一部分；而鏈接樣式是在HTML標(biāo)記需要格式時(shí)才以鏈接的方式引入.導(dǎo)入式樣式最大的優(yōu)點(diǎn)是可以在一個(gè)HTML文件中導(dǎo)入多個(gè)樣式表，在樣式表文件中也可以導(dǎo)入其他樣式表，使用非常方便.

[1] 丁海燕，鄒疆，邱莎.用層疊樣式表CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁特效 [J].昆明冶金高等專科學(xué)校學(xué)報(bào),2010(5):5-8.

責(zé)任編輯：金 欣

A comparative study of four ways of using the CSS control webpage

ZHAO Ai-tao

(Department of Information Technology,Shijiazhuang Vocational Technology Institute,Shijiazhuang,Hebei 050081,China)

There are four ways to use the CSS control webpage,inline,embedded,linked and import styles.The inline style is used in small and independent tags.Embedded style is mainly used for independent control of web pages.Linked style is most practical and extensively used.Import style can import multiple stylesheets in an html file.The four styles may exist at the same time,but in the order of inline,linked,embedded and import styles.

CSS; webpage style; stylesheet; priority

2014-11-12

趙愛濤(1975-)，女，河北石家莊人，石家莊職業(yè)技術(shù)學(xué)院講師.

1009-4873(2015)02-0039-03

TP393.092

A