最新学习的资料目录：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured （应该学习“函数”）
耗费时间： 15 min + 10min + 30min
HTML 搭建前端的框架，CSS 装饰页面。写CSS 就是让HTML 能够遵守我们给他的CSS规则。
浏览器的CSS引擎会负责解析CSS代码。
1.CSS 语法结构：由一个选择器起头，紧跟一对大括号，在其中用key:value的格式定义属性和值 每个css 都是以一个选择器或者一组选择器开始，用于告诉浏览器这些规则需要应用到哪些html元素上
2.选择器：用来选择我们要添加样式的html 元素
3.在html文件中添加css代码的方法
l 方法1 外部样式表
在<head>元素中，添加一个元素 <link rel="stylesheet" href="styles.css">，让html知道有css文件，且能找到css 文件的位置，然后再在CSS中写代码。
l 方法2 内部样式表
在<head>元素中添加一个<style>元素，在此元素中，再写CSS代码。
l 方法3 内联样式
在html每个元素中添加style 属性 除非你有充足的理由，否则不要这样做，不同类型的代码存放在不同的文档模块中，才能让工作更加清晰
4.浏览器默认的样式表：浏览器自带一个样式表，默认对所有页面渲染，例如：标题为大号粗体，列表旁边有项目符号。如果你对默认的样式不满意，就用你的css覆盖他即可。
- 添加样式到html元素的方法
l 方法1
html中的类名，给html元素定义class属性，在css中可以直接基于这个class添加样式
在css中选择类的方式：.类名{…}
在css中多个类共用一个样式：.类1,.类2{…}
l 方法2
根据html元素的位置来定义选择器
在选择器中描述元素的位置的方法：
包含选择符（就是一个空格，a包含b的意思就是，b是a的子元素），相邻选择符（+）
l 方法3
根据标签的状态来定义选择器
比如，一个锚标签是否被点击过，可以通过CSS获取
- 2. CSS的级联规则和专用规则
级联规则：两个选择器作用于同一个元素，写在后面的选择期优先级更高
专用规则：类选择器和元素选择器如果作用于同一个元素，那么类选择器优先级更高
7.CSS的属性和值
区分大小写，用: 分隔开