楊家

摘要：CSS（Cascading Style Sheet，可譯為“層疊樣式表）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面，首先可以確保文件結(jié)構(gòu)的基礎(chǔ)上有高自由度的設(shè)計(jì)性，其次提高了網(wǎng)頁的維護(hù)性、可操控性，大大的提高了網(wǎng)頁設(shè)計(jì)的工作效率。該文將介紹樣式的分類，選擇器的分類和作用，“盒子”的原理，重點(diǎn)在于介紹如何利用CSS樣式制作特效的水平菜單。

關(guān)鍵詞：CSS樣式；選擇器；盒子；特效菜單

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2014）10-2286-04

1 CSS的分類

在HTML中，引入CSS的方法主要有內(nèi)部樣式表和外部樣式表。

1.1 內(nèi)部樣式表

有兩種被稱為內(nèi)部樣式表的應(yīng)用方法。一種方法是在要指定的元素中使用style屬性直接記述。可是由于樣式信息只在該頁面中有效，對樣式修改時(shí)也必須修改HTML文件本身等原因，這種做法不太常用。

還有一張方法是在head元素中使用style屬性記述。這種方法也由于樣式信息只在該頁面中有效和在head元素中包含與HTML結(jié)構(gòu)無關(guān)的記述而不怎么推薦。

1.2 外部樣式表

外部樣式表是使用head元素中的link元素指定并讀取CSS文件。CSS文件（擴(kuò)展名為.css）和HTML文件不同，是直接記述樣式。在外部樣式表中可分為鏈接式和導(dǎo)入式。

使用鏈接式：

如果使用導(dǎo)入式，則需要使用如下語句。

此外，采用這兩種方式后的顯示效果也略有區(qū)別。使用鏈接方式時(shí)，會在裝載頁面主體部分之前裝在CSS文件，這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式效果的，而使用導(dǎo)入式時(shí)，會在整個(gè)頁面裝載完成后再裝載CSS文件，對于有的瀏覽器來說，在一些情況下，吐過網(wǎng)頁文件的體積比較大，則會出現(xiàn)先顯示無樣式的頁面，閃爍以下之后再出現(xiàn)設(shè)置樣式后的效果。

這里給大家的建議是，如果僅需要引入一個(gè)CSS文件，則使用鏈接方式；如果需要引入多個(gè)CSS文件，則首先用鏈接方式引入一個(gè)“目錄”CSS文件，這個(gè)“目錄”CSS文件中在使用導(dǎo)入式引入其他CSS文件。

但是如果希望通過JavaScript來動態(tài)決定引入哪個(gè)CSS文件，則必須使用鏈接方式才能實(shí)現(xiàn)。

2 CSS選擇器

選擇器（selector）是CSS中很重要的概念，所有HTML語言中的標(biāo)記樣式都是通過不同的CSS選擇器進(jìn)行控制的。用戶只需要通過選擇器對不同的HTML標(biāo)簽進(jìn)行選擇，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。在CSS中，選擇器可分為兩大類：基本選擇器和復(fù)合選擇器。基本選擇器有標(biāo)記選擇器、類選擇器和ID選擇器；復(fù)合選擇器是通過對基本選擇器進(jìn)行組合而構(gòu)成的。

2.1 標(biāo)記選擇器

一個(gè)HTML頁面由很多不同的標(biāo)記（標(biāo)簽）組成，CSS標(biāo)記選擇器用來聲明哪些標(biāo)記采用哪種CSS樣式。定義標(biāo)記選擇器后可以將樣式應(yīng)用到所有的元素，作用于網(wǎng)頁中出現(xiàn)該標(biāo)簽的地方。例如，table標(biāo)簽就是用于聲明頁面中所有

標(biāo)記的CSS風(fēng)格。如下所示：

2.2 類選擇器（Class選擇器）

類選擇器名稱可以由用戶自定義，指定時(shí)要在class名前面添加“.”，在同一個(gè)HTML文件中可以重復(fù)指定相同的class名。希望在用相同class名指定的復(fù)數(shù)元素中應(yīng)用同一個(gè)樣式時(shí)，使用“.class名”來指定。

這個(gè)標(biāo)題使用了Style。

這個(gè)標(biāo)題沒有使用Style。

2.3 ID選擇器

