一、css简介
css—层叠样式表
特点：实现了表现与结构相分离
二、css基础语法
css是由选择符和声明两大部分组成，声明由属性和值组成。
语法： 选择符{
属性:值;
属性:值;
}
注： 属性和值用冒号连接
一条声明结束要添加分号
属性和属性不分先后顺序
三、样式表的创建
1.内联样式（行间样式，行内样式）
语法：<标记 style="属性:值;"></标记>
eg: <h1 style="color:red;">千锋教育</h1>
2.内部样式（嵌入式样式）
语法： <style type="text/css">
h1{
color:red;
}
</style>
注：一般将style标签放置在head部分
3.外部样式
（a）首先需要创建一个外部css文件（后缀名为.css）
使用link标签引入css文件
语法： <link rel="stylesheet" type="text/css" href="css文件路径"/>
注：rel用来设置当前文件和引入的文件之间的关系
（b）使用@import的方式引入css文件
语法： @import "css文件路径";
注：link和@import引入外部样式的区别：
（1）link属于html标签，除了可以引入css文件外还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）
（2）link加载的css文件和页面同时加载，@import引入css文件在页面加载完成后载入（加载顺序的区别）
（3）link是html标签，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持的区别）
（4）link支持js改变DOM样式，@import不支持（对js支持的区别）
四、样式表的优先级
在没有出现!important的时候，采取就近原则（离被设置的元素越近，优先级越高）
内联样式>内部样式>外部样式
当出现!important的时候，它的优先级最高
!important>内联样式>内部样式>外部样式
五、css注释
语法： /*注释内容*/
六、css选择器
1.id选择器
语法： <标记 id="***"></标记>
#id名{属性:属性值;}
eg: <h1 id="xa_edu">千锋教育</h1>
#xa_edu{color:red;}
注：a）id名是唯一的，不能出现同名的id
b) id选择器的优先级最高
c) id名要语义化命名（下划线连接法，驼峰命名法）
2.class选择器（类选择器）
语法：<标记 class="***"></标记>
.类名{属性:属性值;}
eg: <a href="#" class="nav">新闻资讯</a>
.nav{color:red;}
注：a)可以给具有相同样式的元素添加同一个class名
b)类选择器的优先级仅次于id选择器
注：还可以使用类名词列表的方式设置样式
语法： <a href="#" class="nav news">新闻资讯</a>
.news{color:pink;}
3.标签选择器（类型选择符，元素选择符）
语法：标记名称{属性:属性值;}
eg: a{text-decoration:none;}
注：1)如果想改变某个元素的默认样式时，可以使用类型选择符；
2)当统一文档某个元素的显示效果时，可以使用类型选择符；
4.后代选择器(包含选择器)
语法：选择符1 选择符2{属性:属性值;}
eg: .uls a{color:gray;}
注：a)选择符1和选择符2必须是包含与被包含关系
------------------------------------------------------------------------------
Ps快捷键
1.显示或隐藏信息面板 F8
2.alt+鼠标滑轮向前滑 放大
alt+鼠标滑轮向后滑 缩小
3.移动 按住空格键+鼠标左键移动
4.显示或隐藏标尺 ctrl+R
-----------------------------------------------------------------------------
5.群组选择器
语法： 选择符1,选择符2,选择符3{属性:属性值;}
eg: .box,.uls,p{color:black;}
6.通用选择器（通配符）
语法：*{属性:属性值;}
常用写法： *{margin:0; padding:0;}
注：*匹配html根元素下的所有标签元素
7.伪类选择器
语法： 选择符:hover{属性:属性值;}
注: 超链接a的四个状态：
a） a:link 链接没有被访问过时的状态（超链接的初始状态）
b） a:visited 链接被访问过后的状态
c） a:hover 鼠标滑过时的状态
d) a:active 鼠标按下时的状态
记忆方法：爱恨原则
L o V e H A t e
注：为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
eg: a{color:red;} a:hover{color:green;}
注：除了可以给a添加滑过状态，还可以给其他元素添加滑过状态
eg： .uls li:hover a{color:red;}
当滑过li时，li中的a字体颜色变为红色
八、css选择器权重
将css选择器的权重分为四个等级：
第一等：内联样式 style="..." 权重：1000
第二等：id选择器 权重：100
第三等：类选择器，伪类选择器，属性选择器 权重：10
第四等：标签选择器（类型选择符），伪元素选择器 权重：1
后代选择器权重：所有选择器权重之和
群组选择器权重：选择器自身的权重
当权重相同时，后写的样式会覆盖先写样式
九、css层叠的概念（含义）
层叠指的是样式的优先级，当产生冲突时以优先级高的为准
1. 内联样式>内部样式>外部样式（除非使用!important标记 ）
2. id选择器>类选择器>元素选择器
3. 权重相同时取后面定义的样式
