網(wǎng)頁設(shè)計(jì)中的CSS 技術(shù)及優(yōu)化分析論文

　　1 CSS 技術(shù)特點(diǎn)

　　互聯(lián)網(wǎng)剛興起時(shí)，網(wǎng)頁缺少動(dòng)感，布局內(nèi)容也有許多因素限制，設(shè)計(jì)起來難度較多。即使專業(yè)的HTML 技術(shù)人員，在網(wǎng)頁設(shè)計(jì)中也需要通過不斷測(cè)試，才能掌握網(wǎng)頁中的信息排版，在這樣的背景下，樣式表應(yīng)時(shí)而生，CSS技術(shù)具有以下特點(diǎn)。對(duì)網(wǎng)頁中的元素進(jìn)行精準(zhǔn)定位。網(wǎng)頁設(shè)計(jì)者在網(wǎng)頁設(shè)計(jì)中，如同導(dǎo)演，網(wǎng)頁中圖片、文字就是演員，網(wǎng)頁設(shè)計(jì)人員依據(jù)要求使“演員”扮演好自己的角色，操控起來十分簡(jiǎn)單。將網(wǎng)頁中的格式控制與網(wǎng)頁中的內(nèi)容分離。網(wǎng)頁瀏覽者在瀏覽過程中，面對(duì)是網(wǎng)站內(nèi)容結(jié)構(gòu)，為了幫助瀏覽者更好地查看網(wǎng)頁中的信息，在設(shè)計(jì)中需要合理利用格式控制，將的內(nèi)容與格局分離，從而對(duì)網(wǎng)頁布局進(jìn)行更加合理的控制，即將CSS 代碼獨(dú)立，從另一角度實(shí)現(xiàn)對(duì)頁面布局和外觀的控制。頁面布局的控制。通過CSS 技術(shù)，能夠事項(xiàng)對(duì)HTML的有效控制，并且可以在網(wǎng)頁中對(duì)圖像的位置進(jìn)行準(zhǔn)確定位。制作體積加載更快。體積更小的網(wǎng)頁，CSS 樣式只是簡(jiǎn)單的'文本，在設(shè)計(jì)中不需要執(zhí)行程序、圖像、插件，在執(zhí)行上就如同HTML 中的指令一樣快。

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

　　2.1 外部樣式表

　　外部樣式主要適用網(wǎng)頁中存在多個(gè)副面，外部樣式表一文件存儲(chǔ)的情況，通常情況下文件的擴(kuò)展名為.css。網(wǎng)絡(luò)頁面中應(yīng)用外部樣式，可以將多個(gè)網(wǎng)頁與.css 文件進(jìn)行連接，通過改變一個(gè).css 文件中的內(nèi)容對(duì)整個(gè)網(wǎng)站的布局進(jìn)行調(diào)整。例如m.css 需要將 添加到文檔頭部，將去作為標(biāo)簽，具體方式代碼如下：

　　css”/>

　　. . . . . . . . .

　　在網(wǎng)頁設(shè)計(jì)過程中，可以通過外部文件，對(duì)編輯中的文本進(jìn)行編輯，但是在編輯中需要注意，不能出現(xiàn)任何HTML中的代碼，例如：

　　p{color: red;font-size:14px;}

