css技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用_第1頁
css技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用_第2頁
css技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

css技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

1層疊樣式表ss在過去幾年中，web的功能有了很大進(jìn)步，但文檔結(jié)構(gòu)與風(fēng)格的混合一直是web語言的一大缺陷。為了能夠讓網(wǎng)頁更好的在各種平臺(tái)上兼容,W3C標(biāo)準(zhǔn)化組織推出CSS規(guī)范,將描述樣式的內(nèi)容徹底地獨(dú)立于結(jié)構(gòu)文檔。CSS的英文全稱是CascadingStyleSheets,中文翻譯為“層疊樣式表”,簡(jiǎn)稱樣式表,它是一種制作網(wǎng)頁的便捷技術(shù)。它的主要用途如下:可以輕松地控制頁面的布局;使頁面的字體變得更漂亮,更容易編排,使頁面真正賞心悅目;你可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新,不用再一頁一頁地修改;以前一些非得通過圖片轉(zhuǎn)換實(shí)現(xiàn)的功能,現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn),從而可以更快地下載頁面;在幾乎所有的瀏覽器上都可以使用。正是層疊樣式表卓越的功能使得它在現(xiàn)在網(wǎng)頁設(shè)計(jì)中得到了廣泛的推廣與應(yīng)用。2ases應(yīng)用程序的形式2.1網(wǎng)頁風(fēng)格管理在HTML文件里加一個(gè)超級(jí)鏈接,引入外部的CSS文檔。這個(gè)方法最方便管理整個(gè)網(wǎng)站的網(wǎng)頁風(fēng)格,它讓網(wǎng)頁的文字內(nèi)容與版面設(shè)計(jì)分開。只要在一個(gè)CSS文檔內(nèi)(擴(kuò)展名為CSS)定義好網(wǎng)頁的風(fēng)格,然后在網(wǎng)頁中加一個(gè)超級(jí)鏈接連接到該文檔,那么網(wǎng)頁就會(huì)按照在CSS文檔內(nèi)定義好的風(fēng)格顯示出來。2.2形成文件的文件這種方式與外部鏈接式的區(qū)別在于它是將風(fēng)格直接定義在文檔頭<head>和</head>標(biāo)簽之間,而不形成文件。這種風(fēng)格定義產(chǎn)生作用的范圍也只限于本文檔,格式如下:2.3段+時(shí)長(zhǎng)對(duì)風(fēng)格的確定在HTML文件的文本內(nèi)容中,隨時(shí)有需要,可隨時(shí)加一小段CSS的描述指定風(fēng)格。如規(guī)定一個(gè)Table標(biāo)簽中字體為紅色,字體大小為10pt,則可書寫為:這個(gè)方法主要用于對(duì)具體的標(biāo)簽做具體的調(diào)整,其作用范圍只限于本標(biāo)簽。2.4輸出屬性疊加如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí),這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表,遇到?jīng)_突的地方將以最后定義的為準(zhǔn)。例如,我們首先鏈入一個(gè)外部樣式表,其中定義了h3選擇符的color、text-alig和font-size屬性:h3{color:red;text-align:left;font-size:8pt;}。然后在內(nèi)部樣式表里也定義了h3選擇符的text-align和font-size屬性:h3{text-align:right;font-size:20pt;}。那么這個(gè)頁面疊加后的樣式就是:color:red;text-align:right;font-size:20pt;字體顏色從外部樣式表里保留下來,而對(duì)齊方式和字體尺寸都按照后定義的內(nèi)部樣式表執(zhí)行。因此,多重樣式表疊加時(shí),執(zhí)行規(guī)則為后定義優(yōu)先的原則。3減少圖像質(zhì)量為了讓網(wǎng)站能夠更快,Web的建設(shè)者都會(huì)按常規(guī)地壓縮和優(yōu)化網(wǎng)站上的圖像文件,這常常使得為了將文件的大小減少幾個(gè)百分點(diǎn)而犧牲了圖像的質(zhì)量,影響網(wǎng)站的美觀。由CSS樣式表是純文本文件,和圖像相比相對(duì)較小,所以Web建設(shè)者很少考慮采取措施減少CSS樣式表文件的大小。但是,通過使用CSS縮寫以及其他的一些簡(jiǎn)單技巧,就可以在很大程度上減少樣式表的大小。在對(duì)樣式表的優(yōu)化測(cè)試中發(fā)現(xiàn),可以讓其文件的大小降低25-50%。3.1在圖形中組合一個(gè)/屬性CSS的縮寫性質(zhì)(shorthandproperty)是一些專用的性質(zhì)名,用來代替多個(gè)相關(guān)性質(zhì)的集合。例如,間隙性質(zhì)(paddingproperty)是頂部間隙(padding-top)、右側(cè)間隙(padding-right)、底部間隙(padding-bottom)和左側(cè)間隙(padding-left)的縮寫。使用縮寫性質(zhì)能夠把多個(gè)性質(zhì)/屬性對(duì)壓縮進(jìn)CSS樣式表的一行代碼里。例如下面的代碼:將它用一些縮寫性質(zhì)來替代就能夠把代碼減少,兩者的實(shí)際效果完全一樣:此外,縮寫性質(zhì)還有多個(gè)屬性,每一個(gè)(屬性)都對(duì)應(yīng)一個(gè)被組合進(jìn)入縮寫性質(zhì)的常規(guī)性質(zhì)。屬性由空白隔開。當(dāng)屬性是類似的值的時(shí)候,連接在縮寫性質(zhì)之后的屬性的順序很重要。屬性的次序是從頂部開始,然后圍繞格子(box)按順時(shí)針次序繼續(xù)。如果縮寫性質(zhì)的所有屬性都是相同的,那么你可以簡(jiǎn)單地列出單個(gè)屬性,省略后面三項(xiàng)的書寫。因此,下面的兩個(gè)屬性設(shè)置是相同的:屬性的順序在它們是不相似的值的時(shí)候是不重要的。因此,邊框顏色、邊框風(fēng)格和邊框?qū)挾鹊葘傩钥梢砸匀魏雾樞蚪釉诖缶V性質(zhì)(outlineproperty)之后。忽略某個(gè)屬性等同于從樣式規(guī)則里忽略掉對(duì)應(yīng)的常規(guī)性質(zhì)。3.2檢測(cè)樣式的改進(jìn)代碼重用是CSS的優(yōu)勢(shì)之一,雖然基本的CSS編寫已經(jīng)使網(wǎng)站中大部分樣式代碼得到了重用,但是基于設(shè)計(jì)者本身的原因,CSS的眾多樣式中往往有很多樣式代碼一樣,但沒有得到很好的重用,例如如下CSS代碼:這段代碼是用于一篇文章頁面顯示的CSS樣式表,通過CSS對(duì)頁面的各個(gè)元素進(jìn)行了定義,編寫了樣式,并成功的在瀏覽器中達(dá)到了預(yù)想的效果。代碼雖然簡(jiǎn)單,但是如果仔細(xì)看,會(huì)發(fā)現(xiàn)其實(shí)還可以繼續(xù)優(yōu)化使CSS更簡(jiǎn)單。在頁面中我們發(fā)現(xiàn)有不少元素都具有相同的屬性,如body與#contentul都有margin;0px;而#nav與#content都具有相同的padding值,因此可以從這兩個(gè)地方入手將代碼進(jìn)行合并優(yōu)化,找出其中相似的代碼,通過群組選擇符進(jìn)行樣式的集中,改進(jìn)后的代碼如下:改進(jìn)后的代碼我們使用了群組選擇符,將大部分公用代碼進(jìn)行了集合,如因?yàn)轫撁嬷写蟛糠衷囟季哂械膍argin:0px;屬性,因此使用*選擇符直接對(duì)頁面中所有元素進(jìn)行margin與padding值的設(shè)置,本頁中的#header與鏈接都采用白色,因此使用#header,a選擇符將兩個(gè)白色放置在了一起,以此類推,將頁面中公共選擇全部進(jìn)行了集中編寫,而剩下的各個(gè)部分的代碼相當(dāng)簡(jiǎn)單,而這些公共屬性在實(shí)際編碼中相當(dāng)于只使用了一句代碼就完成了對(duì)大多數(shù)元素的設(shè)置。3.3ss樣式的公共屬性前文我們已經(jīng)討論了多重樣式表的疊加,得出了后定義優(yōu)先的原則,利用這一原則,可以使用覆蓋方式使得代碼得到重用,如以下CSS樣式:對(duì)于這樣的一段CSS樣式,已經(jīng)根據(jù)代碼重用的原則將其公共屬性使用群組選擇符進(jìn)行了共用,但是仔細(xì)分析3個(gè)樣式的邊框?qū)傩?除了顏色不同之外,并沒有別的不同。這時(shí)我們可以將其歸為公共屬性,通過單獨(dú)的顏色修改來控制各個(gè)不同的樣式,優(yōu)化后的樣式如下:優(yōu)化后的代碼,使3個(gè)樣式都具有了一種顏色的邊框設(shè)置,在根據(jù)每一個(gè)樣式的邊框顏色有所不同,我們只需要用border-color設(shè)置新的顏色即可,新的顏色將覆蓋掉之前的樣式設(shè)置,從而實(shí)現(xiàn)了使用覆蓋進(jìn)行優(yōu)化。4層疊樣式表的優(yōu)化方法在本文中,對(duì)CSS技術(shù)進(jìn)行了詳細(xì)闡述。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論