div+css命名规则

admin · 发表于 2014-8-19 05:36:02

div+css命名规则

页头：header

登录条：loginBar

标志：logo

侧栏：sideBar

广告：banner

导航：nav

子导航：subNav

菜单：menu

子菜单：subMenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

注册：regsiter

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendLink

页脚：footer

版权：copyRight

1.CSS ID 的命名

外　套：　　wrap

主导航：　　mainNav

子导航：　　subnav

页　脚：　　footer

整个页面：　content

页　眉：　　header

页　脚：　　footer

商　标：　　label

标　题：　　title

主导航：　　mainNav（globalNav）

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsideBar

右导航：　　rightsideBar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1Content

菜单容量：　menuContainer

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadCrumb(即页面所处位置导航提示）

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　login

功能区：　　shop(如购物车，收银台)

当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：

<– Footer –>

内容区

<– End Footer –>

3.样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

来源: I?{简单.快乐..} http://l4ever.cn

一．文件命名规范

全局样式：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”、“搜索按钮”命名为“searchBtn

CSS书写规范及方法

一.常规书写规范及方法

1.选择DOCTYPE：

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

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

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

关于DTD您可以参考：

http://www.div-css.net/search.asp?SearchContent=文档类型&searchType=title

2.指定语言及字符集：

为文档指定语言：

<htmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”>

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

常用的语言定义：

<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>

标准的XML文档语言定义：

<?xmlversion=”1.0″encoding=”utf-8″?>

针对老版本的浏览器的语言定义：

<metahttp-equiv=”Content-Language”content=”utf-8″/>

为提高字符集，建议采用“utf-8”。

3.调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：

<styletype=”text/css”><!–body{background:white;color:black;}–></style>

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

<linkrel=”stylesheet”rev=”stylesheet”href=”css/style.css”type=”text/css”media=”all”/>

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenuulli{background:url(images/bg.gif;)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<divid=”mainMenu”>

<ul>

</ul>

</div>

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

#mainMenu{

width:100;

height:30px;

background:url(images/mainMenu_bg.jpg)repeat-x;

}

#mainMenuulli{

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;

}

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

9、鼠标手势：

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

二．注释书写规范

1、行间注释：

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

.search{

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

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

}

2、整段注释：

分别在开始及结束地方加入注释，如：

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

.search{

border:1pxsolid#fff;

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

}

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

关于注释，您可以参考：

http://www.div-css.net/search.asp?SearchContent=注释&searchType=title

三．样式属性代码缩写

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

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：

#mainMenu{

background:url(../images/bg.gif);

border:1pxsolid#333;

width:100;

height:30px;

overflow:hidden;

}

#subMenu{

background:url(../images/bg.gif);

border:1pxsolid#333;

width:100;

height:20px;

overflow:hidden;

}

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

#mainMenu,#subMenu{

background:url(../images/bg.gif);

border:1pxsolid#333;

width:100;

overflow:hidden;

}

#mainMenu{height:30px;}

#subMenu{height:20px;}

2、同一属性的缩写：

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

.search{

background-color:#333;

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

background-repeat:no-repeat;

background-position:5050;

}

.search{

background:#333url(../images/icon.gif)no-repeat5050;

}

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;}

关于缩写您可以参考：

http://www.div-css.net/search.asp?SearchContent=缩写&searchType=title

四．hack书写规范

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

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

写法一：

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

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

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

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

根据上述表达，同一类/ID下的CSS　hack可写为：

.searchInput{

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

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

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

}

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

写法二：

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

.searchInput{

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

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

}

写法三：

* html与*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]–>

关于CSSHACK和BUG您可以参考：

http://www.div-css.net/search.asp?SearchContent=HACK&searchType=title

http://www.div-css.net/search.asp?SearchContent=BUG&searchType=title

2、清除浮动：

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

select:after{

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}

介绍Web规范中的Div+CSS标准的优点:
1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局。
18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

第2章       目标

l       将文档定义<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">换成<?xml version="1.0" encoding="gb2312"?>后保存，能在浏览器中打开无错误。

l       程序员不需关心或了解任何有关界面的表现实现。

l       站点与浏览器无关，或能适应常用浏览器。

l       站点换肤改动量最小（即只需修改配置文件）。

l       站点风格布局随意更换。

第3章       实现前提

程序员

l       程序员不要在页面上加入任何有关页面表现的元素。如页面比较特殊，请在页面的<head></head>中，用用注释的标记表示此页面特殊，不需界面人员修改。

l       程序员在做页面期间使用到ajax等与页面有关技术时，同样在 特性 = 100 */

UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */

LI.red    {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */

LI          {xxx} /* a=0 b=0c=1 --> 特性 = 001 */

4.    特性的顺序

为了方便使用，当两个规则具同样权重时，取后面的那个。

第6章       XHTML概念及规则简略总结

一、       XHTML概念

XHTML是 EXtensible HyperTextMarkup Language(可扩展超文本标记语言) 的英文缩写，并于2000年1月26日被国际标准组织机构W3C(World Wideweb Consortium)定为一个标准的，认为是HTML的一个最新版本，并且将逐渐替换HTML。现在所有的浏览器都支持XHTML，XHTML兼容 HTML 4.0。

XHTML是HTML升级为XML的一种过度技术产品，被定为一个标准，XHTML完全兼容HTML4.01，并且具有XML的语法。

二、       XHTML与HTML的最大区别。

1.       XHTML 元素一定要被正确的嵌套使用。
例：在HTML中，错误的嵌套<div><p>text</div></p>会被浏览器所兼容，而在XHTML中，必须正确嵌套<div><p>text</p></div>！

2.       XHTML 文件一定要有正确的组织格式。
所有的XHTML应该正确的被嵌套在以<html>开始以</html>结束的元素里面，其他的元素可以有子元素，并且子元素也要被正确的嵌套在他们的父元素内。
例：<div><span>text</span></div>是正确的，而<span><div>text</div></span>是错误的，因为span是div的子元素，而不是相反。其他元素关系请参见XHTML语法。

3.       标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序， XML 对大小写是敏感的。象 <br> 和 <BR> 是两个不同的标记。
例：<BODY></BODY>是错误的，必须改为<body></body>。

4.       所有的 XHTML 元素一定要关闭。
XHTML要求有严谨的结构，所有标签必须关闭。不能有没有关闭的空的元素存在我们的代码中，有开始就应该有结束。独立的一个标签我们也要结束用 />来结束。
例：<p>text是错误的，必须改为<p>text</p>。<br><hr>是错误的，必须改为<br/><hr />。

5.       属性名字必须小写。
<table ID=”table”>是错误的，必须改为<tableid=”table”>

6.       属性的缩写被禁止。
XHTML规定所有属性都必须有一个值，没有值的就重复本身。
例：<input checked>是错误的，必须改为<input checked=”checked” />

7.       所有的属性必须用双引号""括起来。
<table id=table>是错误的，必须改为<tableid=”table”>。

8.       XHTML DTD定义文档的类型。
在XHTML中我们必须声明文档的类型，以便于浏览器知道你的文档是什么类型的，而且声明部分要加在文档的head之前。DOCTYPE声明是必不可少的关键组成部分，否则标识和CSS都不会生效。
<!DOCTYPE ...>
　　<html>
　　<head>
　　<title>... </title>
　　</head>
　　<body> ... </body>
　　</html>

9.       DTD声明类型。

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
写法：<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性。
写法：<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
写法：<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
第7章       针对IE6,IE7,Firefox的CSS

[转]

用CSS进行构建网页的时候，IE6跟Firefox之间的差异问题可以用 !important 来解决（这种方法尽量少用），但是IE7似乎还是不认识 !important ，而且它跟IE6之间也存在一些差异。浏览器的不一致性总是让人很头疼！

下面分别给出IE6\IE7\Firefox的hack代码：

#example { color: #333 !important; }    /* Firefox */

* html #example { color: #666; }    /* IE6 */

*+html #example { color: #999; }    /* IE7 */

那么在Firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们之间互不干扰。
判断浏览器类型

注释中的东西只有小于版本7的IE采取执行，其他浏览器都忽略。

第8章       Css优先权

[转]

优先权问题其实就是一个冲突解决的问题，当同一个元素(或内容)被CSS选择符选中时，就要按照优先权取舍不同的CSS规则，这其中涉及到的问题其实很多。

首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则：

* 每个ID选择符(#someid)，加 0,1,0,0。
* 每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
* 每个元素或伪元素(:firstchild)等，加0,0,0,1
* 其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。

按这些规则将数字串逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。

举一些例子吧：

h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
——后者胜出

h2.grape {color: purple;}

/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;} /*一个普通元素，结果是0,0,0,1 */
——前者胜出
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
——后者胜出

除了specificity还有一些其他规则

* 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style=”color: red”>blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。
* 有!important声明的规则高于一切。
* 如果!important声明冲突，则比较优先权。
* 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
* 由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
* 关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
   这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。

所以优先权问题虽然看起来简单，但其背后还是有蛮复杂的机制
第9章       CSS的十八般技巧

[转]

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100pxwidth:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating aselector’s specificity》了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

<div class="one two"></div>

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#"class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#"class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#"class="subnavitem"> Item 1</a> </li>
</ul>
</div>

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a></li>
<li> <a href="#"> Item 1</a> </li>
</ul>

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url("images/***.gif") #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVeHAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《LinkSpecificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simpleclearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《ContainingFloats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url("main.css");

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import "main.css";

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’scss filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

* 1.注释的方法
      o (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
         html>bodyp {
         /* 定义内容 */
         }
      o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
         * html p {
         /*declarations */
         }
      o (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
         /* \*/
         * html p {
         declarations
         }
         /* */
* 2.条件注释(conditionalcomments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditionalcomments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：



十七.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

蜡笔蘑菇 · 发表于 2014-9-21 10:28:03

谢谢老大，幸苦了

		自动登录	找回密码
密码			立即注册

div+css命名规则

相关帖子