CSS：是Cascading Style Sheet的缩写，译作【层叠样式表单】，是一组格式设置规则。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS的组成：CSS的定义是由三个部分组构成：选择符（Selector），属性（properties）和属性的取值（value）。语法：selector{proprety:value}（选择符{属性：属性值}）
注意事项：
1. CSS声明块由：选择符+“{”+1个或者多个CSS属性+“}”组成。
2. CSS是大小写不敏感的，在CSS语法中推荐使用小写。
一、CSS选择符
是CSS样式的名字，当在HTML文档中表现一个CSS样式的时候，就要用到一个CSS。怎么用呢？这时就通过CSS选择符（CSS的名字）来指定此HTML标签使用此CSS样式。
二、选择符语法
一个CSS选择符就定义了一个样式。
选择符名称{声明;}
比如：
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P、dreamdublue、dreamdured都是选择符。
三、选择符命名规则
CSS选择符可以使用英文字母的大写与小写，数字，连字号，下划线，冒号，句号。
（1）英文字母大写与小写 A-Z a-z
（2）数字 0-9
（3）连字号 -
（4）下划线 _
（5）冒号 :
（6）句号 .
注意事项：CSS选择符只能以字母开头。
四、选择符分类
CSS选择符可以分为很多类，比如：类型选择符，id选择符，class选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符，相邻选择符等，以下将一一介绍分析。
1. 类型选择符：类型选择符就是网页元素本身，定义时直接使用元素名称。
Body{/*定义页面属性*/}Div{Width:774px;/*把所有的div元素定义为宽度为774像素*/}2. id选择符：它是唯一的，不同元素的id值是不能重复的，id选择符为每个元素的具体对象定义不同的样式，方便用户更加精细的控制页面。使用id选择符时要先为每个元素定义一个id属性。
<divid=”top”></div>使用id选择符时，需要使用到#进行标识：#top{Width:774px;/*把所有的div元素定义为宽度为774像素*/}3. class选择符：在一个文档中可以为不同类型的元素定义相同的类名，class可以实现把相同样式的元素统一为一类，使用class选择符时要先为每个元素定义一个class属性：
<divclass=”red”></div><spanclass=”red”></span><pclass=”red”></p>使用class选择符时，需要使用英文.（点）进行标识：.red{Color:red;}4. 通用选择符：是一种特殊的选择符，它用*表示，是一个使用但又容易忽略的选择符。
*{font-size:12pt;/*定义文档中所有字体大小为12pt*/}5. 分组选择符：分组选择符不是一种选择符类型，而是一种选择符方法。当多个对象定义了相同的样式时，我们可以把他们分为一组。这样能够简化代码读写，比如：
.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}可以分组为：
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}使用分组有2原则：1.方面原则；2.就近原则（如果几个元素相邻，在一个模块内可以考虑使用分组选择符）
6. 包含选择符：最有用的一类选择符，它能够简化代码，实现大范围的样式控制。比如：
.div1h2{/*定义类div1层中所有h2的标题样式*/font-size:18px;}.div1p{/*定义类div1层中所有p的标题样式*/font-size:12px;}7. 元素指定选择符：有时候我们希望控制某种元素在一定范围内对象的样式，这时可以把class或id选择符组合起来使用。比如：
span.red{/*定义span元素中class为red的元素颜色为红色*/color:red;}div#top{/*定义div元素中id为top的元素宽度为100%*/width:100%;}eg:<div><h2><h2><p></p><span></span></div>在上面代码中要使用news选择符很显然不行，直接使用P，h2类型选择符也不太好这时便可以使用元素指定选择符
p.news{} h2.news{} span.news{}
8. 子对象选择符：与元素选择符一样都是限制选择符，即在一定元素范围内定义符合限制条件的元素样式，元素制定选择符是用class和id属性作为限制条件的，而子对象选择符是用id和子对象作为限制条件的。
#main>table{/*定义id为main的主体模块中子对象table的样式*/width:788px;font-size:12px;}#main>.title{/*定义id为main的主体模块中子对象的class为title的样式*/color:red;font-style:italic;}9. 属性选择符：属性选择符是在元素后面加一个中括号，中括号中列出各种属性，或者表达式。属性选择符存在7种具体形式：
（1）存在属性匹配：通过匹配存在的属性来控制元素的样式，一般要把匹配的属性包含在中括号中，只列举姓名并不赋值：
h1[class]{color:red;/*作用任何带class属性的h1元素不管class的值是什么*/}img[alt]{border:none;/*作用任何带alt属性的img元素不管alt的值是什么*/}a[href][title]{font-weight:bold;/*作用同时带href和title属性的a元素*/}（2）精准属性匹配：只有当属性值完全匹配指定的属性值时才会应用样式，id和class选择符实际上就是精准属性选择。
a[href=www.163.com][title=网易]{font-size:12px;/*作用地址指向www.163.com并且title提示字样为网易的a元素*/}（3）空白分个匹配：通过为属性定义字符串列表，然后只要匹配其中任意一个字符串即可控制元素样式。
<spanclass=abc>谁来控制我的样式</span>可以使用下面样式来控制：[class^=a]{color:red;}或：[class^=b]{color:red;}或：[class^=c]{color:red;}或：span[class^=c]{color:red;}（4）连字符匹配：与空白匹配的功能和用法相同，但是连字符匹配中的字符串列表中用连字符进行分割.
<span>谁来控制我的样式</span>
可以使用下面样式来控制：
[class|=a]{color:red;}或：[class|=a]{color:red;}或：[class|=b]{color:red;}或：[class|=c]{color:red;}或：span[class|=c]{color:red;}（5）前缀选择符：只要属性值的开始字符匹配指定字符串，即可对元素应用样式。前缀匹配使用[^=]形式来实现：
<div>前缀匹配</div>
可使用如下样式控制
[class^=my]{color:red;}（6）后缀匹配：与前缀相反，只要属性的结尾字符匹配指定字符，使用[$=]形式控制。
<div>后缀匹配</div>
可使用如下样式控制
[class$=Test]{color:red;}（7）子字符串匹配：只要属性中存在指定字符串即应用样式，使用[*=]形式控制。
<div>子字符串匹配</div>
可使用如下样式控制
[class*=est]{color:red;}10. 相邻选择符：就是指元素相邻的下一个元素。
div+p{font-size:24px;/*作用所有紧贴div元素之后的p元素，定义p元素的字体大小为14px*/}eg:<divid=wrap><divid=sub_wrap><h1></h1><p></p></div><p></p></div>要单独控制最下的p元素除非为他定义一个class和id属性如果使用使用相邻选择符就可以做到
#sub_wrap+p{font-size:14px;}