今天说一下网页设计中的要用到的CSS样式表的概念知识，这是在介绍布局之前小慕必须要先介绍的必要概念知识。

CSS语法格式

废话不多说，如下所示：

*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:400px;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}

这些css样式都是之后例子中用到的CSS内容，从这些样式中可以看出来，CSS的语法格式如下：

选择器{属性:属性值;属性:属性值;...}

当然如果已使用DW生成的格式应该是这样的格式：

选择器{

    属性:属性值;

    属性:属性值;

    ...

}

无论怎样的格式都可以看到CSS语法格式主要由三个部分组成：其中选择器可以是ID、CLASS或标签，上边的代码中出现的*(泛指很多的标签选择器)、body(标签选择器)、#header等(ID选择器)、.bs（class选择器或类选择器）；而{}内的属性和属性值是用来定义这个物件的某一个特性。关于书写的形式这里没有要求，依个人喜好而定。小慕个人比较倾向第一种写法，这样的代码节省空间，修改查错时视野可以比较开阔，不需要大量的翻找代码。

选择器：ID和CLASS选择器

上边有提到了三种常用的选择器，这里小慕详细介绍选择器的类型，其基本类型主要有以下四种：

1、标签选择器(body、a、h1、p等)：既网页中的出现的各种标签；

2、ID选择器(#header、#center、#footer，有的称其为高级选择器)：以#开头的即为ID选择器，#后跟的是在网页中定义的ID值；

3、class选择器也叫类选择器(.bs)：以.开头的即为class选择器，.后跟的是在网页中定义的class值；

4、高级选择器(a:hover、a:link等，有的称为伪类选择器)：高级选择器（伪类选择器）一般是在一个普通选择器后跟着一个":"然后再跟上一个hover、link等组成高级选择器，这个后边小慕会单独进行讲解。

当然也可以把CSS样式写在标签内部，形成内部样式。不过为了简洁代码，不建议把CSS样式写在标签内部，除非有什么特殊的情况下才写在内部。

解释下ID和class的区别吧：

ID相当于我们身份证号，他是唯一的，一个网页中只允许出现一次，就像你的身份证号是唯一的，不会出现谁和你的号是一样的，用身份证号就能找到你。

class就相当于一个集体，可以重复，一个网页可以出现多个，比如高三9班、上海人等指的是一群或一类有某些共同特性的人。

注意：我们还会发现有很多其他形式的选择器出现，但是这些都是基于以上四种基本类型选择器组合在一起出现的，小慕称之为组合选择器，因此小慕不会把他等同于上边的四个基本类型的选择器，当然如果你非要把他们等同也不是不可以，这些小慕也是木有办法的。

常出现一些组合选择器：

后代选择器（.div span{color:Red;}） 就是用空格隔开的多个选择器，此处的指的是类名为div的标签内有个span标签，然后设置span标签的文字为红色。

子选择器（.div>li{width:120px;}） 就是选择器之间有“>”符号连接的组合选择器，此处这个选择器是找到类名为div的标签内的最近的一级仅且一级li标签宽度设为为120像素，而不会影响li内再可能出现的被其包裹的二级列表中li标签，而如果使用上边的后代选择器再无别的设置之下则是会把类名为div的标签内的全部li标签都会设置成120像素的宽度，不分层次关系。

这两个都是像洋葱皮一样的组合选择器，可以突出层次结构。

群组选择器（div,#box,.bs,span,img{color:Red;}） 就是把多个选择器写在一起，用“,”隔开设置一些相同的属性，这些选折器互不干扰，也没有明确的层级的关系，只是有某些属性一样而已，她们可以是包裹或被包裹关系，也可以是兄弟标签之间的关系，也可以其他更为复杂的关系，这些选择器也可以是不同种类的，标签选择器、ID选择器、class选择器甚至后代选择器和子选择器都可以。

*选择器 上面代码中出现的*{..}就是较大的一个组合选择器，把几乎包括了所有的标签选择器，当然也有列外，比如他就不可以改变a标签的字体颜色。

选择器的优先级

所谓优先级就是你所设置的样式优先显示在页面上的级别，高级别会覆盖掉低级别的样式使低级别的样式失效，上边提到的选择器和样式格式中的优先级别是：内部样式>ID选择器>class选择器>标签选择器。

高级选择器（伪类选择器）一般出现在焦点汇聚时显示出来的效果，固不在这些等级中，当然，其被特定方式激活时（比如鼠标悬浮设置样式的标签上时）就会高于任何样式显示出来，而不被激活时，低于任何选择器，小慕以后会具体详解。

而关于后代选择器和子选择器就相当于级别分层相加，用下边的表示：

ID=II

class=I

标签=1(数字)

举个例子吧，代码如下：

<div id="box">
   <div class="bs">
      <p><span>慕轲博客</span></p>
   </div>
</div>

此处不涉及标签内部样式，有内部样式都以内部样式优先。有以上代码，下面有几个样式写法：

.bs p{color:red;}    I+1=A

.bs p span{color:edr;}    I+1+1=B

#box p span{color:red;}   II(+I)+1+1=C

#box .bs  p{color:red;}   II+I+1=D

上边的优先级是：C>D>B>A；俩个优先级比较时比较的先后顺序：先比较II，一方空，飞空则优先级高；都空或者同级别的II，在进行I的比较，依次类推，为简洁起见有的可能会省去本来存在的而不影响样式的一些中间选择器不写，这点比较时尤为重要一定要加上。

比较中II>>I>>1，>>指优先级远大于，比如再多个 I  相加也不会大于 II，就是这个道理。

本来准备本文介绍下页面的一列布局的，但是后来小慕发现CSS的这些还是比较重要的，就单独介绍了一下，希望对大家有所帮助，谢谢大家。

---

转载请注明本文标题和链接：《CSS样式表的语法格式和选择器简介》