css注释

css规范⽂档

CSS书写顺序*{

/*显⽰属性*/

display

position

float

clear

cursor

…

/*盒模型*/

margin

padding

width

height

/*排版*/

vertical-align

white-space

text-decoration

text-align

…

/*⽂字*/

color

font

content

/*边框背景为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。*/

border

background

}

下表顺序为从上到下，从左到右：

========================

display||visibility

list-style:list-style-type||list-style-position||list-style-image

position

top||right||bottom||left

z-index

clear

float

width

max-width||min-width

height

max-height||min-height

overflow||clip

margin:margin-top||margin-right||margin-bottom||margin-left

padding:padding-top||padding-right||padding-bottom||padding-left

outline:outline-color||outline-style||outline-width

border

background:background-color||background-image||background-repeat||background-attachment||background-position

color

font:font-style||font-variant||font-weight||font-size||line-height||font-family

font:caption|icon|menu|message-box|small-caption|status-bar

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

CSS命名规则：

⼀．⽂件命名规范

全局样式：；

框架布局：；

字体样式：；

链接样式：；

打印样式：；

主要的

专栏

主题

主要的

模块

基本共⽤

表单

补丁

⼆．页⾯结构

容器:container

页头：header

内容：content

页⾯主体：main

页尾：footer

栏⽬：column

页⾯外围控制整体布局宽度：wrapper

左右中：leftrightcenter

三．导航

导航：nav

主导航：mainbav

⼦导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

⼦菜单：submenu

摘要:summary

四．功能

标志：logo

⼴告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：arch

功能区：shop

标题：title

加⼊：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

⽂章列表：list

提⽰信息：msg

当前的:current

⼩技巧：tips

图标:icon

注释：note

指南：guild

服务：rvice

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

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#archInput搜索输⼊框

Searchoutput#arch_output搜索输出和搜索结果相似

Search#arch搜索

Searchbar#archBar搜索条

Searchresults#arch_results搜索结果

Copyrightinformation#copyright版权信息

brand#branding商标

branding-logo#logoLOGO

Siteinformation#siteinfo⽹站信息

Copyrightinformationetc.#siteinfoLegal法律声明

Designerorothercredits#siteinfoCredits信誉

Joinus#joinus加⼊我们

Partnershipopportunities#partner合作伙伴

Services#rvice服务

Regsiter#regsiter注册

Arrowarr/arrow箭头

Little#little标题

Websitemap#sitemap⽹站地图

List#list列表

Homepage#homepage⾸页

Subpagesubpage⼆级页⾯⼦页⾯

Toolbar#tool,#toolbar⼯具条

Nextpulls#drop下拉

Nextpullsmenu#dorpmenu下拉菜单

Status#status状态

Containerdiv#container容器

Headerorbannerdiv#header页头部分

Mainorglobalnavigationdiv#mainNav主导航

Menu#menu菜单

SubMenu#submenu⼦菜单

Leftorrightsidecolumns#sidebarA,#sidebarB左边栏或右边栏

Maindiv#main页⾯主体

Contentdiv#content内容部分

Themaincontentarea#contentMain主要内容区域

Footerdiv#footer页脚部分

Tag#tag标签

Message#msg#message提⽰信息

Tips#tips⼩技巧

Vote#vote投票

FriendLink#friendlink友情连接

Title#title标题

Summary#summary摘要

Sub-navigationlist#subNav⼆级导航

Searchinput#archInput搜索输⼊框

Searchoutput#archOutput搜索输出和搜索结果相似

Search#arch搜索

Searchresults#archResults搜索结果

Copyrightinformation#copyright版权信息

brand#branding商标

branding-logo#brandingLogoLOGO

Siteinformation#siteinfo⽹站信息

Copyrightinformationetc.#siteinfoLegal法律声明

Designerorothercredits#siteinfoCredits信誉

Joinus#joinus加⼊我们

Partnershipopportunities#partner合作伙伴

Services#rvice服务

Regsiter#regsiter注册

Status#status状态

ts产品

tsPrices产品价格

tsDescription产品描述

tsReview产品评论

Editor'Review编辑评论

lea最新产品

her⽣产商

shot缩略图

常见问题

d关键词

博客

论坛

五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{}

/*=====主导航=====*/

#mainMenu{

width:100%;

height:30px;

background:url(images/mainMenu_)repeat-x;

}

#mainMenuulli{

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;

}

/*=====主导航结束=====*/

9、⿏标⼿势：

在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”

10．注释书写规范

1、⾏间注释：

直接写于属性值后⾯，如：

.arch{

border:1pxsolid#fff;/*定义搜索输⼊框边框*/

background:url(../images/)no-report#333;/*定义搜索框的背景*/

}

