CSS学习之第二章《选择符与结构》(1)

规刚结构：

每条规则有两个部分：选择符和声明（declaration），每条声明实际上是属性和值的组合。

例：H1{color:purple;}

H1为选择符，color为属性，purple为值，{}内的所有东西为声明。

例：

<style type="text/css">

body{color:black;}

h1{color:purple}

h3{color:gray;}

strong{color:red;}

em{color:maroon;}

</style>

This is H1 text

This is H3 text

This is strong text

This is em text.

---

分组：可以是多个元素组合在一起，中间用“，”隔开。如：body,table,th,td,h1,h2,p,{color:gray;}

例：

h1{color:purple;background:white;}

h2{color:purple;background:green;}

h3{color:white;background:green;}

h4{color:purple;background:white;}

b{color:red;background:white;}

可以分组如下：

h1,h2,h4{color:purple;}

h1,h4,b{background:white;}

h2,h3{background:green;}

h3{color:white;}

b{color:red;}

---

分组声明：例：h1{font 18pt Helvetica;  color:purple; background:apua;}   当在一条规则中分组声明时，分号作为分隔符使用，这一点很重要。上面的格式也可为如下：

h1{

   font: 18pt Helvetica;

   color:purple;

   background:aqua;

}

例：

h1{color:gray;}

h1{background:white;}

h1{border:1px solid black;}

h1{padding:0.5em;}

h1{font: 20pt Charcoal,sans-serif;}

h1{text-transform:capitalize;}

可以写成如下：

h1{color:gray; background:white; border:1px solid black; padding:0.5em; font:20pt Charcoal,sans-serif; text-transform:capitalize;}

这两种声明显示的结果一样。

---

同时分组：把分组选择符和分组声明结合起来，就可以用一条语句来定义复杂的样式。如：h1,h2,h3,h4,h5,h6,h7{color:gray; background:white; padding:0.5em; border:1px solid black; font-family:Charcoal,sans-serif;}