CSS3================================
1.概述
1.什么是CSS?
CSS：Cascading Style Sheets 层叠样式表，级联样式表，简称：样式表。
2.作用
设置HTML元素的样式
3.CSS与HTML之间的关系
HTML：构建网页的结构内容
CSS：构建网页的样式效果
4.HTML属性与CSS属性的使用原则
w3c尽量使用CSS属性去取代HTML的属性来修饰元素。
2.CSS语法规范
1.使用CSS样式表的方式
1.内联样式
又称为“行内样式”
特点：将CSS样式定义在HTML开始标记中
语法：
<ANY style="CSS的样式声明"></ANY>
样式声明：
1.由样式属性和值组成；
2.属性名与值之间用冒号连接；
3.多个样式声明之间用分号分隔。
常用的样式属性和值：
1.设置文本颜色的属性和值
属性：color
值：合法的颜色值（颜色英文单词red）
2.设置背景颜色的属性和值
属性：background
值：合法的颜色值
3.设置字体大小的属性和值
属性：font-size
值：数字+px（像素）
练习：
1.在网页中新建一对p元素，内容随意;
2.设置p元素中文本颜色为紫色(purple)，背景颜色为橙色orange)，字体大小为34px。
2.内部样式
在网页的头元素中增加一对<style></style>标记，在<style>标记中声明该网页要用到的所有样式。
语法：
<head>
<style>
样式规则
</style>
</head>
样式规则：由选择器和样式声明组成
选择器：规范了页面中哪些元素能够使用声明好的样式。其实就是把声明好的样式匹配给页面中的元素。
元素选择器：由元素名称作为选择器
样式规则：
选择器{样式声明}
ex:
div{
color:red;
}
练习：
在网页中添加若干3级标题元素，内容随意
用内部样式设置3级标题元素中文本颜色为黄色，背景颜色为红色。
3.外部样式
独立于任何网页的位置处，声明一个样式文件（以.css为后缀），在css文件保存样式规则。
使用步骤:
1.创建独立的.css文件
2.在css文件中保存样式规则
3.在网页中引入css文件
<head>
<link rel="stylesheet" href="css文件的url">
</head>
练习：
在网页中添加一对span元素，内容随意，使用外部样式为span元素设置文本颜色为绿色，背景颜色为灰色，字体大小为40px;
2.CSS的样式特征
1.继承性
必须是父子关系结构
大部分的样式可以直接继承给子元素（子继承父）
2.层叠性
可以为一个元素设置多个样式规则，规则中的属性不冲突时，可以同时都应用到元素上的。
3.优先级
如果样式声明冲突时，则按照默认的优先级来应用样式。
默认优先级由低到高：
浏览器的默认设置 低
外部样式表和内部样式表 中(就近原则)
内联样式 高
练习：
在页面中用内部样式为div元素设置文本颜色为红色，字体大小为35px，用外部样式设置文本颜色为蓝色，引入外部样式后查看页面字体显示效果，然后交换外部和内部样式的位置，再查看页面效果。
4.调整显示优先级
调整显示的优先级
使用!important规则改变优先级
将!important放在属性值之后，与值之间用空格隔开。
ex:
color:red !important;
3.CSS基础选择器
1.通用选择器
语法：*{样式声明}
作用：可以匹配页面中的任意元素。
注意：效率较低，尽量少用
2.元素选择器
语法：元素名称{样式声明}
作用：设置页面上某种（类）元素的默认样式
ex:
div{},p{},a{},header{},span{}...
3.类选择器
作用：定义某个或某些元素的样式（谁想用谁就可以引用）
特点：通过元素的class属性进行引用
语法：
1.声明类选择器
.类名称{样式声明}
注意：
1.类名不能以数字开头
2.不能包含特殊字符（除_,-外）
3.点 不能省略
2.引用
<ANY class="类名称"></ANY>
特殊用法：
1.多类选择器
让元素引用多个类选择器
语法：<ANY class="类名1 类名2 类名3 ..."></ANY>
2.分类选择器
将元素选择器和类选择器联合使用
语法:元素名称.类名{样式声明}
ex:
p.test{color:red;}
练习：
在页面中创建div和p元素，内容随意
1.用类选择器设置所有元素字体颜色为红色
2.用分类选择为p元素设置背景颜色为黑色
4.id选择器（私人订制）
作用：设置指定id元素的样式
语法：#id值{声明样式}
ex:<div id="map"></div>
#map{color:red;}
练习：
1.新建一个div元素，设置id为main
2.通过id选择器设置文本颜色为黄色，字体大小为32px,斜体（font-style:italic;）
5.群组选择器
作用：将多个选择器放在一起进行样式的声明定义
语法：选择器1,选择器2,选择器3{样式声明}
ex：
div,p,a.text,#one,span{color:gray;}
div{color:gray;}
p{color:gray;}
a.text{color:gray;}
#one{color:gray;}
span{color:gray;}
6.后代选择器
作用：通过元素的后代关系匹配元素
后代：一级或者多余一级的嵌套
语法：选择器1 选择器2 选择器3{样式声明}
7.子代选择器
作用：通过元素的子代关系匹配元素
语法：选择器1>选择器2{样式声明}
8.伪类选择器
作用：匹配元素不同状态的选择器
语法：所有的伪类选择器都是以:作为开始
选择器:伪类选择器{样式声明}
1.链接伪类
:link 匹配元素尚未访问时的状态
:visited 匹配元素访问后的状态
2.动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态