1 什么是CSS？
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2 CSS语法
CSS基础语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。
比如 selector{property：value}
选择器通常是需要改变样式的HTML元素。
比如 h1{color:red; font-size:14px;}
h1是选择器，color和font-size是属性，red和14px是值。
注意：
如果定义不止一个声明则需要用分号将每个声明分开。例如：p{text-align:center;color:red}
如果值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}
CSS高级语法
选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题：根据 CSS，子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
3 创建CSS
CSS 创建样式表分为三种情况：
内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>
行内式(内联样式)
<div style="width:200px;height:100px;border:1px solid black;"></div>
外部样式表(外链式)
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
样式优先级：内联样式>内部样式>外部样式
三种样式表区别：
行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。
内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。
外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
4 id和class选择器
ID选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。
HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
class选择器：
class 选择器用于描述一组元素的样式，也叫做类选择器。
class 可以在多个元素中使用，并且一个元素也可以指定多个类名。
在 CSS 中，类选择器以一个点 "." 号来定义。
同样的类名的第一个字符也不能使用数字。
语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID 选择器和类（class）选择器的区别：
相同点：
- 都可以应用于任何元素
不同点：
- ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。
5 CSS元素选择器
最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
6 CSS背景(background)
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像设置水平或垂直平铺或不平铺
background-position 背景图像设置定位
background-attachment 背景图像设置固定或滚动
背景属性简写：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat -->
background-attachment --> background-position
