首頁 > web前端 > css教學 > 主體

學習Xhtml+CSS2的一些心得體會_CSS/HTML

WBOY
發布: 2016-05-16 12:11:48
原創
1432 人瀏覽過

自從W3C搞了一個Xhtml1.0的標準之後,很多網站都開始用之將站點重構,像yahoo,163,CSDN等,近來一段時間Xhtml+CSS2的熱潮更是一浪高過一浪,所以偶也開始學起了,慢慢的就愛上他們了,現在談談最近一段時間來的學習體會。   

為什麼要學Xhtml+CSS2  

首先,規格的程式碼能在各種瀏覽器中順利顯示。  

一些不規範程式碼的網頁在IE下能正常顯示的,在Firefox和Opera上可能就無法正常顯示。雖然現在瀏覽器的主流是IE以及以IE為核心的各種瀏覽器,但不排除Firefox以及Opera等瀏覽器等逐漸增大的用戶群,而這些人群多是對電腦較為精通的老鳥,被他們罵自己網站太垃圾的話我想滋味應該不好受,呵呵。
當然這也不是說使用table等做的網頁就不符合標準,只是當前不少人習慣用Forntpage或是Dreamweaver來做設計,這些可視化的軟體固然方便,但由此帶來的問題也是多多,這些軟體多多少少會自動增減一些程式碼,如果沒有查看程式碼的習慣的話,很容易致使產生一下不規範程式碼。  

其次,DIV + CSS2讓頁面佈局更簡單  
說是Xhtml+CSS2,其實更多的時候是DIV+CSS2來建立網站。之前對頁面進行佈局或設定一下不錯的效果的話,多採用大量的表格嵌套,通常對一個頁面進行劃分,多用單元格來描述區域,這樣在WYSIWYG等軟體中倒是比較直觀,但這樣影響的有幾個方面,首先可能影響下載速度,其次對於手寫程式碼來講,這樣的結構非常不直觀,另外,牽扯到一個地方就是單元格的合併,假如你不小心搞錯了一個colspan="?",那麼整個頁面的版面將會面目全非。  
而用CSS做佈局,就像是在PS中對圖層進行操作一樣,因為CSS中有相對和絕對的概念,呵呵,這樣對頁面的佈局就更加輕鬆和方便了。

另外,Xhtml可以減少文件體積  
雖然說現在網速越來越大了,但誰不想自己的站點速度更快呢,有人還曾經說「世上最遠的距離不是地球到太陽,而是中國電信到中國網通”,如果你在電信伺服器上的站點被網通線路的用戶瀏覽,網頁文件大小勢必也會影響瀏覽者的感受。而採用Xhtml則利於你解決這個問題,呵呵。  

有鑑於以上幾點,我開始逐漸習慣使用Xhtml+CSS2建立網站。

學習中的心得體會  

程式碼編寫工具:由於現在還沒有視覺化的工具來寫Xhtml+CSS2頁面,所以找到適合自己的程式碼書寫工具是必須的,我一直在用Editplus,也像你推薦它,關於Editplus的一些使用技巧,可以看這裡:  
http://www.ifess.com/?p=23  

頁面佈局結構:對一個頁面首先要有一個整體的佈局,比如,header,menu,sidebar,content,footer等,透過定義這些元素的CSS屬性給頁面一個整體的劃分,之後在這些元素中再寫具體的內容,這樣就不會讓頁面看起來很亂。  

CSS寫法:在一個項目中,定義內容屬性和結構佈局屬性的屬性值可以分開寫,這樣方便尋找和修改。盡量減少重複定義,能繼承的屬性就不要再重複寫了。盡量使用相容IE和Firefox的CSS屬性值,因為有些屬性寫出來之後無法正常顯示就等於做了無用功。  

Xhtml檔案:盡量採用外掛連結來呼叫CSS文件,對於只出現一次的CSS屬性也可以採用文件內部書寫的方式。書寫程式碼時最好寫註釋,同時一定要注意對齊的格式,這樣便於查錯。  

暫時想起來這麼一點,歡迎大家來一起討論。

以下附一些常用的資源及連結:  

CSS2.0中文手冊,韓國商業網站設計分析,色標2004,JS手冊:  
http:// www.im286.com/viewthread.php?tid=875287  
Xhtml1.0校驗頁:  
http://validator.w3.org/checklink 
http://validator.w3.org/checklink 
校驗頁:  http://jigsaw.w3.org/css-validator/ 
 
CSS線上最佳化:  http://flumpcakes.co.uk/cakes.co.uk/cakes.co.uk/cakes.co. css/optimiser/
 

文章來源:http://www.ifess.com/?p=70 

作者:落伍 Ipv6,轉載請註明。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板