仓酷云
标题:
带来一篇css挑选器定名划定规矩:差别及大概发生的成绩
[打印本页]
作者:
乐观
时间:
2015-1-15 23:12
标题:
带来一篇css挑选器定名划定规矩:差别及大概发生的成绩
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。
破洛洛文章简介：W3CCSS2.1的4.1.3节中提到：标识符（包含选择器中的元素名，类和ID）只能包括字符[a-zA-Z0-9]和ISO10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不克不及以数字，或一个连字号后跟数字为开首。它们还能够包括本义字符加任何ISO10646字符作为一个数
操纵体系版本：Windows7
扫瞄器版本：IE6,IE7,IE8,Firefox3.6.2,Safari4.0.4,Chrome5.0.356.2dev
受影响的扫瞄器：一切扫瞄器.
常常讲到css选择器定名划定规矩，实在不但是在团队互助基本下去讲这个，每一个扫瞄器,IE产物，火狐，苹果，谷歌，城市由于定名不标准会发生分歧款式..
1、关于选择器的定名
W3CCSS2.1的4.1.3节中提到：标识符（包含选择器中的元素名，类和ID）只能包括字符[a-zA-Z0-9]和ISO10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不克不及以数字，或一个连字号后跟数字为开首。它们还能够包括本义字符加任何ISO10646字符作为一个数字编码。
因为计划到的字符良多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）举行会商。关于CSS中同意利用的字符和巨细写信息，请参考W3CCSS2.1的4.1.3节
2、差别及大概发生的成绩
在W3CCSS2.1申明文档中，只提到选择器标识符不克不及以数字，或一个连字号后跟数字为开首。除此以外，没有相干的申明。那末各扫瞄器下的体现是不是遵守这一划定规矩呢？
请察看以下代码：
2324252627282930313233343536373839404142
复制代码
div{width:160px;height:20px;font-size:12px;line-height:20px;background-color:yellow;}.f-1_f_{background-color:#d4d4d4;}.1{background-color:#A8A8A8;}.123456{background-color:#d4d4d4;}.2demo{background-color:#A8A8A8;}.2-demo{background-color:#d4d4d4;}.2_demo{background-color:#A8A8A8;}.-demo{background-color:#d4d4d4;}.-2demo{background-color:#A8A8A8;}._demo{background-color:#d4d4d4;}._2demo{background-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;}.---123{background-color:#d4d4d4;}.__123{background-color:#A8A8A8;}
复制代码
1234567891011121314151617181920
复制代码
<divclass="f-1_f_">字母开首</div><divclass="1">单个数字</div><divclass="123456">多个数字</div><divclass="2demo">数字开首+[a-z][A-Z]</div><divclass="2-demo">数字+"-"开首</div><divclass="2_demo">数字+"_"开首</div><divclass="-demo">连字符(-)开首+[a-z][A-Z]</div><divclass="-2demo">连字符(-)+数字开首</div><divclass="_demo">下划线(_)开首+[a-z][A-Z]</div><divclass="_2demo">下划线(_)+数字开首</div><divclass="-">单个连字符(-)</div><divclass="---">多个连字符(-)</div><divclass="_">单个下划线(_)</div><divclass="">多个下划线(_)</div><divclass="_-">下划线(_)+连字符(-)</div><divclass="-_">连字符(-)+下划线(_)</div><divclass="-">多个下划线(_)+连字符(-)</div><divclass="---_">多个连字符(-)+下划线(_)</div><divclass="---123">多个连字符(-)+数字</div><divclass="123">多个下划线(_)+数字</div>
复制代码
看看各扫瞄器上面的了局
察看上表，剖析各扫瞄器下的体现，总结以下
从下面看到，我们能够直不雅的懂得到选择器的定名在各扫瞄器下的撑持情形有所分歧。因而，假如选择器的定名不标准，将影响各扫瞄器下，款式衬着纷歧致。好比以下代码：
12
复制代码
div{font-size:12px;background-color:yellow;width:150px;height:30px;line-height:30px;}.20fontsize{font-size:18px;background-color:#d4d4d4;}
复制代码
1
复制代码
<divclass="20fontsize">以数字开首的类名</div>
复制代码
以数字入手下手的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被辨认，而别的扫瞄器下则不辨认（疏忽该划定规矩）
3、怎样制止受此成绩影响
保持以字母开首定名选择器，如许可包管在一切扫瞄器下都能兼容。
4、关于团队互助的css定名标准
经常使用的css定名划定规矩
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面核心把持全体结构宽度：wrapper
摆布中：leftrightcenter
登录条：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*/
内容区
/*EndFooter*/
(三)id的定名:
(1)页面布局
容器:container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面核心把持全体结构宽度：wrapper
摆布中：leftrightcenter
(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.只管用英文;
3.不加中杠和下划线;
4.只管不缩写，除非一看就分明的单词.
次要的master.css
模块module.css
基础共用base.css
结构，版面layout.css
主题themes.css
专栏columns.css
笔墨font.css
表单forms.css
补钉mend.css
打印print.css
</p>
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
作者:
因胸联盟
时间:
2015-1-17 20:45
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
作者:
小妖女
时间:
2015-1-24 14:24
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者:
愤怒的大鸟
时间:
2015-2-1 17:21
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者:
精灵巫婆
时间:
2015-2-7 13:52
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者:
飘飘悠悠
时间:
2015-2-22 14:45
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
作者:
活着的死人
时间:
2015-3-7 02:37
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者:
乐观
时间:
2015-3-14 11:11
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。
作者:
简单生活
时间:
2015-3-21 06:21
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2