转载自：http://echorightcss.blog.51cto.com/321209/63689

将CSS应用到XHTML之中，首先要做的就是选择合适的选择符，选择符是CSS控制XHTML文档中对象的一种方式，简单地说，它用于告诉浏览器这段样式将应用到哪个对象。

1、CSS属性与选择符

CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value ）。

使用方法：selector ( Property : value ; )

• 选择符（selector）指着组样式编码所要针对的对象，可以是一个XHTML标签，如body、h1；也可以是定义了特定 id 或 class 的标签，如 #main 选择符表示选择，即一个 被指定了main为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
• 属性（Property）是CSS样式控制的核心，对每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
•  值（value）是指属性的值，形式有两种，一种是指定范围的值，如float属性，只可能应用left、right、none三种值；另一种为数值，如width能够使用0-9999px或其他数学单位来制定。

在实际应用中，我们往往使用以下类似的应用形式：body { background-color : blue ; } 表示选择符为body，即选择了页面中的这个标签，属性为background-color这个属性用于控制对象的背景颜色，而值为blue。页面中的body对象的背景颜色通过使用这组CSS编码，被定义了蓝色。

除了单个属性的定义，同样可以为一个标签定义一个至更多个属性定义，每个属性之间使用逗号分开。

[cc lan=”css”]

p{
text-align : center ;
color : black ;
font-family : arial :
}

[/cc]

p标签被我们指定了3样式属性，包含对齐方式文字颜色及字体。同样一个id，或一个class，都能通过相同的形式编写样式。

[cc lan=”css”]

#content {
text-align : center ;
color : black ;
font-family : arial ;
}

.title{
line-height : 25px ;
color : blue :
font-family : arial ;
}

[/cc]

2、类型选择符

上面的body {}就是一种类型选择符。所谓类型选择符，是指以网页中已有的标签类型作为名称的选择符，body是网页中的一个标签类型，div也是，span也是。因此以下选择符都是类型选择符，而它们将控制页面中所有的body或div或span ：

[cc lan=”html”]
body {}
div {}
span {}
[/cc]

3、群组选择符

除了对于单个XHTML对象进行样式指定，同样可以对一组对象进行相同的样式指派。

[cc lan=”css”]

h1,h2,h3,p,span P{
font-size : 12px ;
font-family : arial ;
}

[/cc]

使用逗号对选择符进行分割，使得页面中所有的h1,h2,h3,p及span都将具有相同的样式定义。这样做的好处是对于页面中需要使用相同样式的地方只需要书写一次样式表即可实现，减少代码量，改善CSS代码的结构。

4、包含选择符

[cc lan=”css”]

h1 span {
font-weight : bold ;
}

[/cc]

当我们仅仅相对某一个对象中的子对象进行样式指定时，包含选择符就派上了用场。包含选择符指选择符组合中前一个对象包含后一个对象，对象之间使用空格作为分隔符。如本例所示。我们对h1下面的span进行样式指派，最后应用到XHTML是如下格式：

[cc lan=”html”]

这是我们的一段文本这是span内的文本

单独的h1

单独的span

被h2标签套用的文本这是h2下的span

[/cc]

h1标签之下的span标签将被应用font-weight : bold的样式设置。注意，仅仅对有此结构的标签方式有效，对于单独存在h1或是单独存在的span机器他非h1标签下属的span均不会应用此样式。

这样做能够帮助我们避免过多的id及class的设置，直接对所需要设置的元素进行设置。包含选择符除了可以二者包含，也可以多级包含，如下选择符样式同样能够使用：

[cc lan=”css”]

body h1 span strong {
font-weight : bold ;
}

[/cc]

5、id及class选择符

id选择符及class选择符均是CSS提供的由用户自定义标签名称的一种选择符模式，用户可以使用id及class对页面中的XHTML标签进行自定义名称，从而达到扩展XHTML标签及组合XHTML标签的目的。比如对XHTML中的h1标签而言，对于CSS，如果使用id进行选择符，那么<h1 id=”pl”>及<h1 id=”p2″>对于CSS来讲是两个不同的元素，从而达到扩展的目的。用户自定义名称的方式也有助于用户细化自身的界面结构，使用符号页面需求的名称来进行结构设计，增强代码的可读性。

id选择符

id选择符是根据DOM文档对象模型原理所出现的选择符类型。对于一个网页而言，其中的每一个标签（或其他对象），均可以使用一个id=””的形式对id属性进行一个名称的指派，id我们可以理解为一个标识，在网页中对每个id名称只能使用一次。

[cc lan=”html”]

