基于css層疊樣式表的webweb設(shè)計

基于css層疊樣式表的webweb設(shè)計

web設(shè)計理念自20世紀(jì)90年代以來，1895年的le確立了web語言。web標(biāo)準(zhǔn)從1.0擴(kuò)展到4.0。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，web語言的有限域也得到了顯示，例如，web結(jié)構(gòu)非常簡單，數(shù)據(jù)和性能非?；旌稀eb設(shè)計者不再滿足簡單的設(shè)計實現(xiàn)美觀的網(wǎng)頁,他們提出的新的需求,在Web設(shè)計中采用Web標(biāo)準(zhǔn)建站,這樣建站的優(yōu)點(diǎn)是:代碼簡潔,提高網(wǎng)頁訪問速度;網(wǎng)站改版簡單,因為結(jié)構(gòu)、表現(xiàn)和行為分離,只需修改CSS文件可實現(xiàn)所有頁面的改變。CSS層疊樣式表單(CascadingStyleSheet)是將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。Web設(shè)計中對于網(wǎng)頁樣式的控制是通過CSS層疊樣式表來實現(xiàn)的,CSS就是設(shè)置網(wǎng)頁上HTML元素屬性的語言。下面就從頁面背景、網(wǎng)站導(dǎo)航超級鏈接和頁面布局3個方面研究CSS在Web設(shè)計中的應(yīng)用。1網(wǎng)絡(luò)風(fēng)格的應(yīng)用1.1網(wǎng)頁文件的創(chuàng)建在Web設(shè)計的過程中,我們要重視色彩的應(yīng)用,首先映入眼簾的是網(wǎng)站的色彩,因此,在頁面中控制背景通常是網(wǎng)站設(shè)計時一個很重要的步驟。CSS允許應(yīng)用純色作為背景,也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。純色背景用到背景顏色background-color屬性,相關(guān)的屬性值是RGB顏色分量、十六進(jìn)制顏色值和顏色英文關(guān)鍵詞。此屬性不僅可以設(shè)置頁面的背景顏色,幾乎所有的HTML元素的背景色都可以通過它來設(shè)定,這樣可以設(shè)定不同的HTML元素的各種背景色來實現(xiàn)頁面分塊。我們在網(wǎng)頁代碼中看到語句“background-color:#0000FF”,指的是把網(wǎng)頁背景色設(shè)置為藍(lán)色。背景圖像的創(chuàng)建用到背景圖片background-image屬性,相關(guān)的屬性值url()。在Web設(shè)計中,圖片一般存放在文件夾images里,因此,如在網(wǎng)頁中看到語句background:url(images/bg.gif),此句中的url為相對路徑,指使用的背景圖片為bg.gif,存放在images文件夾中。在網(wǎng)頁中,我們經(jīng)常會看到一種漸變背景,用Dreamweaver結(jié)合著Photoshop軟件可以自行創(chuàng)建漸變背景,然后使用CSS來針對漸變背景圖片進(jìn)行設(shè)置,實現(xiàn)步驟如下:首先運(yùn)用Photoshop軟件創(chuàng)建一個圖片文件,將前景色設(shè)置為5CACFE,背景色設(shè)置FFFFFF;使用“漸變工具”,自上而下拉,填充圖片文件。其次,使用“單列選擇”工具選擇1像素寬、700像素高的頁面,另存為bg.gif格式,再次,頁面文件的制作。創(chuàng)建一個網(wǎng)頁文件,設(shè)置其頁面內(nèi)嵌樣式表的聲明。在CSS中添加body屬性,對圖片設(shè)定水平方向重復(fù)顯示。在屬性中添加與圖片底部顏色一致的頁面背景色。1.2超鏈接技術(shù)的實現(xiàn)在網(wǎng)站中,所有的頁面通過超級鏈接而形成一個有機(jī)的整體。因此,在Web設(shè)計中對超級鏈接的控制是CSS的一個重要的應(yīng)用,而實現(xiàn)超鏈接技術(shù)的關(guān)鍵在于a鏈接對象的樣式控制,CSS鏈接樣式如下:a:link指未被訪問過的鏈接;a:active指正在點(diǎn)擊的鏈接;a:hover是鼠標(biāo)懸停時的樣式;a:visited是鏈接地址被訪問過時的樣式。通過CSS來設(shè)置超鏈接有無下劃線、超鏈接文字顏色等樣式。1.2.1鼠標(biāo)文化修改加下劃線默認(rèn)的超級鏈接會有下劃線,這樣會影響美觀,可以對網(wǎng)頁所有超級鏈接設(shè)為無下劃線,當(dāng)鼠標(biāo)經(jīng)過時改變文字顏色并加下劃線,核心代碼為:a{color:#333;text-decoration:none;}a:hover{color:#333;text-decoration:underline;}1.2.2像樣式的設(shè)計原理用小圖形取代文字作為鏈接按鈕,可以使網(wǎng)頁更為美觀?？墒褂胋ackground屬性給超級鏈接添加背景圖片,并可實現(xiàn)超級鏈接翻轉(zhuǎn)效果,帶背景圖像樣式的設(shè)計核心是:準(zhǔn)備兩張相同大小但不同效果的背景圖片,一張圖片用在a標(biāo)簽上,即是超級鏈接的背景;另一張圖片應(yīng)用在hover偽類上,當(dāng)鼠標(biāo)滑過超級鏈接時,背景圖片更換為應(yīng)用在hover偽類上的背景圖片,核心代碼如下:a{background:url(../images/img1.jpg)?repeat-x;}a:hover{background:url(../images/img2.jpg)repeat-x;}1.2.3boear-清水色按鈕立體樣式的設(shè)計核心:一是利用邊框線的顏色變化來制造視覺錯覺,把右邊框和底部邊框結(jié)合,把頂部邊框和左邊框結(jié)合,利用顏色的深淺變化來模擬一種凸凹變化的過程;二是利用超鏈接背景的變化來實現(xiàn)立體效果,超鏈接背景可設(shè)置相對深色效果,當(dāng)鼠標(biāo)移過時,再定義淺色,核心代碼如下:a:link,a:visited{……background-color:#efd6d9;border-top:1pxsolid#e3dfdf;/*邊框?qū)崿F(xiàn)陰影效果/border-left:1pxsolid#e3dfdf;border-bottom:1pxsolid#676565;border-right:1pxsolid#676565;}a:hover{……background-color:#e7c4ca;/*改變背景色/border-top:1pxsolid#676565;/*邊框變換實現(xiàn)凸凹效果/border-left:1pxsolid#676565;border-bottom:1pxsolid#e3dfdf;border-right:1pxsolid#e3dfdf;}1.3頁面結(jié)構(gòu)的實現(xiàn)2005年之前Web設(shè)計主要是使用表格布局頁面,但是隨著網(wǎng)頁制作技術(shù)的發(fā)展,表格布局頁面存在著代碼冗余、后臺代碼多、網(wǎng)速慢等問題,因此,出現(xiàn)了流行的頁面布局方式DIV+CSS技術(shù),DIV+CSS布局是利用Div對象把頁面劃分為幾個區(qū)域,區(qū)域中標(biāo)記了將要顯示的信息,而這些信息的樣式表現(xiàn)則由CSS來實現(xiàn)。如圖1所示,頁面使用<div>標(biāo)記把網(wǎng)頁分成頭部(#header),內(nèi)容部分(#main)和底部(#footer)3個塊,內(nèi)容部分分成左側(cè)(#left)和右側(cè)(#right),這是頁面的布局結(jié)構(gòu);CSS樣式可對這些塊進(jìn)行定位、添加樣式;然后對每個塊內(nèi)添加相應(yīng)的內(nèi)容,如文字、圖片等;因CSS樣式與HTML文件內(nèi)容分離,并且HTML文件調(diào)用CSS文件,如果要改變HTML文件中的內(nèi)容,只需要更改CSS樣式文件,這樣使網(wǎng)站的維護(hù)和更新變得更方便。圖1中的結(jié)構(gòu)設(shè)計代碼如下:頁面整體布局的大區(qū)塊劃分DIV用ID標(biāo)識,ID要求命名唯一;整體布局中大區(qū)塊下的小塊,樣式放到類樣式中,然后使用class應(yīng)用該樣式。2使用網(wǎng)絡(luò)時，應(yīng)注意以下幾點(diǎn)2.1背景重復(fù)的同化學(xué)法書寫CSS代碼時,采用樣式的簡寫形式,方便修改與維護(hù)。常見的背景(background)、邊界(margin)、填充(padding)、邊框(border)常需要進(jìn)行縮寫,背景的CSS縮寫形式為:background(背景):背景附件、背景顏色、背景圖像、背景位置、背景重復(fù)。用縮寫性質(zhì)來代替,可將代碼簡寫為:.search{background:#3c3b3burl(images/icon.gif)no-repeat50%50%}對于邊界(margin)、填充(padding)縮寫時屬性的次序是從頂部開始的,圍繞盒子按順時針次序繼續(xù)。margin:頂部邊界、右側(cè)邊界、底部邊界、左側(cè)邊界padding:頂部填充、右側(cè)填充、底部填充、左側(cè)填充border:邊框?qū)挾?、邊框風(fēng)格、邊框顏色.submain{margin-top:50px;margin-right:30px;margin-bottom:22px;margin-left:30px;padding-top:3px;padding-right:6px;padding-bottom:5px;padding-left:9px;border-width:1px;border-style:solid;border-color:#000;}用縮寫性質(zhì),可將代碼縮寫為:2.2產(chǎn)品目錄兩種方式當(dāng)遇到屬性和值相同的選擇符,如“#”和“.”,可以用逗號進(jìn)行分隔,如“#logo,#head{float:left:},.contact_tel,.contact_mobile{margin-right:8px;padding-left:20px;}這樣只需要書寫一次或者更改一次即可實現(xiàn),這樣做減少了CSS代碼量,同時也改善了CSS的代碼結(jié)構(gòu)?？紤]到不同瀏覽器對CSS支持的程度不同,可以通過通配符定義將所有元素的填充、邊框