### 基本规则
每CSS规则由两部分组成：选择器和声明块，声明由一个或多个声明组成，每个声明是一个属性－值对.
### 1.元素选择器
元素是最基本的选择器, h1，p，a都可以直接做为选择器，甚至是html本身.
~~~
h1{color:#66CCFF;}
h2{color:silver;}
p{font-size:20px;color:#cccccc;}
~~~
一个选择器可以有多个声明，声明之间用分号隔开；一个属性也可以有多个值，中间用空格隔开.给h1加上边框，边框颜色会灰色，边框样式为实线，可以这样写：
~~~
border:1px solid #cccccc;
~~~
选择器分组：如果想同时把不同元素设置相同对样式，可以使用分组同时使用, 选择器之间用逗号隔开。比如需要把h1 和p都设置为字体颜色为红色：
~~~
h1,p{color:red;}
~~~
### 2. 通配选择器
通配选择器用一个星号(*)表示，这个选择器可以和任何元素匹配。例如，要把一个文档中所有的元素颜色都设置成银色，可以这样写：
~~~
*{color:silver;}
~~~
### 3. ID选择器
使用元素选择器会把一个文档中所有都元素都设置为同一样式，以h1{color：red;} 为例，会把所有的h1标签设置为红色，如果只想对一个特定的h1设置样式，可以通过设置id的方式定义规则.
~~~
<p id="p1">test1</p>
<p id="p2">test2</p>
~~~
只对第二个p标签设置样式：
~~~
#p2{color:silver;}
~~~
### 4.类选择器
通过给元素设置标记，同一类的元素可以有相同多样式.
下面的h1和p元素属于同一类，类名为cal.
~~~
<h1 class="cla">Hello World</h1>
<h2>safe information</h2>
<p class="cla">Where there is a will,there is a way</p>
~~~
设置CSS样式：
~~~
.cal{color:color:#FF8000;}/*h1和p具有相同的颜色*/
~~~
也可以单独设置：
~~~
p.cal{ color:yellow;}/*对h1没有作用*/
~~~
- 多类选择器
下面对html代码中有2个p标签，第一个p标签有两个类标记，第二个p标签有一个类标记.
~~~
<p class="urgent warning"> When handling plutoium,care must be taken to ...</p>
<p> With plutoium,<span class="warning">The possibility...</span></p>
~~~
我们将类名为waring的标签字体颜色设为红色，类名为urgent的标签字体颜色设为绿色，那么类名为warning和urgent的标签应该是什么？
~~~
.warning{color:red;}
.urgent{color:green;}
~~~
这种情况只保留写在后面的类的属性，写在前面的会被覆盖掉. 对于多类名的也可以通过下面的方式设置：
~~~
.urgent.warning{background-color:blue;}
~~~
