首頁 > web前端 > html教學 > html以及DIV+CSS的命名規範總結分享(收藏)

html以及DIV+CSS的命名規範總結分享(收藏)

黄舟
發布: 2017-07-26 11:41:08
原創
1263 人瀏覽過

網頁製作中規範使用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中文網其他相關文章!

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