網頁製作中規範使用DIV+CSS命名規則,可以改善優化功效特別是團隊合作時候可以提供合作製作效率,具體DIV CSS命名規則CSS命名大全內容篇。
常用DIV+CSS命名大全集合,即CSS命名規則
我們開發CSS+DIV網頁(Xhtml)時候,比較困惑和糾結的事就是CSS命名,特別是新手不知道什麼地方該如何命名,怎麼命名才是好的方法。
一、命名規則說明
1、所有的命名最好都小寫
#2、屬性的值一定要用雙引號("")括起來,且一定要有值如class="helloweb" , id="helloweb"
3、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整
4、空元素要有結束的tag或於開始的tag後面加上"/"
5、表現與結構完全分離,程式碼中不涉及任何的表現元素,如:style、font、 bgColor、border 等
6、
7、為每個表格和表單加上一個唯一的、結構標記id
8、為圖片加上alt 標籤,優點是在於圖片發生錯誤時,alt 可以體現給使用者
9、盡量使用英文命名原則
10、盡量不縮寫,除非一看就明白的單字
下面給大家介紹常見CSS命名和DIV CSS命名方法。
二、相對網頁外層重要部分CSS樣式命名
外套wrap ------------------用於最外層
頭部header ---------------用於頭部
主要內容main ------------用於主體內容(中部)
左側main-left -------------左側佈局
右側main-right -------- ---右側版面表
導覽列nav -----------------網頁選單導覽列
內容content ------ --------用於網頁中部主體
底部腳 -----------------用於底部
#三、DIV +CSS命名參考表
以下為CSS樣式命名與CSS檔案命名參考表,DIV CSS命名集合:
①CSS樣式命名說明網頁公共命名#wrapper頁面外圍控制整體佈局寬度# container或#content容器;
②用於最外層#layout佈局#head, #header頁頭部分#foot, #footer頁腳部分#nav主導覽#subnav二級導覽#menu選單#submenu子選單#sideBar側邊欄#sidebar_a, #sidebar_b左邊欄或右邊欄#main頁面主體#tag標籤#msg #message提示訊息#tips小技巧#vote投票#friendlink友情連結#title標題;
③# summary摘要#loginbar登入條#searchInput搜尋輸入框#hot熱門熱點#search搜尋#search_output搜尋輸出和搜尋結果相似#searchBar搜尋條#search_results搜尋結果#copyright版權資訊#branding
④商標#logo網站LOGO標誌#siteinfo網站資訊#siteinfoLegal法律聲明#siteinfoCredits信譽#joinus加入我們#partner合作夥伴#service服務#regsiter註冊arr/arrow箭頭#guild指南#sitemap網站地圖#list列表#homepage首頁#subpage二級頁面子頁#tool, #toolbar工具條#drop下拉#dorpmenu下拉選單
⑤#status狀態#scroll滾動.tab標籤頁.left .right .center居左、中、右.news新聞.download下載.banner廣告條(頂部廣告條)電子貿易相關.products產品.products_prices產品價格.products_description產品描述.products_review產品評論.editor_review編輯評論.news_release最新產品.publisher生產商.screenshot縮略圖.faqs常見問題.key關鍵最新產品.publisherword.screenshot縮略圖.faqs常見問題.key關鍵字字.blog部落格.forum論壇
⑥CSS檔命名說明master.css,style.css主要的module.css模組base.css基本上共用layout.css佈局,版面themes.css主題columns.css專欄font .css文字、字體forms.css表單mend.css補丁print.css列印
CSS命名其它說明:
DIV+CSS命名小結:無論是使用「.」(小寫句號)選擇符號開頭命名,還是使用「#」(井號)選擇符號開頭命名都無所謂,但我們最好遵循,主要的、重要的、特殊的、最外層的盒子用「#」(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名,同時考慮命名的CSS選擇器在HTML中重複使用調用。
通常我們最常用主要命名有:wrap(外套、最外層)、header(頁眉、頭部)、nav(導航條)、menu(選單)、title(欄目標題、一般配合h1\h2\h3\h4標籤使用)
、content (內容區)、footer(頁尾、底部)、logo(標誌、可以配合h1標籤使用)、banner(廣告條,一般在頂部)、copyRight (版權)。其它可依自己需要選擇性使用。
建議:主要的、重要的、最外層的盒子用「#」(井號)選擇符號開頭命名,其它都用「.」(小寫句號)選擇符號開頭命名。
2.CSS樣式檔命名如下:
主要的master.css
佈局,版面layout.css
欄位columns.css
#文字font.css
列印樣式print.css
主題themes.css
四、英文命名技巧
如果遇到不常用的,可以藉助翻譯工具進行翻譯取其英文命名。
以上是html以及DIV+CSS的命名規範總結分享(收藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!