當我們在開發(fā)CSS+DIV網(wǎng)頁(Xhtml)時候,比較困惑和糾結(jié)的事就是CSS命名,特別是新手不知道什么地方該如何命名,怎樣命名才是好的方法。
下面是湘潭網(wǎng)站建設(shè)——尤度信息公司的網(wǎng)站命名規(guī)則:
一、命名規(guī)則說明
1)、所有的命名最好都小寫
2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"
3)、每個標簽都要有開始和結(jié)束,且要有正確的層次,排版有規(guī)律工整
4)、空元素要有結(jié)束的tag或于開始的tag后加上"/"
5)、表現(xiàn)與結(jié)構(gòu)完全分離,代碼中不涉及任何的表現(xiàn)元素,如style、font、bgColor、border等
6)、<h1>到<h5>的定義,應(yīng)遵循從大到小的原則,體現(xiàn)文檔的結(jié)構(gòu),并有利于搜索引擎的查詢。
7)、給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標記id
8)、給圖片加上alt標簽
9)、盡量使用英文命名原則
10)、盡量不縮寫,除非一看就明白的單詞
二、相對網(wǎng)頁外層重要部分CSS樣式命名
以下為CSS樣式命名與CSS文件命名參考表,DIV CSS命名集合:
|
CSS樣式命名 |
說明 |
|
網(wǎng)頁公共命名 | |
|
#wrapper |
頁面外圍控制整體布局寬度 |
|
#container或#content |
容器,用于最外層 |
|
#layout |
布局 |
|
#head, #header |
頁頭部分 |
|
#foot, #footer |
頁腳部分 |
|
#nav |
主導(dǎo)航 |
|
#subnav |
二級導(dǎo)航 |
|
#menu |
菜單 |
|
#submenu |
子菜單 |
|
#sideBar |
側(cè)欄 |
|
#sidebar_a, #sidebar_b |
左邊欄或右邊欄 |
|
#main |
頁面主體 |
|
#tag |
標簽 |
|
#msg #message |
提示信息 |
|
#tips |
小技巧 |
|
#vote |
投票 |
|
#friendlink |
友情連接 |
|
#title |
標題 |
|
#summary |
摘要 |
|
#loginbar |
登錄條 |
|
#searchInput |
搜索輸入框 |
|
#hot |
熱門熱點 |
|
#search |
搜索 |
|
#search_output |
搜索輸出和搜索結(jié)果相似 |
|
#searchBar |
搜索條 |
|
#search_results |
搜索結(jié)果 |
|
#copyright |
版權(quán)信息 |
|
#branding |
商標 |
|
#logo |
網(wǎng)站LOGO標志 |
|
#siteinfo |
網(wǎng)站信息 |
|
#siteinfoLegal |
法律聲明 |
|
#siteinfoCredits |
信譽 |
|
#joinus |
加入我們 |
|
#partner |
合作伙伴 |
|
#service |
服務(wù) |
|
#regsiter |
注冊 |
|
arr/arrow |
箭頭 |
|
#guild |
指南 |
|
#sitemap |
網(wǎng)站地圖 |
|
#list |
列表 |
|
#homepage |
首頁 |
|
#subpage |
二級頁面子頁面 |
|
#tool, #toolbar |
工具條 |
|
#drop |
下拉 |
|
#dorpmenu |
下拉菜單 |
|
#status |
狀態(tài) |
|
#scroll |
滾動 |
|
.tab |
標簽頁 |
|
.left .right .center |
居左、中、右 |
|
.news |
新聞 |
|
.download |
下載 |
|
.banner |
廣告條(頂部廣告條) |
|
電子貿(mào)易相關(guān) | |
|
.products |
產(chǎn)品 |
|
.products_prices |
產(chǎn)品價格 |
|
.products_description |
產(chǎn)品描述 |
|
.products_review |
產(chǎn)品評論 |
|
.editor_review |
編輯評論 |
|
.news_release |
最新產(chǎn)品 |
|
.publisher |
生產(chǎn)商 |
|
.screenshot |
縮略圖 |
|
.faqs |
常見問題 |
|
.keyword |
關(guān)鍵詞 |
|
.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 |
打印 |
外套 wrap ------------------用于最外層
頭部 header ----------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容(中部)
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條
內(nèi)容 content ---------------用于網(wǎng)頁中部主體
底部 footer -----------------用于底部
CSS命名其它說明:
DIV+CSS命名小結(jié):無論是使用“.”(小寫句號)選擇符號開頭命名,還是使用“#”(井號)選擇符號開頭命名都無所謂,但我們最好遵循,主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名,同時考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有:wrap(外套、最外層)、header(頁眉、頭部)、nav(導(dǎo)航條)、menu(菜單)、title(欄目標題、一般配合h1\h2\h3\h4標簽使用)
、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo(標志、可以配合h1標簽使用)、banner(廣告條,一般在頂部)、copyRight(版權(quán))。其它可根據(jù)自己需要選擇性使用。
DIVCSS5建議:主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名。
2.CSS樣式文件命名如下
主要的 master.css
布局,版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
如果遇到不常用的,可以借助翻譯工具進行翻譯取其英文命名。
推薦使用谷歌在線翻譯工具
以上湘潭網(wǎng)站建設(shè)——尤度公司提供的DIV+CSS的命名規(guī)則總結(jié),相信通過規(guī)范的CSS命名給你以后網(wǎng)站網(wǎng)頁的維護帶來方便。
掃一掃關(guān)注官方微信