1.1 定义CSS的基本语法
在生活中，我们描述一个对象的时候，比如一个学生的基本情况，可以这样进行描述：
李敏{
年龄:18;
性别:男;
身高:175：
}
通过这样的描述把一个学生的基本信息都表达清楚了，其中的要素有3个：姓名、属性和属性值。每一组属性和属性值都描述了学生这个对象某方面的一个特性。同样，CSS用于网页元素的某方面特性的设置，因此我们可以采用类似上面这样的描述方法来通过CSS设置网页的显示效果。例如：
1级标题{
字体:黑体;
大小:24像素;
颜色:黑色；
}
因为实际的代码都采用了英文书写，所以可以得到如下代码：
h1{
font-family:黑体；
font-size:24px;
color:black;
}
这就是CSS代码。可见，CSS代码非常简单，只要理解了它的含义，很快就可以掌握。CSS就是由“对象”、“属性”和“值”3个基本部分组成的。
CSS基本语法：选择器{属性1:属性值; 属性2:属性值;...}
1.2 CSS基本选择器
在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行样式设置。所以，它有一个专门的名称——选择器（selector）。所有的HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式的声明，即可实现各种效果。
在CSS中，有几种不同的选择器，可分为基本选择器和复合选择器。基本选择器有3种，复合选择器是通过对基本选择器进行组合构成的。
基本选择器包括3种，分别是HTML标记选择器、类选择器和ID选择器。
1.2.1HTML标记选择器
网页是由HTML标记组成的，CSS的HTML标记选择器的作用就是声明哪些HTML标记采用了哪些CSS样式。所以，网页中的任何一个HTML标记都可以作为相应的标记选择器的名称。例如div选择器就是声明当前页面中所有的<div>标记的显示效果，例如下面的代码：
<style>
div(标记选择器){
border-10px;
border-color:red;
margin:20px;
}
</style>
上述CSS代码声明了HTML页面中所有的<div>标记，采用的边框宽度都是10px，边框颜色都为红色，外边距都为20px。
1.2.2 类选择器
使用HTML标记选择器可以设置页面中所有相同标记的统一格式，但如果需要对相同标记中某些个别标记做特殊效果设置，使用HTML标记选择器就无法实现了，需要引入其他的选择器。
类(class)选择器允许以一种独立于文档元素的方式来指定样式。class选择器的对象名称可以由用户自定义，属性和属性值的设置和HTML标记选择器相同。类选择器语法结构：
.classname{property:value;}
【示例】类选择器应用
<!-- .html文件 -->
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例</title>
<link href="new_file.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="a1"> a </div>
<div class="a2"> b </div>
<div> c </div>
</body>
</html>
<!-- .css文件 -->
div{
border-style: dashed;
border- 5px;
border-color: yellow;
margin: 10px;
}
.a1{
border-style:solid;
border-1px;
border-color:red;
margin: auto;
}
.a2{
border-style: dotted;
border- 1px;
border-color: blue;
margin: 20px;
}
在HTML网页中可以同时使用多个class选择器。
1.2.3 ID选择器
其实ID选择器跟类选择器(class selector)的功能一样，两者主要的区别在于它们的语法和用法不同。ID选择器在HTML页面中必须唯一，针对性更强。另外，ID选择器对于javascript操纵HTML元素有帮助。
基本语法：#IDname{property:value;}
ID选择器不能用于多个标记。因为每个标记定义的id不只是CSS来调用的，javascript等其他页面脚本语言都可能进行调用。那么，当一个页面中出现多个相同的id时，将导致调用出错。所以，在设计网页时，应该考虑到id选择器被调用的特点。
1.3 CSS复合选择器
1.3.1 交集选择器
交集选择器是由两个选择器直接连接构成，结果是二者各自元素范围的交集。其中第一个选择器必须是标记选择器，第二个选择器必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器语法结构为：h1.class{property:value;}
【交集选择器示例】
<html>
<head>
<meta charset="utf-8">
<title>交集选择器示例</title>
<style type="text/css">
div{
border-style: dashed;
border- 1px;
}
div.a1{
border-color: red;
background:#999999
}
.a1{
background: #33ffcc;
}
</style>
</head>
<body>
<div> 普通效果 </div>
<div class="a1"> 交集选择器效果 </div>
<p class="a1">类选择器效果</p>
</body>
</html>
1.3.2 并集选择器
另一种复合选择器是并集选择器，它的特点是对各种基本选择器所选择的范围同时选中，任何形式的基本选择器都可以作为并集选择器的一个组成部分。并集选择器语法结构为：h1,h2,class{property:value;}
【示例】并集选择器应用
<html>
<head>
<meta charset="utf-8">
<title>并集选择器示例</title>
<style type="text/css">
div{
border-style: dashed;
border- 1px;
}
h1,h2,div{
background:#999999;
}
</style>
</head>
<body>
<div> 并集选择器效果 </div>
<h1> 并集选择器效果 </h1>
<h2> 并集选择器效果 </h2>
</body>
</html>
1.3.3 后代选择器
CSS选择器可以通过嵌套的方式对特殊位置的HTML标记进行声明，如<div>标记中包含<p>标记，就可以通过后代选择器进行控制。后代选择器的写法是嵌套外层的标记写在前面，内层的标记写在后面，中间用空格隔开。内层的标记称为外层标记的后代。后代选择器语法结构如下：div p{property:value;}
【示例】后代选择器应用
<html>
<head>
<meta charset="utf-8">
<title>并集选择器示例</title>
<style type="text/css">
div{
border-style: solid;
border- 1px;
border-color: red;
}
p{
background:#999999;
}
div p{
background:#ffff99;
border-style: solid;
border- 1px;
border-color: blue;
}
</style>
</head>
<body>
<div> 不是后代选择器效果 </div>
<p> 不是后代选择器效果 </p>
<div> 后代选择器效果 <p>效果</p> </div>
</body>
</html>
后代选择器不仅可以使用标记选择器进行嵌套，也可以使用类选择器和ID选择器。