張靜

摘要：隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，網(wǎng)絡(luò)的功能日趨多樣化，通過(guò)網(wǎng)絡(luò)，不僅可以發(fā)揮其教育作用，還可以豐富人們的生活，目前，網(wǎng)絡(luò)已經(jīng)成為人們生活中必不可少的內(nèi)容，各式各樣的網(wǎng)站、網(wǎng)覓、網(wǎng)絡(luò)游戲、網(wǎng)絡(luò)軟件都對(duì)人們產(chǎn)生了重要的影響，尤其是網(wǎng)瓦在人們生活中占據(jù)著尤為重要的位置，在查找資料，了解知識(shí)的過(guò)程中，都離不開(kāi)網(wǎng)頁(yè)的支持，因而，文章進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，研究網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)內(nèi)容，具有重要的現(xiàn)實(shí)意義。

關(guān)鍵詞：CSS技術(shù)；網(wǎng)頁(yè)設(shè)計(jì)；應(yīng)用

CSS技術(shù)也被稱為層疊樣式表，是一種計(jì)算機(jī)語(yǔ)言，與C語(yǔ)言類似，在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)了重要的位置，利用CSS技術(shù)，可以有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，增加網(wǎng)頁(yè)的靈活性，有效進(jìn)行網(wǎng)頁(yè)鏈接，控制網(wǎng)頁(yè)文件大小，保證網(wǎng)頁(yè)的質(zhì)量?？偠灾芯緾SS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用十分必要。本文以此展開(kāi)研究，希望可以提出一點(diǎn)建議與思考，促進(jìn)CSS技術(shù)的發(fā)展，保證網(wǎng)頁(yè)設(shè)計(jì)效果。

1 CSS技術(shù)概述

CSS技術(shù)是一種計(jì)算機(jī)語(yǔ)言，也被稱為層疊樣式表，是一種文件樣式的計(jì)算機(jī)語(yǔ)言。CSS技術(shù)的主要功能是進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，不僅可以靜態(tài)修飾網(wǎng)頁(yè)，還可以對(duì)網(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)的修飾，增加網(wǎng)頁(yè)的設(shè)計(jì)感，提升網(wǎng)頁(yè)的感染力[1]。CSS技術(shù)作為文件樣式的計(jì)算機(jī)語(yǔ)言，可以對(duì)元素位置進(jìn)行精確的控$lj，有效控制排版，合理利用所有樣式的字體字號(hào)，具有網(wǎng)頁(yè)對(duì)象與模型的編輯能力。css技術(shù)作為一種標(biāo)記語(yǔ)言，作為一種樣式，具有顯著的特點(diǎn)：（1）具有豐富的樣式定義。在CSS技術(shù)應(yīng)用時(shí)，CSS技術(shù)為文檔樣式提供了豐富的外觀，保證了樣式的豐富性，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，CSS技術(shù)具有背景屬性能力以及文本設(shè)計(jì)能力，可以拉近元素間的距離，改變文本的大小，修飾方式，保證網(wǎng)頁(yè)設(shè)計(jì)效果。（2）方便修改和使用。CSS技術(shù)的樣式定義屬于style屬性中，可以在文檔中指定恰當(dāng)?shù)腃SS技術(shù)，方便HTML頁(yè)面的引用，可以利用CSS樣表將所有樣式進(jìn)行統(tǒng)一存放，方便使用與修改，以便進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。除此之外，利用CSS技術(shù)可以對(duì)相同樣式相同元素進(jìn)行歸類，對(duì)同一個(gè)樣式進(jìn)行定義，將樣式應(yīng)用到網(wǎng)頁(yè)設(shè)置過(guò)程中，指定到某個(gè)頁(yè)面中，方便樣式的修改。（3）具有層疊特點(diǎn)。層疊即疊加，簡(jiǎn)單地說(shuō)，層疊就是對(duì)一個(gè)元素進(jìn)行多次設(shè)置，通過(guò)層疊，可以在頁(yè)面設(shè)計(jì)過(guò)程中進(jìn)行恰當(dāng)?shù)奶幚?，利用CSS技術(shù)，在頁(yè)面中進(jìn)行元素層疊，可以對(duì)頁(yè)面樣式設(shè)置進(jìn)行重寫(xiě)，以便有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，達(dá)到理想的網(wǎng)頁(yè)設(shè)計(jì)效果。（4）多頁(yè)面應(yīng)用。在CSS技術(shù)應(yīng)用過(guò)程中，CSS樣式可以單獨(dú)放在CSS文件中，可以在多個(gè)頁(yè)面中運(yùn)用，實(shí)現(xiàn)多個(gè)頁(yè)面的風(fēng)格統(tǒng)一，保證網(wǎng)頁(yè)的協(xié)調(diào)性與美觀性。（5）頁(yè)面壓縮。在CSS技術(shù)應(yīng)用過(guò)程中，頁(yè)面壓縮是其中的主要特點(diǎn)，通過(guò)大量重復(fù)的表格，可以增加頁(yè)面文件大小，而減少頁(yè)面加載需要的時(shí)間，可以盡最大可能滿足用戶的要求，進(jìn)行頁(yè)面壓縮，發(fā)揮CSS技術(shù)的顯著優(yōu)勢(shì)[2]。