2、整段注释：

分别在开始及结束地⽅加⼊注释，如：

/*=====搜索条=====*/

.arch{

border:1pxsolid#fff;

background:url(../images/)no-repeat#333;

}

/*=====搜索条结束=====*/

3．协助注释

⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。

在区域注释或单⾏注释的基础上加上修改⼈和修改时间等信息。

例(区域注释)：

[/pre]

和修改时间]*/[/pre].class{[/pre]...[/pre]}[/pre].class{[/pre]...[/pre]}[/pre]/*=E注释内容[修改⼈和修改时间]*/[/pre]例(单⾏注释)：[/pre]

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚⾄是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类⽽有相同的属

性及属性值时，合并缩写可以减少代码量并易于控制。如：

#mainMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

height:30px;

overflow:hidden;

}

#subMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

height:20px;

overflow:hidden;

}

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

overflow:hidden;

}

#mainMenu{height:30px;}

#subMenu{height:20px;}

2、同⼀属性的缩写：

同⼀属性根据它的属性值也可以进⾏简写，如：

.arch{

background-color:#333;

background-image:url(../images/);

background-repeat:no-repeat;

background-position:50%50%;

}

.arch{

background:#333url(../images/)no-repeat50%50%;

}

3、内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

.btn{

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

则可缩写为：

.btn{

Margin:10px8px12px5px;

Padding:10px8px12px5px;

}

⽽如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn{

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

缩写为：.btn{margin:10px5px;}

⽽当上下左右四个边框的属性值都相同时，则可以直接缩写成⼀个，如：

.btn{

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

缩写为：

.btn{margin:10px;}

4、颜⾊值的缩写：

当RGB三个颜⾊值数值相同时，可缩写颜⾊值代码。如：

.menu{color:#ff3333;}

可缩写为:

.menu{color:#f33;}

12．hack书写规范

因为不同浏览器对W3C标准的⽀持不⼀样，各个浏览器对于页⾯的解释呈视也不尽相同，⽐如IE在很多情况下就与FF存在3px的差距，对于

这些差异性，就需要利⽤css的hack来进⾏调整，当然在没有必要的情况下，最好不要写hack来进⾏调整，避免因为hack⽽导致页⾯出现问

题。

1、IE6、IE7、Firefox之间的兼容写法：

写法⼀：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别!important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同⼀类/ID下的CSShack可写为：

.archInput{

background-color:#333;/*三者皆可*/

*background-color:#666!important;/*仅IE7*/

*background-color:#999;/*仅IE6及IE6以下*/

}

⼀般三者的书写顺序为：FF、IE7、IE6.

写法⼆：

IE6可识别“_”，⽽IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.archInput{

background-color:#333;/*通⽤*/

_background-color:#666;/*仅IE6可识别*/

}

写法三：

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

.archInput{background-color:#333;}

*Input{background-color:#666;}/*仅IE6*/

*+Input{background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

lect是选择符，根据情况更换。第⼆句是MAC上safari浏览器独有的。

*:lang(zh)lect{font:12px!important;}/*FF的专⽤*/

lect:empty{font:12px!important;}/*safari可见*/

IE6可识别：

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

lect{display/*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

OnlyIE

只有IE5.0可以识别:

OnlyIE5.0

IE5.0包换IE5.5都可以识别:

OnlyIE5.0+

仅IE6可识别:

OnlyIE6-

IE6以及IE6以下的IE5.x都可识别:

OnlyIE6/+

仅IE7可识别:

OnlyIE7/-

13、清除浮动：

在Firefox中，当⼦级都为浮动时，那么⽗级的⾼度就⽆法完全的包住整个⼦级，那么这时⽤这个清除浮动的HACK来对⽗级做⼀次定义，那

么就可以解决这个问题。

lect:after{

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}

注意事项:

和class命名采⽤该版块的英⽂单词或组合命名，并第⼀个单词⼩写，第⼆个单词⾸个字母⼤写，如:newRelea（最新产

品/new+Relea)

常⽤类的命名应尽量以常见英⽂单词为准，做到通俗易懂，并在适当的地⽅加以注释。对于⼆级类/ID命名，则采⽤组合书写的模式，后⼀个

单词的⾸字母应⼤写：诸如“搜索框”则应命名为“archInput”、“搜索图标”命名这“archIcon”、“搜索按钮”命名为“archBtn”……

样式表各区块⽤注释说明

3.尽量使⽤英⽂命名原则

4.不⽤加中杠和下划线

5.尽量不缩写，除⾮⼀看就明⽩的单词

6．检查HTML元素是否有拼写错误、是否忘记结束标记

即使是⽼⼿也经常会弄错div的嵌套关系。可以⽤dreamweaver的验证功能检查⼀下有⽆错误。

7.检查CSS是否正确

检查⼀下有⽆拼写错误、是否忘记结尾的}等。可以利⽤CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的⼯具，但也能检

查出拼写错误。

8.确定错误发⽣的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显⽰恢复正常，即可确定错误发⽣的位置。

9.利⽤border属性确定出错元素的布局特性

使⽤float属性布局⼀不⼩⼼就会出错。这时为元素添加border属性确定元素边界，错误原因即⽔落⽯出。

元素的⽗元素不能指定clear属性

MacIE下如果对float的元素的⽗元素使⽤clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会⾛弯路。

元素务必指定width属性

很多浏览器在显⽰未指定width的float元素时会有bug。所以不管float元素的内容如何，⼀定要为其指定width属性。

另外指定元素时尽量使⽤em⽽不是px做单位。

元素不能指定margin和padding等属性

IE在显⽰指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套⼀个div来

设置margin和padding）。也可以使⽤hack⽅法为IE指定特别的值。

元素的宽度之和要⼩于100%

如果float元素的宽度之和正好是100%，某些古⽼的浏览器将不能正常显⽰。因此请保证宽度之和⼩于99%。

14.是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前⾸先将全体的margin、padding设置为0、列表样式设置为

none等。

15、float的div⼀定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;)

程序代码

<#divid="floatA">

<#divid="floatB">

<#divid="NOTfloatC">

这⾥的NOTfloatC并不希望继续平移，⽽是希望往下排。

这段代码在IE中毫⽆问题，问题出在FF。原因是NOTfloatC并⾮float标签，必须将float标签闭合。在程序代码

<#divclass="floatB">

<#divclass="NOTfloatC">

之间加上程序代码

<#divclass="clear">

这个div⼀定要注意声明位置，⼀定要放在最恰当的地⽅，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异

常。

并且将clear这种样式定义为为如下即可：

程序代码

.clear{

clear:both;}

此外，为了让⾼度能⾃动适应，要在wrapper⾥⾯加上overflow:hidden;

当包含float的box的时候，⾼度⾃动适应在IE下⽆效，这时候应该触发IE的layout私有属性(万恶的IE啊！)⽤zoom:1;可以做到，这样就达

到了兼容。

例如某⼀个wrapper如下定义：

程序代码

.colwrapper{

overflow:hidden;

zoom:1;

margin:5pxauto;}

16、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。

解决⽅案是在这个div⾥⾯加上display:inline;

例如：

<#divid="imfloat">

相应的css为

程序代码

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

17、关于容器的包涵关系

很多时候，尤其是容器内有平⾏布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。⼀

定要⽤Photoshop或者Firework量取像素级的精度。

18、关于⾼度的问题

如果是动态地添加内容，⾼度最好不要定义。浏览器可以⾃动伸缩，然⽽如果是静态的内容，⾼度最好定好。（似乎有时候不会⾃动往下

撑开，不知道具体怎么回事）

常见兼容问题：

E影响CSS处理

:div设置margin-left,margin-right为auto时已经居中,IE不⾏

:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)⽅可居中

:设置padding后,div会增加height和width,但IE不会,故需要⽤!important多设⼀个height和width

:⽀持!important,IE则忽略,可⽤!important为FF特别设置样式

的垂直居中问题:vertical-align:middle;将⾏距增加到和整个DIV⼀样⾼line-height:200px;然后插⼊⽂字，就垂直居中了。缺点是要控

制内容不要换⾏

:pointer可以同时在IEFF中显⽰游标⼿指状，hand仅IE可以

:链接加边框和背景⾊，需设置display:block,同时设置float:left保证不换⾏。参照menubar,给a和menubar设置⾼度是为了避免底

边显⽰错位,若不设height,可以在menubar中插⼊⼀个空格。

9.在mozillafirefox和IE中的BOX模型解释不⼀致导致相差2px解决⽅法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序⼀定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成

这样：

div{maring:30px;margin:28px}

重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;

5和IE6的BOX解释不⼀致

IE5下程序代码

div{width:300px;margin:010px010px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以300px+10px(右填

充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width/**/:340px;margin:010px010px}

关于这个/**/是什么我也不太明⽩，只知道IE5和firefox都⽀持但IE6不⽀持，如果有⼈理解的话，请告诉我⼀声，谢了！：）

标签在Mozilla中默认是有padding值的,⽽在IE中只有margin有值所以先定义

程序代码ul{margin:0;padding:0;}

注意书写格式的问题：

⼀定要注意缩进。对齐。要有良好的编程习惯。