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

網頁編輯中CSS樣式表技巧總表_經驗交流

WBOY
發布: 2016-05-16 12:07:32
原創
1416 人瀏覽過

一、關於註解

在建立xhtml CSS網站時,CSS中的註解非常重要。在建立CSS樣式時,應保持隨手註解的習慣。一般的,我習慣使用「/* 註釋內容 */」的格式來寫註釋,因為在EditPlus等具有高亮功能的編輯器裡,使用C語言中常用的「/******** *******/”之類的註釋是無意義的,沒有必要填充大量無意義內容作為分隔。帶有註釋的文檔作為網站的原始CSS文檔,在發佈網站的時候,可以使用CSS壓縮工具壓縮CSS,在輸出的CSS中去掉註釋以提高文件傳輸效率。

二、關於命名

在為CSS檔案命名的時候,我比較喜歡使用符合語意的英文名稱或縮寫命名,在非常用部分也許會用部分拼音命名。另外,在某些有從屬關係的class裡,我可能會用類似「list_banner」之類的命名,也就是父元素名加上「_」再加上元素名稱。

關於命名,可以依照團隊設計師的習慣來協商。但最好在命名之後加上註釋,以便將來產生文件備查。

三、關於繼承性

在CSS中,要善用繼承性。例如在兩個巢狀的div中,父元素定義了background-color屬性為黑色,如果子元素的背景同為黑色,則不需重複定義。善於利用CSS的繼承性可以讓程式碼更有效、更精簡。

四、關於CSS定義的層次

在定義CSS中的class時,建議使用層次分明的方式來描述語句。

範例結構:


  

    
  


範例CSS:

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
在上例子中,從最終效果來看,#menu沒有必要重複出現,但是實際上如果能夠在前面加上#menu,將會讓文檔的層次更加明了,更利於閱讀。

五、關於樣式排序

在設計CSS樣式表時,我們大多是手寫程式碼,這樣很容易造成class中的樣式排序混亂。例如有幾個class中用到了padding、margin、background、color等樣式,但是排序的時候,有的class是background比較靠前,有的是margin比較靠前。這樣就造成了一定的混亂,容易讓思路受挫。我建議個人或團隊的設計師協定一個大致順序,這樣從個別來說看不出太大差別,但從整體上將更加易於閱讀和管理,整體效率會提高不少。

例如,我預設將width、height和padding、margin、border等放在較前的位置,background其次,然後是控製文字的font、color、text-align等,接著是某些特殊標籤才能用到的元素,像list-style等,最後是css濾鏡。當遇到特殊情況時(例如CSS某些屬性的優先順序需要定義)可以靈活處理。

就總結到這裡了,火德歡迎大家補充、指正。
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!