第二章：CSS的基本语法
一 CSS选择器（所有的HTML语言中的标记都是通过不同的css选择器进行控制的）。用户只需要
通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
1、标记选择器（列如 <p> <ul> p{color:green;}）
2、类别选择器（列如 <p class="p1"> .p1{ color:green;font-size:20px;}）
3、ID选择器（例如 <p > #p1{color:green;}）
注意：页面中id最好不要重复（会导致javascript在查找id时出错）。
二选择器声明（每个选择器的属性都可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器（包括标记选择器、class选择器、ID选择器等）都是合法的。）
1、集体声明（列如： h1,h2,h3{color:green;font-size:12px;}）,使用集体声明条件：这些选择器的风格完全相同，或者有部分相同。
2、选择器的嵌套（通过嵌套的方式，对特殊位置的HTML标记进行声明，列如：<p><b></></p> p b{color:green;font-size:12px;}）
嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。例如： .special i{ color:green;}
#one li{padding-left:5px;}
td.top.top1 strong {font-size:16px;}
3、CSS的继承（简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。）
CSS继承是指字标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。
第三章：CSS控制文字效果
一、CSS文字样式（文字的字体、大小、颜色）
字体：font-family属性，例如：p{ font-family:黑体,Arial,宋体,sans-serif;}
注意一些字体的名称中间会有空格，列如 Times New Roman,这时需要用双引号将其引起了，如"Times New Roman"
文字大小：font-size属性，列如p{font-size:12px;}
最常用的单位：px 其显示大小和显示器的大小及其分辨率有关。采用“%” 或者“em”都是相对于父标记而言的比例，如果没有设定父标记的字体大小，则相对于浏览器的默认值。
文字的颜色：color属性 ，列如 p{color:green;}
注意：在设置某一个段落文字颜色时，通常可以利用<span>标记，将需要的部分进行单独标注，然后再设置<span> 标记的颜色属性。
文字的粗细：font-weight属性，列如 span.five{font-weight:normal;} span.six{font-weight:500;}
斜体：font-style属性 列如： h1{font-style:italic;}
字的下划线、顶划线、删除线：text-decoration 属性 例如：p.one{text-decoration:underline;}
英文字母大小写：text-transform属性 列如：p.one{text-transform:uppercase;}
二、CSS段落文字(文字的属性对段落同样适用)
1、段落的水平对齐方式 text-align属性 (它的值可以设置为左、中、右和两端对齐等。)
列如：p.left{text-algin:left;} p.right{text-algin:right;}
2、段落的垂直对齐方式 vertical-align属性 列如：td.top{vertical-align:top;} td.bottom{vertical-algin:bottom;} 注意：该属性对于块级元素并不起作用，列如<p> <div>等，但是对于表格而言，这个属性则显得十分重要。
3、行间距和字间距 行间距line-height属性 列如：p.one{line-height:8pt;} p.two{line-height:1.5em;}
字间距 letter-spacing属性 列如：p.one{letter-spacing:-2pt;}
p.two{letter-spacing:5em;}
4、首子放大 主要是通过float语句对首子下沉进行控制，并且用<span>标记，对首子设置单独的样式，达到突出显示的目的。列如：
p span{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
第四章：用CSS设置图片效果（包括图片的边框、对齐方式和图文混排等）
1、图片的边框 boder属性 子属性 border-style定义边框的样式如 虚线、实线或者点划线等
border-color定义边框的颜色 border-width定义边框的粗细
列如： img.test1{
border-style:dotted;
border-color:#FF9900;
border-width:5px;
}
在css中还可以分别设置4个边框的不同样式，即分别设定 border-left、border-right 、 border-top 、border-bottom
列如：img{
border-left-style:dotted;
border-left-color:#FF9900;
border-left-width:5px;
}
熟练之后，border属性还可以将各个值写在同一个语句中，用空格分离。列如
img.test1{
border:5px double #FF00FF;//将各个值合并
}
img.test2{
border-right:5px double #FF00FF;
border-left:8px solid #0033FF;
}
除了border属性可以将各个属性值写在一起，css的很多其他属性也可以进行类似的操作，列如font以及margin padding
列如：
p{
font:italic bold 30px Arial,Helvetica,sans-serif;
padding:0px 5px 0px 3px;
}
2、图片的缩放 width height 两个属性来实现 列如 img.test1{width:70%; height:110px;}
3、图片的对齐 横向对齐方式 text-align 图片的对齐不能直接设置图片的text-align属性，而是通过设置父元素的该属性来实现的。
4、图文混排 float属性来实现文字环绕。
5、图片与文字间距 只需要给图片设置padding属性即可。列如
img{
float:left;
margin-right:50px;
margin-bottom:25px;
}
第五章：用CSS设置网页中的背景
1、背景颜色 页面背景色 background-color属性
2、页面的背景图片 background-image属性 列如 body{background-image:url(03.jpg);}
3、背景图片的重复 background-repeat属性 重复方式包括（水平重复、竖直重复及不重复）
列如
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg);
background-repeat:repeat-y;
background-color:#0066FF;
}
4、背景图片的位置 background-position属性
列如 body{
padding:0px;
margin:0px;
background-image:url(bg4.jpg);
background-repaeat:no-repeat;
background-position:bottom right;
background-color:#eeeee8;
}
5、固定背景图片 background-attachment属性 值为fixed来轻松实现效果（对于大幅的背景图片，当浏览器出现滚动条时，通常不希望图片随着文字的移动而移动，而是固定在一个位置上。）
6、添加多个背景图片（在css中一个标记只能用一次background属性，因此只有给多个标记添加不同背景来实现类似的效果，如在body标记设置了背景图片的基础上再添加table和div等标记。）
7、背景样式综合设置 background: blue url(bg7.jpg) no-repaeat fixed 5px 10px ;
第六章：用CSS设置表格与表单的样式
1、CSS与表单 表单中的元素（输入框、文本框、单选项、复选框、下拉菜单和按钮等。<form>、<input>、<textarea>、<select>、<option>等）
