园子博客

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

Selector { property: value }

参数说明：
Selector — 选择符
property : value — 样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开，详细说明如下：

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

这是在实际应用中对body的一个定义：body {background-color:red;}，下面园子给大家总结了几种常用的选择符。

1. 类选择符
   用类选择符你能够把相同的元素分类定义不同的样式，并且类选择符在网页中可以重复利用。定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
   p.right {text-align: right}
   p.center {text-align: center}
   定义好后在不同的段落里，只要在HTML标记里加入你定义的class参数即可，例如：
   <p class=”right”>
2. 标签选择符
   对网页中已有的标签类型作为名称的选择符，称为标签选择符。如下表示：body标签内的所有文字大小为12px;段落内的文字颜色为蓝色。
   body { font-size:12px; }
   p { color:blue; }
3. 群组选择符
   除了对单个XHTML进行样式指定，同样可以对一组对象进行相同的样式指派
   h1,h2,h3,p,span{font-size:12px; font-family:arial;}
   使用英文逗号对选择符进行分隔，使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做的好处是对于页面中需要使用同样式的地方只需要书写一次样式表即可实现，减少代码量，改善css代码的结构。
4. 包含选择符
   h1 span{font-weight:bold;}
   当我们仅仅想对某一个对象中的子对象进行样式指定时，包含选择符就派上用场。包含选择符指选择符组合中前一个对象包含后一个对象，对象之间使用空格作为个分隔符。如本例子所示。我们对h1下面的span进行样式指派，最后应用到XHTML是如下的格式：
   <h1>这是我们的一段文本<span>这是span内的文本</span></h1>
   <h1>单独的h1</h1>
   <span>单独的span</span>
   <h2>被h2标签套用的文本<span>这是h2下的span</span></h2>
   假如我们定义h1标签之下的span标签将被应用font-weight:bold的样式设置。注意在这个时候，仅仅对有此结构的标签有效，对于单独存在的h1或单独存在的span及其他非h1标签下属的span均不会应用此样式。
   这样做能够帮助我们避免过多的ID及CLASS的设置，直接对所需设置的过犹不及进行设置。
   包含选择符除了可以二级包含，也可以多级包含，如以下选择符样式同样能够作用：
   body h1 span strong{ font-weight: bold;}
5. 标签指定式选择符
   如果既想使用id或class，也想同时使用标签选择符，可以使用如下格式：
   h1#content {}
   表示针对所有id为content的h1标签。
   h1.p1 {}
   表示针对所有class为p1的h1标签。
   标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也是一种经常使用到的选择符形式。
6. 组合选择符
   对于上述所有CSS选择符而言，无论是什么样的选择符，均可以进行组合使用。
   h1 .p1 {}
   表示h1标签下的所有class为p1的标签。
   #content h1{}
   表示id为content的标签下的所有h1标签。
   h1.p1,#content h1{}
   同时定义两个组合选择符。
   h1#content h2{}
   id为content的h1标签下的h2标签。
7. 通配选择符
   如果接触过DOS命令或是word中替换功能，对于通配符操作应该不会陌生，通配符是指使用字符代替不确定的字，如在dos命令中，使用 *.* 表示所有文件，使用 *.bat表示所有扩展名为bat的文件。因此，所谓通配选择符，也是指我们对对象可以使用模糊指定的方式进行选择。CSS的通配符使用 * 作为关键字，使用方法如下：
   * {background-color: #FFF;}
   *号表示针对所有对象，包含所有不同id不同class的XHTML的所有标签。使用如上的选择符进行样式定义，页面中所有对象的背景色均为白色。
8. 伪类及伪对象
   伪类和伪对象是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的对象(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。使用形式如下：
   a:hover {background-color : #333 ;}
   本例中的hover便是一个伪类，用于指定链接标签a的鼠标移上状态。CSS内置了几个标准的伪类用于用户的样式定义。
   • :link 链接标签的未被访问前的样式；
   • :hover 对象在鼠标移上时的样式；
   • :active 对象被用户点击及被点击释放之间的样式；
   • :visited a链接对象被访问后的样式；
   • :focus 对象成为输入焦点时的样式；
   • :first-child 对象的第一个子对象的样式；
   • :first 对于页面的第一页使用的样式；

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

   • :after 设置某一个对象之后的内容；
   • :first-letter 对象内的第一个字符的样式设置；
   • :first-line 对象内第一行的样式设置；
   • :before 设置某一个对象之前的内容。

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