|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 當我們在進行網頁前端開發的過程中,按照一個良好的css規范編寫css,這樣不僅可以提高代碼的閱讀體驗;也可以在出現錯誤時,迅速的查找出錯地點,方便改正。這里設計達人網總結一個CSS書寫規范、CSS書寫順序供大家參考,這些是參考了國外一些文章以及我的個人經驗總結出來,我想對寫CSS的前端用戶來說是值得學習的。CSS書寫順序 1.位置屬性(position, top, right, z-index, display, float等)
CSS書寫規范使用CSS縮寫屬性 CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名 很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!
16進制顏色代碼縮寫 有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。
連字符CSS選擇器命名規范 1.長名稱或詞組可以使用中橫線來為選擇器命名。 2.不建議使用“_”下劃線來命名CSS選擇器,為什么呢? 輸入的時候少按一個shift鍵; 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的) 能良好區分JavaScript變量命名(JS變量命名是用“_”)
不要隨意使用id id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復使用,另外id的優先級優先與class,所以id應該按需使用,而不能濫用。
為選擇器添加狀態前綴 有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了,比如下圖是添加了“.is-”前綴。
CSS命名規范(規則)常用的CSS命名規則 頭(header),內容(content/container)尾(footer),導航(nav),側欄(sidebar),欄目(column),頁面外圍控制整體佈局寬度(wrapper),左右中(left right center),登錄條(loginbar),標志(logo),廣告(banner)頁面主體(main),熱點(hot),新聞(news),下載(download),子導航(subnav),菜單(menu),子菜單(submenu),搜索(search),友情鏈接(friendlink),頁腳(footer),版權(copyright),滾動(scroll),內容(content),標簽(tags),文章列表(list),提示信息(msg),小技巧(tips),欄目標題(title),加入(joinus),指南(guide),服務(service),注冊(regsiter),狀態(status),投票(vote),合作伙伴(partner) 注釋的寫法: /* Header */內容區/* End Header */ id的命名: 1)頁面結構 容器: container,頁頭:header,內容:content/container,頁面主體:main,頁尾:footer,導航:nav,側欄:sidebar,欄目:column,頁面外圍控制整體佈局寬度:wrapper,左右中:left right center (2)導航 導航:nav,主導航:mainnav,子導航:subnav,頂導航:topnav,邊導航:sidebar,左導航:leftsidebar,右導航:rightsidebar,菜單:menu,子菜單:submenu,標題: title,摘要: summary (3)功能 標志:logo,廣告:banner,登陸:login,登錄條:loginbar,注冊:register,搜索:search,功能區:shop,標題:title,加入:joinus,狀態:status,按鈕:btn,滾動:scroll,標籤頁:tab,文章列表:list,提示信息:msg,當前的: current,小技巧:tips,圖標: icon,注釋:note,指南:guild,服務:service,熱點:hot,新聞:news,下載:download,投票:vote,合作伙伴:partner,友情鏈接:link,版權:copyright 注意事項:: 1.一律小寫; 2.盡量用英文; 3.不加中槓和下劃線; 4.盡量不縮寫,除非一看就明白的單詞。 CSS樣式表文件命名 主要的(master.css) ,模塊(module.css) ,基本共用 (base.css),布局、版面 (layout.css),主題( themes.css),專欄(columns.css) ,文字( font.css),表單 (forms.css),補丁( mend.css),打印 (print.css) 以上就是如何規范書寫css,增加代碼的閱讀體驗的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!