CSS在網(wǎng)頁(yè)開(kāi)發(fā)中的運(yùn)用技巧

鞏恩偉

CSS在網(wǎng)頁(yè)開(kāi)發(fā)中的運(yùn)用技巧

鞏恩偉

本文首先介紹了CSS的基本格式和添加層疊樣式表的三種方法，然后介紹了幾種用CSS定義網(wǎng)頁(yè)中的樣式的技巧，最后用一個(gè)實(shí)例展示了用CSS定義網(wǎng)頁(yè)的方法。

CSS ；樣式；實(shí)例

隨著網(wǎng)頁(yè)制作技術(shù)的發(fā)展，CSS技術(shù)越來(lái)越被廣大網(wǎng)頁(yè)設(shè)計(jì)人員運(yùn)用。CSS的全稱是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱樣式表。它們控制Web頁(yè)內(nèi)容的外觀。CSS樣式使用戶可以控制許多僅使用HTML無(wú)法控制的屬性。例如，可以指定自定義列表項(xiàng)目符號(hào)并指定不同的字體大小和單位（像素、點(diǎn)數(shù)等）。通過(guò)使用CSS樣式和以像素為單位設(shè)置字體大小，還可以控制網(wǎng)頁(yè)中塊級(jí)別元素的格式和定位。利用CSS可以使制作出來(lái)的網(wǎng)頁(yè)易于改版，也有利于網(wǎng)頁(yè)標(biāo)準(zhǔn)化。

1、樣式的基本格式

CSS的每條定義都是由三個(gè)部分組成的：選擇符（Selector）、屬性（property）和屬性

取值（value）。基本格式如下：

選擇符{屬性: 屬性值}

1.1 選擇符：可以是HTML的標(biāo)識(shí)符，例如＜TABLE＞、＜h1＞、＜font＞等。

1.2 屬性：就是指選擇符中要修改的屬性。

1.3 屬性值：相應(yīng)屬性的取值。

2、添加層疊樣式表的方法

2.1 內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式可稱為局部樣式。內(nèi)聯(lián)樣式是混合在HTML標(biāo)識(shí)符里使用的，在標(biāo)識(shí)符中加入style屬性,后面跟一些屬性及屬性的值,

如＜div style="height:500px;width:66px;"＞內(nèi)聯(lián)樣式表＜/div＞。

內(nèi)聯(lián)樣式具有局部性，因?yàn)樗荒苡绊懕欢x的標(biāo)識(shí)符，而且在每個(gè)需要樣式的標(biāo)簽中都要進(jìn)行定義,這樣大量使用style屬性使代碼變得難以維護(hù),所以建議盡量少用。

2.2 整頁(yè)套用樣式

將所有樣式定義集中起來(lái)放在HTML文檔＜head＞＜/head＞之間,使用標(biāo)簽＜style＞＜/style＞將其包含起來(lái)。如:

這種樣式表只能在HTML文檔的內(nèi)部定義與使用,每個(gè)HTML文檔內(nèi)都需要單獨(dú)定義一套樣式規(guī)則,不利于樣式的重用,維護(hù)起來(lái)也相對(duì)麻煩,不宜大量使用。

2.3 外部樣式表

將所有樣式定義放在一個(gè)以.css為擴(kuò)展名，結(jié)尾的文件中,與HTML文件分開(kāi)存放。這樣一個(gè)樣式表文件可以被多個(gè)HTML文檔引用,CSS文件通過(guò)網(wǎng)絡(luò)單獨(dú)下載,一直都可以使用,甚至可以使用其他樣式表。

要在HTML文檔中使用外部樣式表有兩種方式,都是在head部分加入相應(yīng)代碼:

2.3.1 通過(guò)鏈接的方式。

加入＜l i n k h r e f="c s s/c s s 1.css"rel="stylesheet"type="text/css"/＞代碼來(lái)對(duì)CSS文件夾下css1.css樣式表的引用。

2.3.2 通過(guò)引入的方式。

加入＜style＞@import url(css/css1.css);＜/style＞。代碼來(lái)對(duì)CSS文件夾下css1.css樣式表的引用。

通過(guò)鏈接或引入的方式調(diào)用css1.css外部樣式表,我們就可以在HTML文檔中任意使用css1.css中定義的樣式。這種樣式表維護(hù)起來(lái)是最方便的,也顯著減少了HTML文檔大小,使得網(wǎng)頁(yè)的下載速度更快。所以我們推薦外部樣式表。

3、用CSS定義網(wǎng)頁(yè)中的樣式

3.1 用css 實(shí)現(xiàn)圖片等比例縮放

按比例縮小或者放大到某個(gè)尺寸，對(duì)于標(biāo)準(zhǔn)瀏覽器（如Firefox），或者最新都IE7,ie8瀏覽器，直接使用max-width,maxheight；或者min-width,min-height的CSS屬性即可。

如：img{max-width:100px;max-height:100px;}img{min-width:100px;min-height:100p

對(duì)于IE6及其以下版本的瀏覽器，則可以利用其支持的expression屬性，在css code中嵌入javascript code來(lái)實(shí)現(xiàn)圖片的縮放,

如下：.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7*/* html .thumbImage { /* for IE6 */width: expression(this.width ＞ 100&& this.width ＞ this.height ? 100: auto);height:expression(this.height ＞ 100? 100: auto);}

3.2 讓背景圖案靜止不動(dòng)

