css命名及书写规范

1/1css命名及书写规范css命名及书写规范CSS命名规范一．文件命名规范全局样式：

global.css；框架布局：

layout.css；字体样式：

font.css；链接样式：

link.css；打印样式：

print.css；二．常用类/ID命名规范页眉：

header内容：

content容器：

container页脚：

footer版权：

copyright导航：

menu主导航：

mainMenu子导航：

subMenu标志：

logo标语：

banner标题：

title侧边栏：

sidebar图标：

Icon注释：

note搜索：

search按钮：

btn登录：

login链接：

link信息框：

manage常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：

诸如搜索框则应命名为searchInput、搜索图标命名这searchIcon、搜索按钮命名为searchBtnCSS书写规范及方法一.常规书写规范及方法1.选择DOCTYPE：

XHTML1.0提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN1/DTD/xhtml1-transitional.dtd严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如br。

完整代码如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN1/DTD/xhtml1-strict.dtd框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN1/DTD/xhtml1-frameset.dtd理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2.指定语言及字符集：

为文档指定语言：

htmlxmlns=lang=en为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：

常用的语言定义：

meta;charset=utf-8/标准的XML文档语言定义：

?xmlversion=1.0encoding=utf-8?针对老版本的浏览器的语言定义：

meta与*html是IE特有的标签,Firefox暂不支持。

.searchInput{background-color:#333;}*html.searchInput{background-color:#666;}/*仅IE6*/*+html.searchInput{background-color:#555;}/*仅IE7*/屏蔽IE浏览器：

select是选择符，根据情况更换。

第二句是MAC上safari浏览器独有的。

*:lang(zh)select{font:12px!important;}/*FF的专用*/select:empty{font:12px!important;}/*safari可见*/IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select{display/*IE6不识别*/:none;}IE的if条件hack写法：

所有的IE可识别：

![ifIE]OnlyIE![endif]只有IE5.0可以识别:![ifIE5.0]OnlyIE5.0![endif]IE5.0包换IE5.5都可以识别:![ifgtIE5.0]OnlyIE5.0+![endif]仅IE6可识别:![ifltIE6]OnlyIE6-![endif]IE6以及IE6以下的IE5.x都可识别:![ifgteIE6]OnlyIE6/+![endif]仅IE7可识别:![iflteIE7]OnlyIE7/-![endif]2、清除浮动：

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

select:after{content:.;display:block;height:0;clear:both;visibility:hidden;}分割线申明：

本文部分资料搜集于网络！XHTML-CSS写作建议1.所有的xhtml代码小写2.属性的值一定要用双引号()括起来，且一定要有值3.每个标签都要有开始和结束，且要有正确的层次4.空元素要有结束的tag或于开始的tag后加上/5.表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等6.h1到h5的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7.给每一个表格和表单加上一个唯一的、结构标记id8.给重要的区块加上注释,如：

给图片加上alt标签9.所有的标签必须进行合理的嵌套10.根元素前必须有元素，宣告使用那一种DTD11.根元素必须有xmlns属性来指定使用的namespaceCSS样式表规范：

1.id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)2.CSS样式表各区块用注释说明3.尽量使用英文命名原则4.尽量不加中杠和下划线5.尽量不缩写，除非一看就明白的单词CSS命名规范：

DIVCSS名称说明网站公用相关Containerdiv#container容器Layout#layout布局Headerorbannerdiv#head,#header页头部分Footerdiv#foot,#footer页脚部分Navigationlist#nav主导航Sub-navigationlist#subNav二级导航Menu#menu菜单SubMenu#submenu子菜单Leftorrightsidecolumns#sidebar_a,#sidebar_b左边栏或右边栏Maindiv#main页面主体Tag#tag标签Message#msg#message提示信息Tips#tips小技巧Vote#vote投票FriendLink#friendlink友情连接Title#title标题Summary#summary摘要Searchinput#searchInput搜索输入框Searchoutput#search_output搜索输出和搜索结果相似Search#search搜索Searchbar#searchBar搜索条Searchresults#search_results搜索结果Copyrightinformation#copyright版权信息brand#branding商标branding-logo#logoLOGOSiteinformation#siteinfo网站信息Copyrightinformationetc.#siteinfoLegal法律声明Designerorothercredits#siteinfoCredits信誉Joinus#joinus加入我们Partnershipopportunities#partner合作伙伴Services#service服务Regsiter#regsiter注册Arrowa