趙 愛 濤

(石家莊職業技術學院 信息工程系,河北 石家莊 050081)

?

使用CSS控制網頁的四種方式及比較

趙 愛 濤

(石家莊職業技術學院 信息工程系,河北 石家莊 050081)

CSS控制網頁方法有行內樣式、內嵌式樣式、鏈接式樣式和導入式樣式四種.其中，行內樣式最簡單，用在少量需要獨立設置的標記中；內嵌式樣式主要用于獨立網頁的樣式控制；鏈接樣式最實用，使用也最廣泛；導入式樣式可以在一個HTML文件中導入多個樣式表，在樣式表文件中也可以導入其他樣式表.這四種樣式同時存在時，使用優先級依次為行內樣式、鏈接式樣式、內嵌式樣式和導入式樣式.

CSS；網頁樣式；樣式表；優先級

CSS(Cascading Style Sheets，層疊樣式表)是一種用來為結構化HTML文檔或XML應用添加樣式(字體、邊框、顏色和排版等)的計算機標記性語言，由W3C定義和維護.CSS用于控制網頁樣式，能夠將樣式信息與網頁內容分離，也能更好地控制頁面布局，使網頁的體積更小，下載更快[1].因此，使用CSS控制網頁已經成為目前網頁設計中應用最廣泛的技術之一.使用CSS控制頁面的方法主要有行內樣式、內嵌式樣式、鏈接式樣式和導入式樣式四種，這四種方式的使用范圍各不相同.

1 行內樣式

行內樣式直接在HTML標記中添加style屬性，將CSS代碼直接寫在其中即可.

例如：

行內樣式舉例

/* 設置段落文字顏色、下劃線、字號 */

行內樣式舉例

/* 設置段落文字顏色、背景顏色、文字加粗 */

/* 設置標題1文字顏色、邊框：點 */

91香蕉高清国产线观看免费-97夜夜澡人人爽人人喊a-99久久久无码国产精品9-国产亚洲日韩欧美综合

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

圖1 行內樣式示意

標記和

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

這種方式的優點是每個標記的樣式互相不會產生影響，獨立實現，這是最簡單的CSS使用方式；缺點是每個標記必須單獨設置style屬性.在后期維護時，每個需要修改的樣式都需要逐一修改，維護成本很高；同時會產生過多的網頁代碼，網頁文件容易過大.因此，不推薦大量使用行內樣式，只用在少量需要獨立設置的標記中.

2 內嵌式樣式

內嵌式樣式將CSS寫在標記之間，并用標記進行聲明.如：

內嵌式樣式1

內嵌式樣式2

內嵌式樣式

瀏覽器效果如圖2.

圖2 內嵌式樣式示意

這種方式將CSS集中放置在

在中的應用如下：

導入樣式

導入樣式

瀏覽器效果如圖4.

圖4 導入式樣式示意

導入式樣式與鏈接式樣式的功能基本相同，區別在于用import導入樣式表時，在HTML文件初始化時就被導入到HTML文件內，并作為文件的一部分；而鏈接樣式是在HTML標記需要格式時才以鏈接的方式引入.導入式樣式最大的優點是可以在一個HTML文件中導入多個樣式表，在樣式表文件中也可以導入其他樣式表，使用非常方便.

[1] 丁海燕，鄒疆，邱莎.用層疊樣式表CSS技術實現網頁特效 [J].昆明冶金高等?？茖W校學報,2010(5):5-8.

責任編輯：金 欣

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-)，女，河北石家莊人，石家莊職業技術學院講師.

1009-4873(2015)02-0039-03

TP393.092

A