使用HTML元素中的id屬性將指定的id名作為選擇器。指定時(shí)要在id名前面添加“#（井號）。由于在同一個(gè)HTML文件中不能重復(fù)指定相同的id名，所以只有“#id名”可以對指定的地方進(jìn)行特別設(shè)定。因此盡管大多數(shù)情況只使用“#id名”的格式，不過在協(xié)同工作時(shí)為了讓誰都能知道指定的是哪個(gè)元素。在HTML的標(biāo)記中只需要利用ID屬性，就可以直接調(diào)用CSS中的ID選擇器。

#header{background-color：#999999；}

2.4 復(fù)合選擇器

復(fù)合選擇器就是兩個(gè)或是多個(gè)基本選擇器，通過不同方式連接而成的選擇器。

2.4.1 “交集”選擇器

“交集”復(fù)合選擇器由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。其中第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是類別選擇器或ID選擇器。這兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫，形式如下：

2.4.2 “并集”選擇器

與交集選擇器相對應(yīng)，還有一種“并集”選擇器，它的結(jié)果是同時(shí)選中各個(gè)基本選擇器所選擇的范圍。任何形式的選擇器（包括標(biāo)記選擇器、class類別選擇器、ID選擇器等）都可以作為并集選擇器的一部分。

并集選擇器是多個(gè)選擇器通過逗號連接而成的，在聲明各種CSS選擇器時(shí)，如果某些選擇器的風(fēng)格是完全相同的，或者部分相同，這時(shí)可以利用并集選擇器同時(shí)聲明風(fēng)格相同的CSS選擇器。

2.4.3后代選擇器

后代選擇器是利用HTML的樹結(jié)構(gòu)來特別設(shè)置要指定元素的方法，以“母元素-子元素”的形式來指定。

Div#main p{color：#999999；}

在多個(gè)p元素中，只想指定p元素的樣式時(shí)，使用母元素div來指定。通過使用后代選擇器，即使不增加id名和class名，也能精確地進(jìn)行特別指定。

2.4.4 偽類

偽類的代表，是和鏈接有關(guān)的偽類“：link”和“visited”的形式使用。使用HTML中的alink屬性和vlink 屬性可以改變鏈接是的文字顏色和訪問后鏈接的文字顏色 ，而在CSS中使用該鏈接的偽類來指定。當(dāng)然不只是文字顏色，各種各樣的性質(zhì)都可以用來裝飾有a元素標(biāo)識的內(nèi)容。另外還可以通過將a元素用于鏈接偽類之外的活動偽類“：hover”、“：active”進(jìn)行鼠標(biāo)懸浮在上或點(diǎn)擊瞬間的設(shè)定。這兩種偽類也可用于a元素之外。

2.5 CSS的優(yōu)先級

在選擇器相同的情況下，CSS的記述中后被讀取的樣式具有更高的優(yōu)先級。雖然瀏覽器也預(yù)先設(shè)定了樣式，但由于后被讀取的制作者樣式的優(yōu)先級高，可能會出現(xiàn)樣式被覆蓋變更的結(jié)果。在制作CSS的時(shí)候，要理解這個(gè)“讀取順須”，注意避免無用的覆蓋。相反，理解并合理利用覆蓋的結(jié)構(gòu)可以作出巧妙的記述。

由于一個(gè)CSS文件是從上到下讀取，后面記述的內(nèi)容優(yōu)先級要高。如果是多個(gè)CSS文件，HTML的link標(biāo)簽也是從上到下讀取，所以最后指定的文件擁有最高優(yōu)先級。

優(yōu)先級還要根據(jù)“選擇器特殊性”來決定。當(dāng)選擇器不同而指定了同樣的元素時(shí)，哪一方的優(yōu)先級高呢？ CSS2的規(guī)格書中規(guī)定了全局選擇器=0分，類型選擇器=1分，class選擇器=10分，id選擇器=100分，分?jǐn)?shù)高的選擇器優(yōu)先級也高。

2.6 屬性值的繼承

屬性值中，母元素設(shè)定的值既有會被子元素繼承的，也有不會被繼承的。例如，如果指定由boby元素繼承的屬性②，也會反映到其他元素中。需要注意如果能巧妙地利用就不必重復(fù)相同的記述，但要是指定有誤也可能會出現(xiàn)意想不到的結(jié)果。

