CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。对前端网页的布局与美化有着广泛作用。
一、CSS概述
1. 前端HTML、Javascript、CSS
html：超文本标记语言。用于网页的结构搭建和页面布局。
css：层叠样式表。用于网页的修饰，样式的渲染。
javascript：解释型的编程语言。用于与页面的交互。
2. CSS语法规范
（1）内联样式
内联样式也叫行内样式，就是在 html 文件中的 html 标签中，用 style 属性样式值来完成渲染。内联样式将样式写在标签里，缺点是杂乱且不易于修改，复用性差；优点是可以指定当前标签，更加直接。
<!-- 内联样式 --> <span style="样式声明"></span>
（2）内部样式
在网页头部<head></head>中增加一对<style></style>标签，在 style 中定义样式。特点是需要选择器查找到元素并嵌入 HTML 文件，只能在当前页面使用，优先级低于内联样式（不建议用于项目）。
<head> <!-- 内部样式 --> <style> h2 { background-color: lightpink; color: red; } </style> </head>
（3）外部样式
单独创建 CSS 文件，在 HTML 文件的 head 标签中引入。
<head> <!-- 外部样式 --> <link rel="stylesheet href="01.css"> </head>
href 为超文本引用，引用 css 文件路径，rel 属性指文件与当前HTML的关系（必写）。外部样式所有页面都可以使用，是项目中最重要的样式使用方式。
二、CSS选择器
要使用 css 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器。HTML页面中的元素就是通过 CSS 选择器进行控制的。
1. 基础选择器
（1）通用选择器：使用通配符 * ，选择 HTML 文件中所有元素。最常用的写法是清除浏览器内外边距，如下：
*{margin:0;padding:0}
（2）元素选择器：也叫标签选择器，直接使用标签的名字来选择 HTML 元素。权重值为1
h1 {color: teal;} div {color: green;}
（3）id 选择器：只针对一个元素，一般不作为样式渲染的选择器使用。
#getblue {color: blue;}
（4）类选择器：通过元素的类名即class值选择元素。权重值10
.oz {color: purple;} .oo {color: orangered;}
一个元素可以创建多个类名，每个类名之间用空格分开即可。
（5）群组选择器：将多种选择器进行组合，把不同的选择器用逗号连接
.y,#mybox { background-color: yellow; }
2. 关系选择器
（1）后代选择器：先代元素(祖先)选择器写在前面，空格后写后代元素选择器。
.item span { color: red; }
（2）子代选择器：选中某个元素的直接子元素(当前元素下的第一层子元素)，与后代不同的是子代选择器的范围更小。
body>div>div>div { color: red; }
（3）兄弟选择器
.l1~li { color: blue; } .s~.nv { color: red; }
注意，前面的为参照元素，后面的为筛选元素，选中的永远是其参照元素后面的兄弟元素。
（4）相邻选择器：同一层的关系选择器，可以选中参照的元素后面紧挨着的被参照元素的选择器。
.o1+span { color: red; }
3. 伪类选择器
伪类选择器的作用是匹配同一个元素，设置其不同状态下的样式。常用的伪类有：
a:link { color: green; } div:hover { background-color: salmon; } button:hover+div { background-color: red; }
4. 伪元素选择器
用于设置元素的“指定部分”的样式。
div::before { content: "欢迎您，"; font-weight: bolder; font-size: 26px; }
需要注意content属性必须写，但值可以为空。
三、CSS优先级
1. 优先级原则
（1）顺序读取：相同类型选择器采用顺序读取后来的优先。
（2）选择器优先级：不同类选择器，按照权重原则(id选择器100,类选择器10,元素选择器 1)。
（3）继承：制定样式的优先级大于继承样式的优先级。
（4）多个选择器一起使用：根据权重值累加比较值后采用优先级。
2. 最高优先级 - !important
直接获取最高优先级，但注意内联样式不能加 !important。用法如下：
.d1{ background-color: rgb(22, 92, 161) !important; } <!-- 表示类名为d1的元素具有最高优先级 -->
3. 优先级的比重大小
按引入方式：内联样式 > 内部样式 > 外部样式
按元素：id 选择器（100）> 类选择器（10）> 元素选择器（1）