2 CSS技術(shù)存在的不足

CSS技術(shù)具有顯著的優(yōu)勢(shì)，不僅編寫(xiě)容易，還可以縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，發(fā)揮網(wǎng)頁(yè)的優(yōu)勢(shì)，還可以降低帶寬成本，提高易用行，更好地控制頁(yè)面布局，進(jìn)行字體控制與排版。但是，CSS技術(shù)也存在一定不足，出現(xiàn)了一些問(wèn)題，影響了CSS技術(shù)的有效開(kāi)展，不利于CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的有效應(yīng)用。CSS技術(shù)主要存在以下不足：（l）CSS技術(shù)經(jīng)常會(huì)出現(xiàn)兼容問(wèn)題，實(shí)用性不強(qiáng)。在CSS技術(shù)應(yīng)用過(guò)程中，將CSS技術(shù)應(yīng)用與網(wǎng)頁(yè)設(shè)計(jì)中會(huì)出現(xiàn)個(gè)別網(wǎng)站不識(shí)別、不相容等問(wèn)題。在IE瀏覽器中可以識(shí)別，在其他瀏覽器就可能出現(xiàn)不能顯示的問(wèn)題，影響了網(wǎng)頁(yè)的設(shè)計(jì)效果，在此情況下，書(shū)寫(xiě)代碼時(shí)需要注意瀏覽器的類別，防止出現(xiàn)錯(cuò)誤，影響網(wǎng)頁(yè)設(shè)計(jì)效果。（2）CSS技術(shù)設(shè)計(jì)檢驗(yàn)未通過(guò)校驗(yàn)。CSS技術(shù)在網(wǎng)頁(yè)校驗(yàn)過(guò)程中通過(guò)了W3C校驗(yàn)，但是未通過(guò)CSS2.0的校驗(yàn)，因而，CSS技術(shù)還是存在一些問(wèn)題，會(huì)在操作過(guò)程中被漏掉或者是意外結(jié)束。（3）CSS技術(shù)在使用時(shí)容易出現(xiàn)問(wèn)題，一旦存在書(shū)寫(xiě)不規(guī)范的情況，就會(huì)影響CSS技術(shù)的應(yīng)用，不利于網(wǎng)頁(yè)設(shè)計(jì)。在書(shū)寫(xiě)CSS技術(shù)時(shí)，不具備較好的書(shū)寫(xiě)習(xí)慣，未進(jìn)行十分規(guī)范的命名，就會(huì)出現(xiàn)多重定義，會(huì)出現(xiàn)不同的屬性默認(rèn)值，出現(xiàn)瀏覽器兼容問(wèn)題，不利于網(wǎng)頁(yè)設(shè)計(jì)，無(wú)法達(dá)到理想的網(wǎng)頁(yè)設(shè)計(jì)效果[3]?？偠灾?，CSS技術(shù)存在一定的不足，主要就是存在兼容問(wèn)題，但是，經(jīng)過(guò)正確規(guī)范地編碼，認(rèn)真地書(shū)寫(xiě)，仔細(xì)地檢驗(yàn)還是可以有效地避免兼容問(wèn)題，發(fā)揮CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)，實(shí)現(xiàn)CSS技術(shù)的有效應(yīng)用。

3 常用的網(wǎng)頁(yè)結(jié)構(gòu)