3 盒子模型

什么是CSS的盒子模式呢？先說說我們在網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容領(lǐng)域（content）、填充領(lǐng)域（padding）、邊框領(lǐng)域（border）、邊界領(lǐng)域（margin）， CSS盒子模式都具備這些屬性。

一個(gè)盒子實(shí)際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊框+邊框+外邊框”組成的。在CSS中可以通過設(shè)定width和height的值來控制內(nèi)容所占的矩形的大小，并且對于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的border、padding和margin。因此只要利用好這些屬性，就能夠?qū)崿F(xiàn)各種各樣的排版效果。

Margin： 包括margin-top， margin-right， margin-bottom， margin-left， 控制塊級元素之間的距離， 它們是透明不可見的。

Padding： 包括padding-top，padding-right，padding-bottom，padding-left， 控制塊級元素內(nèi)部， content與border之間的距離。

例子1：自適應(yīng)的斜角水平菜單

基本思路

核心的思想就是利用邊框的接角位置構(gòu)造出一個(gè)斜角，然后通過使用“鉤子”的方法，掛到每一個(gè)菜單項(xiàng)的左上角處。

對于每一個(gè)菜單項(xiàng)的a元素，放置一個(gè)span元素，設(shè)為corner類別，并作為css“鉤子”，用于實(shí)現(xiàn)斜角效果。

基本設(shè)置

首先設(shè)置#menu容器，只設(shè)置文字的樣式。然后設(shè)置每一個(gè)菜單項(xiàng)的基本屬性；其中將a元素設(shè)置為塊級元素，并向左浮動。

#menu {

font-family：Arial；

font-size：14px；

}

#menu a， #menu a：visited {

display：block； /*設(shè)置為塊級元素*/

float：left； /*向左浮動*/

position：relative； /*相對定位，用于設(shè)置斜角*/

background-color：#c00；

color：#fff；

text-decoration：none；

padding：6px；

margin：1px 0 0 1px； /*使菜單項(xiàng)之間間隔1像素*/

}

注：這里通過position屬性將每個(gè)菜單項(xiàng)的定位方式設(shè)置為相對定位，目的不是要移動菜單項(xiàng)本身，而是通過這個(gè)設(shè)置將自身變?yōu)椤鞍瑝K”，從而才能使掛在上面的斜角元素以它為基準(zhǔn)來定位。

設(shè)置斜角效果

#menu a span{

height：0；

width：0；

border-bottom：solid 6px #c00；

border-left：solid 6px #fff；

position：absolute；

top：0；

left：0；

overflow：hidden；

}

其中，“top：0”、“l(fā)eft：0”這兩行的作用是進(jìn)行斜角的定位。由于前面的a元素已經(jīng)設(shè)置為相對定位，而這個(gè)span是a的下級元素，又設(shè)置為絕對定位，因此這個(gè)斜角將以a元素的位置為基準(zhǔn)進(jìn)行定位。

設(shè)置鼠標(biāo)經(jīng)過的效果

#menu a：hover{

background-color： #F90；

color：#333

}

#menu a：hover span{

border-bottom：solid 6px #f90；

}

4 結(jié)束語

使用CSS樣式表，不僅可以提高網(wǎng)頁的維護(hù)更新效率，同時(shí)。CSS樣式可以把網(wǎng)頁整體布局和整體風(fēng)格統(tǒng)一化，讓網(wǎng)頁看起來更加整潔，更加雅觀。隨著互聯(lián)網(wǎng)和網(wǎng)站技術(shù)的不斷發(fā)展，CSS樣式將得到更加廣泛的應(yīng)用。

參考文獻(xiàn)：

[1] 溫謙.CSS設(shè)計(jì)徹底研究[M].北京：人民郵電出版社，2010.

[2] 檜山佐知子.網(wǎng)絡(luò)設(shè)計(jì)的原理[M].周淳，譯.北京：中信出版社，2011.

[3] 鄭耀濤，孫甲泉.網(wǎng)頁美工實(shí)例教程[M].北京：高等教育出版社，2010.

[4] 遇鑒海.網(wǎng)頁創(chuàng)意與制作[M].北京：電子工業(yè)出版社，2011.