CSS在網(wǎng)頁開發(fā)中的運用技巧

鞏恩偉

CSS在網(wǎng)頁開發(fā)中的運用技巧

鞏恩偉

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

CSS ；樣式；實例

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

1、樣式的基本格式

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

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

選擇符{屬性: 屬性值}

1.1 選擇符：可以是HTML的標識符，例如＜TABLE＞、＜h1＞、＜font＞等。

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

1.3 屬性值：相應屬性的取值。

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

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

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

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

內(nèi)聯(lián)樣式具有局部性，因為它只能影響被定義的標識符，而且在每個需要樣式的標簽中都要進行定義,這樣大量使用style屬性使代碼變得難以維護,所以建議盡量少用。

2.2 整頁套用樣式

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

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

2.3 外部樣式表

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

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

2.3.1 通過鏈接的方式。

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

2.3.2 通過引入的方式。

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

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

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

3.1 用css 實現(xià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

對于IE6及其以下版本的瀏覽器，則可以利用其支持的expression屬性，在css code中嵌入javascript code來實現(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 讓背景圖案靜止不動

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

3.3 CSS用于文檔打印

許多網(wǎng)站上都有一個針對打印的版本，但實際上這并不需要，因為可以用CSS來設定打印風格。

也就是說，可以為頁面指定兩個CSS文件，一個用于屏幕顯示，一個用于打印：

第1行就是顯示，第2行是打印，注意其中的media屬性。但應該在打印CSS中寫什么東西呢？你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS

設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導航按鈕。

3.4 讓網(wǎng)頁自動進行“首行縮進”

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

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

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

只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight,font-style, 以及 font-varient ，他們會使用缺省值。

3.6 圖片替換技巧

一般都建議用標準的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了。

比如你想整個賣東西的圖標，你就用了這個圖片：

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

這當然可以，但對搜索引擎來說，和正常文字相比，它們對alt里面的替換文字幾乎沒有興趣這是因為許多設計者在這里放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的：

注意把image height 換成真的圖片的高度。這里，圖片會當作背景顯示出來，而真正的文字由于設定了-2000像素這個縮進，它們會出現(xiàn)在屏幕左邊2000點的地方，就看不見了。但這對于關閉圖片的人來說，可能全部看不到了，這點要注意。

4、 用CSS設計網(wǎng)頁的實例

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

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

HTML代碼部分入下：

CSS編碼說明：

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

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

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

5.結(jié)語

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

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

[2]張月玲.網(wǎng)頁設計與編程[M].西安：西北工業(yè)大學出版社，2004

[3]王曉雨.CSS技術在WEB設計中的應用,2008.6

10.3969/j.issn.1001-8972.2011.24.044