css層疊樣式表的開發(fā)與優(yōu)化

其他功能模式在以前的網(wǎng)站開發(fā)中，前網(wǎng)絡(luò)開發(fā)人員通常需要通過(guò)修改每個(gè)web標(biāo)記來(lái)控制網(wǎng)站的布局、顏色和字體的理想效果。而通常這些設(shè)置對(duì)于同一個(gè)站點(diǎn)的所有頁(yè)面而言都是相同的,不需要耗費(fèi)大量重復(fù)的勞動(dòng)去對(duì)這些進(jìn)行設(shè)置。所以后來(lái)就出現(xiàn)了CSS,通過(guò)CSS可以對(duì)頁(yè)面中的HTML屬性等信息進(jìn)行統(tǒng)一的設(shè)定,使用時(shí)只需要指定某一個(gè)標(biāo)簽的CSS樣式表即可實(shí)現(xiàn)對(duì)該標(biāo)簽屬性的控制,節(jié)省了前臺(tái)Web設(shè)計(jì)人員大量的工作時(shí)間。1.服務(wù)接口的發(fā)展CSS從CSS1到CSS3經(jīng)歷了十幾年的發(fā)展歷程,如下圖1所示:雖然CSS3從2001年就出現(xiàn)了,但是,由于不同瀏覽器對(duì)CSS3的支持程度不同,很多瀏覽器至今還不支持CSS3,所以對(duì)CSS3的發(fā)展有了很大的限制。在十幾年的發(fā)展過(guò)程中,CSS3在不斷地添加新的兼容功能,同時(shí)對(duì)于之前版本中存在的缺陷與不足也得到了較好的改善。最早的CSS版本CSS1.0只支持對(duì)最基礎(chǔ)的HTML標(biāo)簽,例如font、a、table等標(biāo)簽。CSS2添加了對(duì)媒介(打印機(jī)和聽覺(jué)設(shè)備)和可下載字體的支持。CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括:盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。2.3d屬性和不足2.1充分發(fā)揮了網(wǎng)頁(yè)背景的功能CSS3相比于之前版本有了較多的改進(jìn),主要有以下幾點(diǎn):(1)邊框的改進(jìn)。CSS3中對(duì)網(wǎng)頁(yè)中的邊框進(jìn)行了一些改進(jìn),主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。CSS3中最常用的一個(gè)改進(jìn)就是圓角邊框,標(biāo)準(zhǔn)的HTML方塊對(duì)象都是90°的,CSS3可以實(shí)現(xiàn)圓角的效果。使得原來(lái)刻板的方塊變得更加圓滑美觀。不僅僅是可以對(duì)整個(gè)方塊的四周實(shí)現(xiàn)圓角效果,還可以針對(duì)每個(gè)角進(jìn)行個(gè)別的圓角效果。當(dāng)然不同的瀏覽器的支持目前還不同。多邊框可以允許一個(gè)邊框存在多個(gè)外層邊框。同時(shí)還可以指定邊框的顏色和圖片等。(2)網(wǎng)頁(yè)背景。CSS3提供對(duì)網(wǎng)頁(yè)背景的定義功能,背景圖片/紋理有很多種使用方式,常常用于添加網(wǎng)站的最佳的最終美化。可以應(yīng)用多背景圖片和背景圖片的尺寸來(lái)實(shí)現(xiàn)完美的視覺(jué)效果。(3)創(chuàng)建網(wǎng)站的多列。通過(guò)創(chuàng)建網(wǎng)站的多列,就不用為沒(méi)列定制特定的層或者段落。與多背景圖片相同,CSS3多列也是非常實(shí)用的一個(gè)功能。可以設(shè)置網(wǎng)頁(yè)多列的高度與寬度。(4)嵌入字體。傳統(tǒng)的網(wǎng)頁(yè)只支持少量的字體,這對(duì)于喜歡更多自定義字體的站長(zhǎng)而言是一個(gè)很大的限制。從CSS3開始支持內(nèi)嵌字體,在CSS3中使用“@font-face”屬性就可以對(duì)一些內(nèi)嵌字體進(jìn)行使用。(5)漸變透明。通過(guò)CSS3可以方便快捷的實(shí)現(xiàn)漸變色與透明色,這些以往只能通過(guò)第三方美工軟件完成以及通過(guò)一些腳本文件才能實(shí)現(xiàn)的技術(shù),在有了CSS3之后變得非常方便。同時(shí)還可以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中圖像的透明度的控制。(6)設(shè)置顏色。CSS3中不僅僅支持設(shè)置RGB顏色模型的顏色,同時(shí)還可以支持設(shè)置HSL顏色模型的顏色。使得對(duì)于不同顏色模型有不同熟悉度的網(wǎng)站設(shè)計(jì)人員都可以靈活使用。(7)調(diào)整尺寸。CSS3可以方便調(diào)整元素的尺寸。使用相應(yīng)的代碼之后,元素右下角會(huì)出現(xiàn)一個(gè)小三角形以提示用戶這個(gè)元素是可以調(diào)整尺寸的,而且代碼十分簡(jiǎn)單。2.2ernet技術(shù)上面講述的這些CSS3功能會(huì)給你的網(wǎng)站帶來(lái)出色的效果,但仍有一些負(fù)面的因素必須考慮:(1)InternetExplorer:46%的Internet無(wú)法看到這些效果,因此不要將這些東西用于重要的設(shè)計(jì)。同時(shí)保證,在這些效果不起作用的地方,有替代設(shè)計(jì)可用。(2)CSS驗(yàn)證問(wèn)題:這些CSS3功能并非最終版本,目前不同的瀏覽器使用不同標(biāo)簽實(shí)現(xiàn)這些功能,可能為你的StyleSheet帶來(lái)驗(yàn)證上的問(wèn)題。(3)臃腫代碼:因?yàn)椴煌瑸g覽器要使用不同定義語(yǔ)法,最終將導(dǎo)致你的CSS代碼十分臃腫。(4)不當(dāng)?shù)氖褂?對(duì)這些效果的不當(dāng)使用,可能帶來(lái)一些不良后果,陰影效果尤其如此。3.應(yīng)用供應(yīng)鏈的例子(1)圓形邊灘的示例(2)塊陰影和文字陰影的示例塊陰影與文字陰影范例與代碼如下圖3所示:(3)嵌入式字體示例內(nèi)嵌字體范例與代碼如下圖4所示:4.tcp與table技術(shù)的比較通過(guò)對(duì)CSS的發(fā)展以及研究現(xiàn)狀的分析以及對(duì)CSS3特性的介紹可知未來(lái)的CSS3的發(fā)展將更加迅速,通過(guò)使用CSS3前端Web工程師可以更加方便快捷的建立網(wǎng)站頁(yè)面。而且通過(guò)CSS3所創(chuàng)建的頁(yè)面將更加的美觀。通過(guò)與HTML5技術(shù)相結(jié)合開發(fā)的網(wǎng)站將更符合目前互聯(lián)網(wǎng)環(huán)境下的用戶需求,CSS3雖然還存在很多方面的不足需要改進(jìn),同時(shí)不同瀏覽器對(duì)其的支持也需要相應(yīng)的加強(qiáng)和統(tǒng)一。相信隨著互聯(lián)網(wǎng)技