内容纲要
一、CSS简介
1、什么是CSS
-
CSS：Cascading Style Sheet 层叠样式表
-
是一组样式设置的规则，用于控制页面的外观样式
2、为什么使用CSS
-
实现内容与样式的分离，便于团队开发
-
样式复用，便于网站的后期维护
-
页面的精确控制，让页面更精美
3、CSS作用
-
页面外观美化
-
布局和定位
二、基本用法
1、CSS语法
-
选择器：要修饰的对象（东西）
-
属性名：修饰对象的哪一个属性（样式）
-
属性值：样式的取值
示例：
2、CSS应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
（1）内部样式
-
也称为内嵌样式，在页面头部通过style标签定义
-
对当前页面中所有符合样式选择器的标签都起作用
（2） 行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
（3） 外部样式
使用单独的
.CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入-
使用
link标签链接外部样式文件
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径"> 提示：type属性可以省略
-
@import指令 导入外部样式文件
示例：
<style>
@import "CSS样式文件路径";
@import url(CSS样式文件路径);
</style>
示例：
三、选择器
1、基础选择器
（1） 标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
以标签名作为样式应用的依据
（2） 类选择器
使用自定义的名称，以
. 号作为前缀，然后再通过HTML标签的class属性调用类选择器以标签的class属性作为样式应用的依据
注意事项：
-
调用时不能添加
.号
-
同时调用多个类选择器时，以
空格分隔
-
类选择器名称不能以
数字开头
（3） ID选择器
使用自定义名称，以
# 作为前缀，然后通过HTML标签的id属性进行名称匹配以标签的id属性作为样式应用的依据，一对一的关系
示例：
2、复杂选择器
（1） 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
（2）组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
（3） 嵌套选择器
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意：使用
空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行
示例：
（4） 伪类选择器
根据不同的状态显示不同的样式，一般多用于 标签
四种状态：
-
:link 未访问的链接
-
:visited 已访问的链接
-
:hover 鼠标悬浮到连接上，即移动在连接上
-
:active 选定的链接，被激活
注：默认超链接为：蓝色、下划线
示例：
（5） 伪元素选择器
-
:first-letter 为第一个字符的样式
-
:first-line 为第一行添加样式
-
:before 在元素内容的最前面添加的内容，需要配合content属性使用
-
:after 在元素内容的最后面添加的内容，需要配合content属性使用
示例：
3、选择器优先级
（1） 优先级
行内样式>ID选择器>类选择器>标签选择器
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式
后加载会覆盖先加载的同名样式
（2） 内外部样式加载顺
就近原则
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先
（3） !important
可以使用!important使某个样式有最高的优先级
示例：