目前，常用的網(wǎng)頁(yè)結(jié)構(gòu)主要有5種，分別是國(guó)字型、Flash型、封面型、上下框架型以及左右框架型，下面進(jìn)行詳細(xì)的闡述。（1）國(guó)字型。國(guó)字型是最常見(jiàn)的一種類型，最上面時(shí)橫幅廣告以及網(wǎng)絡(luò)標(biāo)題，下面是網(wǎng)站的主要內(nèi)容，左右分列小條內(nèi)容，中間是主要內(nèi)容，最下面是網(wǎng)站的聯(lián)系方式、基本信息以及版權(quán)聲明。（2）Flash型。Flash型與封面型的結(jié)構(gòu)是相似的，這種形式的信息更加豐富，與傳統(tǒng)多媒體相似，具有較好的視覺(jué)效果與聽(tīng)覺(jué)效果，可以表達(dá)出豐富的信息與內(nèi)容，這種Flash型網(wǎng)頁(yè)結(jié)構(gòu)主要應(yīng)用于游戲網(wǎng)站以及校企網(wǎng)站，網(wǎng)頁(yè)容量較大[4]。（3）封面型。封面型基本是一些網(wǎng)站的首頁(yè)，通常會(huì)設(shè)置一些可以進(jìn)行其他網(wǎng)頁(yè)的鏈接，有的可以直接通過(guò)首頁(yè)的圖片鏈接進(jìn)入，網(wǎng)頁(yè)設(shè)計(jì)得較為精美，里面還設(shè)計(jì)了動(dòng)畫(huà)。（4）上下框架型。上下框架型與國(guó)字型類似，同樣是上下分為兩頁(yè)的框架。（5）左右框架結(jié)構(gòu)。左右框架結(jié)構(gòu)是一種分別兩頁(yè)的框架結(jié)構(gòu)，一般左邊是導(dǎo)航鏈接，一面是標(biāo)致與標(biāo)題，右面是正文以及相關(guān)內(nèi)容。

4 CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用注意事項(xiàng)

4.1 盡量使用外部CSS樣式

在CSS技術(shù)應(yīng)用過(guò)程中，CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮了重要的作用，通過(guò)盡量使用CSS技術(shù)以及形式，可以實(shí)現(xiàn)頁(yè)面的美化，實(shí)現(xiàn)風(fēng)格的統(tǒng)一，發(fā)揮重要的作用，直接關(guān)系到網(wǎng)頁(yè)設(shè)計(jì)效果。因此，盡量使用外部CSS樣式十分必要，可以達(dá)到理想的網(wǎng)頁(yè)設(shè)計(jì)效果，可以保證設(shè)計(jì)效率與質(zhì)量。盡量使用外部CSS樣式需要注意以下兩方面內(nèi)容，一方面，需要根據(jù)網(wǎng)頁(yè)特點(diǎn)，選擇恰當(dāng)?shù)木W(wǎng)頁(yè)結(jié)構(gòu)，選擇外部CSS樣式，達(dá)到理想的外部CSS樣式使用效果。另一方面，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，需要使用外部CSS技術(shù)樣式，可以盡可能減少CSS技術(shù)存在的不足，方便CSS技術(shù)在網(wǎng)頁(yè)中的設(shè)計(jì)應(yīng)用。

4.2 CSS技術(shù)對(duì)Web網(wǎng)頁(yè)樣式進(jìn)行控制

在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，對(duì)網(wǎng)頁(yè)樣式的設(shè)計(jì)多是通過(guò)CSS技術(shù)實(shí)現(xiàn)的，通過(guò)CSS技術(shù)，可以進(jìn)行頁(yè)面的布局和控制，可以進(jìn)行背景、字體等信息的控制，使用完全代碼進(jìn)行控制，確保網(wǎng)頁(yè)布局樣式的靈活性以及多樣性，有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，達(dá)到理想的網(wǎng)頁(yè)設(shè)計(jì)效果。一方面，利用CSS技術(shù)新型網(wǎng)頁(yè)布局設(shè)計(jì)，在網(wǎng)頁(yè)中產(chǎn)生表格，創(chuàng)設(shè)CSS文件，并對(duì)其進(jìn)行編輯，可以拋開(kāi)冗長(zhǎng)的密碼，對(duì)代碼進(jìn)行有效的控制，對(duì)CSS文件進(jìn)行修改。另一方面，CSS技術(shù)具有較強(qiáng)的字體控制能力，可以改變字體的樣式、顏色，使網(wǎng)頁(yè)中的字體更加漂亮，容易編排，爭(zhēng)取達(dá)到理想的文字控制效果，利用記事本打開(kāi)網(wǎng)頁(yè)，輸入相應(yīng)的代碼。