　　body{background-color:#FFDFFD}

　　其中color 為屬性，red 為值;font-size 為屬性，14px 為值;background-color 為屬性，#FFDFFD 為值。

　　2.2 內(nèi)部樣式表

　　如果一個(gè)在網(wǎng)頁設(shè)計(jì)中，不需要特殊樣式，通常為簡(jiǎn)化，都采用內(nèi)部樣式，可以將

　　p{color:red;font-size:14px;}

　　body{background-color:#FFDFFD}

　　??

　　內(nèi)部樣式與外部樣式相比，更加簡(jiǎn)單實(shí)用，在網(wǎng)站頁面頭部，輸入同一樣式，可使網(wǎng)站中所有頁面都呈現(xiàn)統(tǒng)一的樣式。

　　2.3 內(nèi)聯(lián)樣式表

　　網(wǎng)頁設(shè)計(jì)中內(nèi)連樣式表，可以將style 參數(shù)直接加入到HTML中，添加的參數(shù)就是CSS 多屬性與值，內(nèi)嵌的樣式如下：

　　設(shè)計(jì)中，內(nèi)聯(lián)樣式表與其它兩種樣式相比，使用率相對(duì)少，主要這種方式不容易在網(wǎng)頁中重復(fù)使用，如果上述的p 元素在網(wǎng)頁設(shè)計(jì)中重復(fù)式樣，網(wǎng)頁會(huì)將p 元素定義為完全重復(fù)，樣式屬性也會(huì)出現(xiàn)重復(fù)，會(huì)加大對(duì)網(wǎng)頁的維護(hù)和閱讀難度。

　　3 優(yōu)化CSS 代碼

　　在網(wǎng)頁設(shè)計(jì)中，為了使網(wǎng)站能夠快速的顯示出來，Web創(chuàng)建者在實(shí)際操作中，需要對(duì)網(wǎng)站中的圖像文件進(jìn)行壓縮。CSS 樣式表是純文本文件，所占內(nèi)存較小，在設(shè)計(jì)中不需要進(jìn)行壓縮，但在應(yīng)用過程中，也有一些方法可以使其格式縮小20% ～ 50%。

　　3.1 縮寫性質(zhì)

　　利用專用性質(zhì)名取代相關(guān)性質(zhì)集合。例如，paddingtop、padding-left 等性質(zhì)在CSS 帶面中就可以進(jìn)行縮寫。在網(wǎng)頁設(shè)計(jì)中可以通過以下代碼代替復(fù)雜的代碼。

　　.body{margin:12px 18px 20px 24px;padding:4px 8px

　　6px 5px

　　Border-top： thin solid #000000;｝

　　此外，在對(duì)縮寫性質(zhì)進(jìn)行應(yīng)用中，屬性之間的間隔通過空白完成。如果屬性之間出現(xiàn)類似值時(shí)，要注重連續(xù)屬性的順序，屬性由頂部開始，依照順時(shí)針順序進(jìn)行。如果縮寫性質(zhì)相同，可以簡(jiǎn)單羅列單個(gè)屬性，將后面的三項(xiàng)屬性縮寫。

　　3.2 通過樣式覆蓋簡(jiǎn)化代碼

　　如下CSS 樣式

　　.a,

　　.b,

　　.c {font- size;10px;padding:10px;width:200px;

　　background- color:black }

　　.a {border:2px solid red;}

　　.b {border:2px solid blue;}

　　對(duì)以上這段CSS 樣式進(jìn)行分析，可以發(fā)現(xiàn)，三個(gè)樣式邊框?qū)傩裕祟伾馄溆嗖⒄`差別，因此可以將無差別的屬性進(jìn)行歸納在一起，對(duì)顏色進(jìn)行單獨(dú)控制，優(yōu)化的樣式如下：

　　.a,

　　.b,

　　.c {font- size;10px;padding:10px;width:200px;

　　background- color:black;border:2px solid：red}

　　.2 {border:2px solid blue;}

　　.3 {border:2px solid black;}

　　優(yōu)化后代碼能夠?qū)崿F(xiàn)與原代碼一樣的效果，代碼的屬性變得更加簡(jiǎn)單。

　　3.3 提高代碼重復(fù)率

　　重復(fù)使用代碼是CSS 在網(wǎng)頁設(shè)計(jì)上的主要優(yōu)勢(shì)，多數(shù)網(wǎng)站設(shè)計(jì)中，對(duì)CSS 中的代碼已經(jīng)進(jìn)行了重復(fù)利用，但受設(shè)計(jì)者自身影響，并沒有得到合理的重復(fù)使用。在CSS 代碼編寫中，應(yīng)當(dāng)盡力避免重復(fù)的元素屬性值多次編寫。

　　4 結(jié) 語

　　現(xiàn)代網(wǎng)頁設(shè)計(jì)中對(duì)CSS 技術(shù)的應(yīng)用十分廣泛，在應(yīng)用CSS 技術(shù)過程中，不僅需要注意應(yīng)用的合理性，同時(shí)應(yīng)當(dāng)通過分析，采取相應(yīng)的方式，簡(jiǎn)化CSS 代碼，使其變得更加合理、簡(jiǎn)潔。

【網(wǎng)頁設(shè)計(jì)中的CSS 技術(shù)及優(yōu)化分析論文】相關(guān)文章：

1.網(wǎng)頁設(shè)計(jì)教學(xué)中DIV+CSS布局的運(yùn)用論文

2.網(wǎng)頁設(shè)計(jì)中的色彩搭配分析論文

3.分析美學(xué)在網(wǎng)頁設(shè)計(jì)中的表現(xiàn)手段論文

4.總圖運(yùn)輸設(shè)計(jì)的技術(shù)優(yōu)化分析論文

5.火電機(jī)組優(yōu)化運(yùn)行關(guān)鍵技術(shù)分析論文

6.Flash在網(wǎng)頁設(shè)計(jì)中的應(yīng)用論文

7.網(wǎng)頁設(shè)計(jì)中的扁平化設(shè)計(jì)分析論文

8.“網(wǎng)頁設(shè)計(jì)與制作”課程中的應(yīng)用分析論文