首页 » 我的收集 » DIV+CSS » 常用的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
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

注释的写法

CSS注释
/* Footer */
内容区
/* End Footer */

Html注释
<!–footer–>
<!–end footer–>

id的命名

(1)  页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

(2)导航

导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

(3)功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
招聘:hr
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

class的命名

(1)  颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

(5)关于CSS常用简写

Body,img,form,ul,li,dd,dt,h1,h2,h3,h4{ margin:0; padding:0; border:0; font-size:12px; list-style:none;}

.font12blue a:link,.font12blue a:visited{ color:blue; text-decoration:none;}
.font12blue a:hover{ color:#ff6600; text-decoration:underline;}

Margin:5px 0 0 0/*上 右 下 左*/
Padding:5px 0 0 0/*上 右 下 左*/
Border:1px solid #000

(5)其他
Mozilla建议的CSS书写顺序
//显示属性 display list-style position float clear //自身属性 width height margin padding border background //文本属性 color font text-decoration text-align vertical-align white-space other text content

关于hack
width:100px;/*FF Hack*/
*+width:200px;/*ie7 Hack*/
_width:150px;/*ie6 Hack*/
可以解决FF与IE7,IE6的兼容问题,书写顺序为FF,IE7,IE6
(HTML代码,CSS样式越简练越好,尽量不要用HACK)

注意事项

1.一律小写;
2.尽量用英文;
3.单词与单词中间用下划线隔开;
4.尽量不缩写,除非一看就明白的单词.
5.定义时最外面的那个DIV用. Wrapper{}来定义

CSS样式文件命名(完善中)

主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
打印 print.css
基本共用: base.css (公用样式,文字,连接,表单,边框)
头尾共用布局:header (公用的头文件,底文件,搜索等有丰布局的样式)
布局,版面: layout.css (所有单独布局与版面的样式)
补丁 mend.css (后期补充扩展的样式)
资讯:article1.css (资讯的channel.asp 、list.asp、detail.asp的样式文件)
企业:article1.css (企业的channel.asp 、list.asp、detail.asp的样式文件)
知识:article1.css (知识的channel.asp 、list.asp、detail.asp的样式文件)
产品:product.css (产品的channel.asp 、list.asp、detail.asp的样式文件)
商机:information.css (商机的channel.asp 、list.asp、detail.asp的样式文件)
展会:exhibit.css (展会的channel.asp 、list.asp、detail.asp的样式文件)
人才:job.css (人才的channel.asp 、list.asp、detail.asp的样式文件)
店辅:corporation.css (店辅的channel.asp 、list.asp、detail.asp的样式文件)
会员:member.css (会员的channel.asp 、list.asp、detail.asp的样式文件)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

引用:0

下面所列的是引用到本博客的链接
常用的CSS命名规则 来自 Design4U.cn
顶部