當(dāng)網(wǎng)頁(yè)不能在一屏全部顯示時(shí)，我們往往借助于水平滾動(dòng)條和豎直滾動(dòng)條來(lái)瀏覽屏幕以外的內(nèi)容，移動(dòng)滾動(dòng)條時(shí)一般圖像和文字是一起移動(dòng)的，那么我們有沒(méi)有辦法使背景圖像不隨文字一起“滾動(dòng)”呢？利用CSS就可以實(shí)現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁(yè)的與標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng)頁(yè)中的背景圖像，大家可以把它換成自己需要的背景圖像：

3.3 CSS用于文檔打印

許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來(lái)設(shè)定打印風(fēng)格。

也就是說(shuō)，可以為頁(yè)面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打印：

第1行就是顯示，第2行是打印，注意其中的media屬性。但應(yīng)該在打印CSS中寫什么東西呢？你可以按設(shè)計(jì)普通CSS的方法來(lái)設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS

設(shè)成顯示CSS來(lái)檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來(lái)關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。

3.4 讓網(wǎng)頁(yè)自動(dòng)進(jìn)行“首行縮進(jìn)”

用DreamWeaver來(lái)設(shè)計(jì)網(wǎng)頁(yè)的用戶知道，在DreamWeaver中輸入空格不是那么的方便，我們可以利用css來(lái)設(shè)計(jì)“首行縮進(jìn)”功能來(lái)彌補(bǔ)這個(gè)缺憾。打開(kāi)DreamWeaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對(duì)話框（Style Definition for .style1)，在該對(duì)話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項(xiàng)中來(lái)設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個(gè)新的段落。縮進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開(kāi)始縮進(jìn)兩個(gè)漢字，設(shè)置好的CSS如下所示：

但也可以把它們?nèi)繉懙揭恍猩先ィ?/p>

font: bold italic small-caps 1em/1.5em verdana,sans-serif

只有一點(diǎn)要提醒的：這種簡(jiǎn)寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒(méi)有設(shè)定font-weight,font-style, 以及 font-varient ，他們會(huì)使用缺省值。

3.6 圖片替換技巧

一般都建議用標(biāo)準(zhǔn)的HTML來(lái)顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時(shí)，就只能用圖片了。

比如你想整個(gè)賣東西的圖標(biāo)，你就用了這個(gè)圖片：

＜h1＞＜img src="widget-image.gif"alt="Buy widgets" /＞＜/h1＞

這當(dāng)然可以，但對(duì)搜索引擎來(lái)說(shuō)，和正常文字相比，它們對(duì)alt里面的替換文字幾乎沒(méi)有興趣這是因?yàn)樵S多設(shè)計(jì)者在這里放許多關(guān)鍵詞來(lái)騙搜索引擎。所以方法應(yīng)該是這樣的：

注意把image height 換成真的圖片的高度。這里，圖片會(huì)當(dāng)作背景顯示出來(lái)，而真正的文字由于設(shè)定了-2000像素這個(gè)縮進(jìn)，它們會(huì)出現(xiàn)在屏幕左邊2000點(diǎn)的地方，就看不見(jiàn)了。但這對(duì)于關(guān)閉圖片的人來(lái)說(shuō)，可能全部看不到了，這點(diǎn)要注意。

4、 用CSS設(shè)計(jì)網(wǎng)頁(yè)的實(shí)例

下面我們用CSS制作一個(gè)效果，在正常狀態(tài)下鏈接是一個(gè)靜止不動(dòng)的圖片，當(dāng)鼠標(biāo)移到鏈接區(qū)域，即在鼠標(biāo)的懸停狀態(tài)下，背景圖片變換成為另外一張圖片。

原理是利用a:hover改變圖片的顯示屬性。當(dāng)鼠標(biāo)不在圖片上時(shí)，是一個(gè)正常圖片，當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，a:hover發(fā)揮作用，圖片采用a:hover的樣式設(shè)計(jì)的內(nèi)容，變成另外一張圖片。

HTML代碼部分入下：

CSS編碼說(shuō)明：

menu部分，設(shè)置div容器的寬度為150px，設(shè)置上下外邊距為50px，左右為自動(dòng)實(shí)現(xiàn)水平居中對(duì)齊。

menu a部分，將鏈接元素轉(zhuǎn)換為塊元素，設(shè)置其寬度與高度。設(shè)置文本縮進(jìn)為160px，將鏈接文字“推”到了可視區(qū)域以外，但僅這樣做實(shí)現(xiàn)不了隱藏鏈接文本，緊接著設(shè)置強(qiáng)制文本在一行內(nèi)顯示，溢出為隱藏。設(shè)置鏈接的背景圖片為btn1.gif，不重復(fù)，位于00坐標(biāo)。

menu a:hover部分，設(shè)置鏈接的懸停狀態(tài)，僅將背景圖片改為btn2.gif。

5.結(jié)語(yǔ)

筆者介紹了CSS樣式的基本概念、引入方式、簡(jiǎn)單效果等，隨著網(wǎng)頁(yè)制作技術(shù)的不斷進(jìn)步，會(huì)有更多更好的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)出現(xiàn)，這就要求在以后的學(xué)習(xí)中要不斷總結(jié),不斷掌握新的技術(shù)，及時(shí)把握網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展動(dòng)向，多從實(shí)踐中注意總結(jié)經(jīng)驗(yàn)，這樣可以成為一個(gè)合格的網(wǎng)頁(yè)設(shè)計(jì)人員。

[1]于鵬.網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言教程（HTML/CSS）[M].北京：電子工業(yè)出版社，2003

[2]張?jiān)铝?網(wǎng)頁(yè)設(shè)計(jì)與編程[M].西安：西北工業(yè)大學(xué)出版社，2004

[3]王曉雨.CSS技術(shù)在WEB設(shè)計(jì)中的應(yīng)用,2008.6

10.3969/j.issn.1001-8972.2011.24.044