[/cc]

如本例所示，XHTML中的一个div标签被我们指定了id名为content。在CSS样式中，id选择符使用#符号进行标识，如果我们需要对id为content的标签设置样式，应当使用如下格式：

[cc lan=”css”]

#content {
font-size : 14px ;
line-height : 130% ;
}
[/cc]

id的基本作用是对每一个页面中的唯一出现的元素进行定义。如可以对导航条命名为nav，对网页的头部和底部命名为header和footer。对于类似于此的元素在页面中均出现一次，使用id进行命名具有进行唯一性的指派含义，有助于代码阅读与使用。

class选择符

如果说id是对于XHTML标签的扩展的话，那么class应该是对XHTML多个标签的一种组合。class直译为类或类别。对于网页设计而言，我们可以对XHTML标签使用一个class=”‘的形式对class属性进行名称指派。与id不同的是，class允许重复使用，如页面中的多个元素，都可以使用同一个class定义。
[cc lan=”html”]

[/cc]

使用class的好处是，对于不同的XHTML标签，CSS可以直接根据class名称来进行样式指派：

[cc lan=”css”]
.p1 {
Margin : 10px ;
Background-color : blue ;
}
[/cc]

class在CSS中的使用点符号 .  加上class名称的形式，如上例所示，我们对class名称来进行样式指派。无论是什么XHTML标签，页面中所有使用了class=”p1″的标签均使用此样式进行设置。class选择符也是对CSS代码重用性的良好提现，众多标签均可以使用同一个class来进行样式指派，不再需要每一个编写样式代码。

6、标签指定式选择符

如果既想使用id或class，也想同事使用标签选择符，可以使用如下格式：

[cc lan=”css”]h1#content {}[/cc]
表示针对所有id为content的h1标签。

[cc lan=”css”]h1.p1{}[/cc]
表示针对所有class为p1的h1标签。

标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也是一种经常能够使用到的选择符形式。

7、组合选择符

对于上述所有CSS选择符而言，无论是什么样的选择符，均可以进行组合使用。

[cc lan=”css”]h1.p1{}[/cc]
表示h1标签下的所有class为p1的标签；

[cc lan=”css”]#content h1{}[/cc]
表示id为content的标签下的所有h1标签；

[cc lan=”css”]h1.p1,#content h1{}[/cc]
以上两者进行群组选择；

[cc lan=”css”]h1#content h2{}[/cc]
id为content的h1标签下的h2标签。

CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选择符进行设计。

8、伪类及伪对象

伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下：

[cc lan=”css”]
a : hover {
background-color : #333333 ;
}
[/cc]

伪类和伪对象由一下两种形式组成：
[cc lan=”html”]

• 选择符： 伪类
• 选择符： 伪对象

[/cc]

本例中的hover便是一个伪类，用于指定链接标签a的鼠标移上状态。CSS内置了几个标准的伪类用于用户的样式定义。

: link                 a链接标签的未被访问前的样式；

: hover              对象在鼠标移上时的样式；

: active              对象被用户点击及被点击释放之间的样式；

: visited             a链接对象被访问后的样式；

: focus               对象成为输入焦点时的样式；

: first-child        对象的第一个子对象的样式；

: first                 对于页面的第一页使用的样式；

同样，CSS内置了几个标准伪对象用于用户的样式定义：

: after                设置某一个对象之后的内容；

: first-letter       对象内的第一个字符的样式设置；

: first-line          对象内第一行的样式设置；

: before             设置某一个对象之前的内容。

实际上，除了对于链接样式控制的 : hover , : active几个伪类之外，大多数伪类及伪对象在实际使用上并不常见到。我们所接触到的CSS布局中，大部分是有关于排版及样式，对于伪类及伪对象所支持的多数属性很少用到，但是不排除使用的可能，由此可看到CSS对于样式及样式中的对象的逻辑关系，对象组织提供了很多便利的接口。

9、通配选择符

如果接触过DOS命令或是word中替换功能，对于通配符操作应该不会陌生，通配符是指使用字符代替不确定的字，如在dos命令中，使用 *.* 表示所有文件，使用 *.bat表示所有扩展名为bat的文件。因此，所谓通配选择符，也是指我们对对象可以使用模糊指定的方式进行选择。CSS的通配符使用 * 作为关键字，使用方法如下：

[cc lan=”CSS”]
* {
color : blue ;
}
[/cc]

*号使用表示所有对象，包含所有不同id不同class的XHTML的所有标签。使用如上的选择符进行样式定义，页面中所有对象都会使用color : blue ; 的字体颜色。