Css选择器命名规则.doc_第1页
Css选择器命名规则.doc_第2页
Css选择器命名规则.doc_第3页
Css选择器命名规则.doc_第4页
Css选择器命名规则.doc_第5页
已阅读5页,还剩5页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

操作系统版本:Windows 7浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev受影响的浏览器:所有浏览器.经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式.一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符a- zA-Z0-9和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_);它们不能以 数字,或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。由于设计到的字符很多,本文只针对字符a-zA-Z0-9,再加连字号(-)和下划线(_)进行讨论。 关于CSS中允许使用的字符和大小写信息,请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中,只提到选择器标识符不能以数字,或一个连字号后跟数字为开头。除 此之外,没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢?请观察如下代码:123456789101112131415161718192021222324252627282930313233343536373839404142divwidth:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;.f-1_f_background-color:#d4d4d4;.1background-color:#A8A8A8;.123456background-color:#d4d4d4;.2demobackground-color:#A8A8A8;.2-demobackground-color:#d4d4d4;.2_demobackground-color:#A8A8A8;.-demobackground-color:#d4d4d4;.-2demobackground-color:#A8A8A8;._demobackground-color:#d4d4d4;._2demobackground-color:#A8A8A8;.-background-color:#d4d4d4;.-background-color:#A8A8A8;._background-color:#d4d4d4;.background-color:#A8A8A8;._-background-color:#d4d4d4;.-_background-color:#A8A8A8;.-background-color:#d4d4d4;.-_background-color:#A8A8A8;.-123background-color:#d4d4d4;._123background-color:#A8A8A8;1234567891011121314151617181920字母开头单个数字多个数字数字开头 + a-zA-Z数字 + - 开头数字 + _ 开头连字符(-)开头 + a-zA-Z连字符(-) + 数字 开头下划线(_)开头 + a-zA-Z下划线(_) + 数字 开头单个连字符(-)多个连字符(-)单个下划线(_)多个下划线(_)下划线(_) + 连字符(-)连字符(-) + 下划线(_)多个下划线(_) + 连字符(-)多个连字符(-) + 下划线(_)多个连字符(-) + 数字多个下划线(_) + 数字看看各浏览器下面的结果观察上表,分析各浏览器下的表现,总结如下从上面看到,我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。因此,如果选择器的命名不规范,将影响各浏览器下,样式渲染不一致。比如如下代码:12divfont-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;.20fontsizefont-size:18px;background-color:#d4d4d4;1以数字开头的类名以数字开始的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被识别,而其它浏览器下则不识别(忽略该规则)三、如何避免受此问题影响坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。四、关于团队合作的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(二)注释的写法:/* 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下载: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 注意事项:1.一律小写;2.尽

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论