網頁設計技術論文
網頁是組成網際網路的最基本要素，其在網際網路中扮演著極其重要的角色。下面是由小編整理的，謝謝你的閱讀。
篇一
網頁設計中的CSS應用技術
【摘 要】本文從講述CSS產生的背景過渡到解釋什麼是CSS技術，CSS與網頁的關係等。雖然目前我們使用的CSS技術已經能精確控制網頁的整體佈局、提高網頁程式碼的重用率、能簡化HTML靜態網頁中的各種繁瑣標記、提升網頁在網際網路上的傳輸連率、使得網頁的更新與維護變得方便。但是在一些實際的使用過程中，由於CSS技術依然存在不少缺陷，因此還是需要進行一些區域性的優化操作。
【關鍵詞】CSS技術 CSS與網頁相關性 CSS缺陷 區域性優化
一、引言
從網路誕生到發展至今.HTML的功能也隨著網路的發展而日趨完善。然而，網頁內容跟控制樣式夾雜混合一直是網頁設計語言的一大缺陷。為了能夠使網頁具有更好的相容性，全球資訊網聯盟制定出統一的CSS規範，把需要利用樣式來控制的內容徹底地從網頁中分離出來。
二、什麼是CSS
CSS的全稱是Cascading Style Sheets，中文又稱為“層疊樣式表”，是一種用於控制網頁頁面佈局的便捷技術，可以較輕鬆地控制頁面的佈局，使頁面的元素變得合一;與此同時，它不再需要一頁一頁地修改單個頁面***假設每個頁面都是修改相同的部分***，而可以將多個網頁的風格同時進行更新;並且由於CSS具有非常好的相容性，幾乎能在所有瀏覽器上使用。因此CSS技術在現代網頁設計中得到了非常廣泛的應用。
三、CSS的產生背景
CSS是全球資訊網聯盟組織為了克服HTML語言在設計網頁樣式時的不足而制定出的擴充套件樣式標準。CSS在各個方面不僅原本繼承了HTML各種標記的屬性設定***即樣式*** ，同時還擴充了HTML中沒有實現的功能區，比如它能夠通過VBScript程式等設計語言來控制網頁，這樣便能實現有效地對網頁的外觀和佈局進行更精確的控制，繼而使網頁的展示、網頁的佈局更加靈活。CSS可以將網頁內容與控制網頁內容的樣式分開設定，也就是說將網頁的外觀設定資訊從網頁內容中獨立出來，並集中管理。如果進一步將重用的CSS樣式資訊儲存為單個獨立的檔案我們就能讓多個不同的網頁搭配同一個樣式，從而實現統一的風格，這樣的話在修改網頁模板時可單獨修改被儲存的獨立CSS檔案，節省出修改每一個網頁檔案的時間。
CSS的每一條定義都有如下的形式：
selector{property： value; property： value;……}
其中，selector可以是HTML的tag，ID或class，如P，BODY，A;property就是那些將要被修改的性質***屬性***，如color;value是給property賦的值***引數***，如color的值為red。
四、CSS與網頁的相關性
CSS樣式跟HTML網頁的完美結合，實現了網頁的展現效果控制程式碼跟網頁實際內容的分離。使得新的網頁設計經常利用CSS技術來控制網頁的樣式，這其中通常包括控制頁面的整體佈局、文字、圖片、背景等等相關資訊，而HTML則乾脆只用來羅列網頁中的幾大元素。一個完備的CSS樣式表可以以多種方式應用到HTML頁面當中，但外部連線通常是最常用也是最好的方式之一。這種方式採取將CSS樣式程式碼單獨放入一個外部檔案中，再由HTML中的link標記來進行呼叫。這樣做的好處是可以使多個網頁呼叫同一個樣式表文件，最大限度的實現了程式碼重用及網站檔案的最優化配置。
CSS樣式在HTML中以STYLE標識出現，其格式為：
< style >
a{text-decoration：none; color：yellow}
a：hover{text-decoration：underline; color：purple}
p{font-size：20; background：red; color：blue}
< /style >
將如上程式碼插入任一HTML文件後，重新整理顯示，則所有錨點變為普通字型，顏色為黃，但當滑鼠移至其上時，則錨點的提示字元變為帶下劃線的紫色字型;整個文件中被置標P包圍的文字將以紅底藍字、字型大小為20個象素的形式出現。如果其中某段文字需另加修飾，可以單獨的的形式出現，例如
< p style=”font-size：30; font-weight ：bolder; background：white;color：blue” >
................
< /p >
則此段文字白底藍字，30個象素大小，且字型加粗。
五、CSS缺陷
***一***DIV+CSS儘管不是高不可攀，但是在網站建設中至少要比表格定位複雜的多，即使是對於網站建設的高手也是容易出現問題，更不要說是初學者了。***二***CSS網站建設的設計元素通常會放在一個外部檔案中，或幾個檔案，有可能相當的複雜，甚至比較龐大，如果在網站建設中CSS檔案調用出現異常，那麼整個網站將變得慘不忍睹。***三***雖然說DIV+CSS解決了大部分瀏覽器相容的問題，但是也有在部分瀏覽器中使用出現異常。***四***DIV+CSS在網站建設中對搜尋引擎優化與否，取決於網頁設計的專業水平，而不是DIV+CSS本身，在網站建設中使用DIV+CSS樣式的方法其實並不能保證網頁對搜尋引擎的優化，甚至不能保證一定比用HTML進行網站建設更加的簡潔。
六、CSS區域性優化方法
編寫網頁時儘量減少佔用網頁位元組，同時簡化CSS程式碼，讓自己寫的CSS程式碼更加專業，多采用同屬性提取共用CSS選擇器，分離網頁顏色和背景設定樣式等技術。
總的來說，雖然CSS技術給網頁佈局模式注入了新的生命力，能夠使得相同的HTML程式碼呈現出數以百計風格迥異的網站。但是要想比較熟練的掌握這種佈局方式還需要更多的學習，積累實踐經驗，最終目標是要能夠靈活掌握CSS語言並能設計製作出符合Web標準的網頁。
參考文獻：
[1]《基於Web技術的CSS網頁佈局應用》 吳芳費，計算機光碟軟體與應用，2011.
[2]《CSS層疊樣式表在DHTML中的應用》王丹玲，鞍山師範學院學報，2006
[3]《CSS技術在網頁設計中的應用與優化》杜濤，長治學院學報，2007
[4]《CSS技術在網頁設計中的應用探析》張志潔，電腦知識與技術，2007
作者簡介：
曹方明***1983―***，男，湖南郴州市，工作單位：郴州技師學院，職務：專職教師。
點選下頁還有更多>>>