五、区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
六、取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#id1{}可以写成#id1{}
这样可以节省一些字节。
七、默认值
通常padding和margin的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:
* {
padding:0;
margin:0
}
或者是针对某元素来定义:
ul,li,div,span {
padding:0;
margin:0
}
八、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type),伪对象(pseudo-element)
解释:
*内联样式(inline style):元素的style属性,比如 <div style="color:red;"></div> ,其中的color:red;就是行内样式
*ID选择符:元素的id属性,比如 <div></div> 可以用ID选择符#content
*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.
*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。
九、不需要重复定义可继承的值
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用一些默认值覆盖你的定义。
十.多重CSS样式定义,属性追加重复最后优先原则
一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。例如:
我们先定义两个样式
.one{width:200px;background:url(https://www.jb51.net/1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(https://www.jb51.net/2.jpg) no-repeat left top;}
在页面代码中,我们可以这样调用:
<div class="one" two></div>
这样最终的显示效果是这个div样式是什么呢??重复的是以哪一个为准呢??
<div class="one" two></div>应用到的样式如下:










