3 photolemur 样式_3.2 代码格式

1.样式表单行写完一个选择器定义

采用紧凑的书写规则，这样做可以更加精简样式表、代码更加紧凑减少换行、便于阅读和理解。

/*导航*/

#navigation_main { background:url(../images/navigation_bg.jpg) repeat-x;}

#navigation { height:49px; }

#navigation ul.navigationlist li { float:left; line-height:49px; text-align:center; }

#navigation ul.navigationlist li a { display:block; padding:0px 15px; font-size:14px; font-weight:bold; color:#FFF;}

#navigation ul.navigationlist li a:hover { text-decoration:none; color:#ffe400; background:none; }

#navigation ul.navigationlist .current { color:#ffe400; }如果有嵌套定义，可以采取内部单行的形式。 /* 单行定义一个选择器 */

h3{width:100px;padding:10px;border:1px solid #ddd;}

/* 这是一个有嵌套定义的选择器 */

@media all and (max-width:600px){

.item1{height:17px;line-height:17px;font-size:12px;}

.item2{width:100px;overflow:hidden;}

}

@-webkit-keyframes showitm{

0%{height:0;opacity:0;}

100%{height:100px;opacity:1;}

}但是当一个样式类的样式过多时，可以更具实际情况进行换行 /*属性太多，必须多行书写，但尽可能地减少行数*/

.form_text{ height:20px; line-height:20px; width:50px; margin-right:3px;padding: 2px;clip: rect;

color: #000000;background-color: #fff;border-color: #a0a0a0 #cbd9eb #cbd9eb #a0a0a0;

border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;

border-left-width: 1px;background: url(../images/form_bg.jpg) repeat-x 0px 0px;

}

/*属性注释太长，不得不分多行书写*/

button,input,select,textarea {

font-size: 100%; /* Correct font size not being inherited in all browsers. */

margin: 3px; /* Address margins set differently in IE 6/7, Firefox 3+, Safari 5,and Chrome */

vertical-align: baseline; /* Improve appearance and consistency in all browsers */

*vertical-align: middle; /* Improve appearance and consistency in all browsers */

}

2.最后一个值也以分号结尾，方便压缩工具"断句"

通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。

3.省略值为0时的单位

为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。 h1,h2{margin:0; padding:0; text-indent:0;}

h1,h2{margin:0px; padding:0px;text-indent:0em;}

4.使用引号

省略url引用中的引号，但是如果url中存在空格字符，则必须加引号，其他需要引号的地方使用引号。 .title{background:url(bg.png);}

.title{background:url("../programs files/bg.png");}

.title:after{content:".";}

5.使用16进制表示颜色值

除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。 .title{color:#f00;background:rgba(0,0,0,0.5);}

6.尽量根据属性的重要性按顺序书写

只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。

→

显示属性

自身属性

文本属性和其他修饰

display

width

font

visibility

height

text-align

position

margin

text-decoration

float

padding

vertical-align

clear

border

white-space

list-style

overflow

color

top

min-width

background

#left{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}如果属性间存在关联性，则不要隔开写。 /* 这里的height和line-height有关联性 */

#left{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}

7.私有在前，标准在后

先写带有浏览器私有标志的，后写W3C标准的。 .title{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}

.toollist{

background-image:-o-linear-gradient(top, #8BD73C, #0f780f);

background-image:-ms-linear-gradient(top, #8BD73C, #0f780f);

background-image:-moz-linear-gradient(top, #8BD73C, #0f780f);

background-image:-webkit-linear-gradient(top, #8BD73C, #0f780f);

background-image:linear-gradient(top, #8BD73C, #0f780f);

-moz-box-shadow: 0 1px 0 #eee inset;

-webkit-box-shadow: 0 1px 0 #eee inset;

-o-box-shadow: 0 1px 0 #eee inset;

box-shadow: 0 1px 0 #eee inset;

}

8.原则上不允许使用Hack

(1)很多不兼容问题可以通过改变方法和思路来解决，并非一定需要Hack，根据经验你完全可以绕过某些兼容问题。

(2)一种合理的结构和合理的样式，是极少会碰到兼容问题的。

(3)由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。

(4)统一Hack方法：统一使用"*"和"_"分别对IE7和IE6进行Hack。如下代码所示： /* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */

.list{color:#000;*color:#888;_color:#fff;}

9.尽量根据选择器顺序书写

请综合考虑以下顺序依据：

选择器范围：从大到小

等级：从低到高

结构先后：从先到后

结构嵌套：从父到子

以下仅为简单示范： /* 从大到小 */

.index p{margin:0;padding:0;}

.index p.part{margin:1px;padding:1px;}

/* 从低到高 */

.logo a{color:#f00;}

.logo a:hover{color:#fff;}

/* 从先到后 */

.header{height:60px;}

.body{height:60px;}

.footer{height:60px;}

/* 从父到子 */

.list{width:300px;}

.list .item{float:left;}

10.选择器等级

a = 行内样式style

b = ID选择器的数量

c = 类、伪类和属性选择器的数量

d = 类型选择器和伪元素选择器的数量

选择器

等级(a,b,c,d)

style=””

1,0,0,0

#wrapper #content {}

0,2,0,0

#content .dateposted {}

0,1,1,0

div#content {}

0,1,0,1

#content p {}

0,1,0,1

#content {}

0,1,0,0

p.comment .dateposted {}

0,0,2,1

div.comment p {}

0,0,1,2

.comment p {}

0,0,1,1

p.comment {}

0,0,1,1

.comment {}

0,0,1,0

div p {}

0,0,0,2

p {}

0,0,0,1