4.3 控制網(wǎng)頁(yè)連接

合理利用CSS技術(shù)十分重要，可以應(yīng)用于當(dāng)前網(wǎng)頁(yè)文件，還可以進(jìn)行隨意的連接，可以將CSS技術(shù)應(yīng)用于HTML頁(yè)面中，還可以將CSS代碼放入到外面文件中，利用HTML中的元素進(jìn)行有效的調(diào)用，縮短改版實(shí)踐，實(shí)現(xiàn)網(wǎng)站文化的最優(yōu)配置。由此可見(jiàn)，控制網(wǎng)頁(yè)鏈接十分必要，通過(guò)網(wǎng)絡(luò)連接，可以將CSS技術(shù)應(yīng)用于網(wǎng)頁(yè)樣式之中，有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，保證網(wǎng)頁(yè)設(shè)計(jì)質(zhì)量。

4.4 控制網(wǎng)頁(yè)文件大小

利用CSS技術(shù)，可以有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，控制網(wǎng)頁(yè)文件大小，保證文件質(zhì)量，確保工作的順利實(shí)施。由此可見(jiàn)，將CSS技術(shù)應(yīng)用于網(wǎng)絡(luò)之中，有效進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)十分必要，直接關(guān)系到網(wǎng)頁(yè)文件的控制?？刂凭W(wǎng)頁(yè)文件大小需要注意以下幾點(diǎn)：（1）為了呈現(xiàn)出較好的網(wǎng)頁(yè)設(shè)計(jì)效果，需要使用大量圖形，可以達(dá)到理想的設(shè)計(jì)效果，還可以增加網(wǎng)頁(yè)的精美性。但是，網(wǎng)頁(yè)文件過(guò)大，會(huì)導(dǎo)致網(wǎng)頁(yè)下載速度較慢，保證網(wǎng)站的可用性，提高頁(yè)面的瀏覽速度，確保頁(yè)面能夠較快地出現(xiàn)在放任著的窗口中，發(fā)揮網(wǎng)站的優(yōu)勢(shì)，增加訪問(wèn)量[5]。（2）利用CSS技術(shù)，通過(guò)層疊以及頁(yè)面壓縮，可以有效控制網(wǎng)頁(yè)文件大小，實(shí)現(xiàn)樣式與內(nèi)容的分離，節(jié)約文件尺寸，將網(wǎng)頁(yè)文件變小。

5 結(jié)語(yǔ)

研究CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用具有重要的價(jià)值，通過(guò)研究，可以發(fā)現(xiàn)CSS技術(shù)的優(yōu)勢(shì)與不足，實(shí)現(xiàn)CSS技術(shù)的優(yōu)化與組織，發(fā)揮其在網(wǎng)頁(yè)設(shè)計(jì)中的重要作用，有效地對(duì)網(wǎng)頁(yè)進(jìn)行修飾，保證網(wǎng)頁(yè)修飾效果，確保網(wǎng)頁(yè)設(shè)計(jì)工作的順利實(shí)施，爭(zhēng)取達(dá)到理想的網(wǎng)頁(yè)設(shè)計(jì)效果。

[參考文獻(xiàn)]

[1]王微.DIV+CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[J].電腦編程技巧與維護(hù)，2017（16）：73-75.

[2]武海麗，李彩玲.DIV+CSS技術(shù)在網(wǎng)頁(yè)制作與設(shè)計(jì)中的應(yīng)用研究[J].無(wú)線互聯(lián)科技，2016（6）：69-70.

[3]王國(guó)慶.探究基于DIV+CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)優(yōu)化方法[J].信息與電腦（理論版），2016（4）：140-141.

[4]張明.網(wǎng)頁(yè)設(shè)計(jì)中的CSS技術(shù)及優(yōu)化分析[J].信息與電腦（理論版），2016（2）：126-127.

[5]劉小艮.網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS布局技術(shù)的應(yīng)用實(shí)踐探討[J].無(wú)線互聯(lián)科技，2016（23）：34-35.