一. 认识 CSS

1. 什么是 CSS

css 表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为串联式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码

2. CSS 是一种语言吗？

MDN 解释：css 也不是真正的编程语言，甚至不是标记语言。它是一门样式语言
维基百科解释：是一种计算机语言，但是不算是一种编程语言

二. CSS 的历史

1. 发展历史

早期的网页都是通过 HTML 来编写的，但是我们希望 让 HTML 页面更加丰富
- 这个时候就增加了很多具备特殊样式的元素：比如 i、strong、del 等
- 后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划
- 1994年，哈肯·维姆·莱和伯特·波斯合作设计 CSS，在1996年的时候发布了 CSS1
- 知道1997年初，W3C 组织才专门成立了 CSS 的工作组，1998年5月发布了 CSS2
- 在2006~2009非常流行 " DIV + CSS "布局的方式来替代所有的 html 标签
- 从 CSS3 开始，所有的 CSS 分成了不同的模块 modules，每一个 modules 都有于 CSS2 中额外增加的功能，以及向后兼容
- 直到2011年6月7日，CSS3 Color Module 终于发布为 W3C Recommendation

2. 总结

CSS 的出现是为了美化 HTML 的，并且让结构 HTML 与样式 CSS 分离
美化方式一：为 HTML 添加各种各样的样式，比如颜色、字体、大小、下划线等
美化方式二：对 HTML 进行布局，按照某种结构显示（CSS 进行布局 - 浮动、flex、gird）

三. CSS 如何编写呢？

1. 语法规则

CSS 这么重要，那么它的语法规则是怎么样的呢？
css
```
/* 属性名: 属性值 */
color: red;
```
声明（Declaration）一个单独的 CSS 规则，如 color: red; 用来指定添加的 CSS 样式
- 属性名（Property name）：要添加的 css 规则的名称
- 属性值（Property value）：要添加的 css 规则的值

四. 如何将 CSS 样式应用到元素上？

CSS 提供了三种方法，可以将 CSS 样式应用到元素上：
- 内联样式（inline style）
- 内部样式表（internal style sheet）、文档样式表（doucment style sheet）、内嵌样式表（embed style sheet）
- 外部样式表（external style sheet）

1. 内联样式

内联样式，也称为行内样式
- 内联样式表存在于 HTML 元素的 style 属性之中
  html
```
<div style="color: red;">
  我是div元素
</div>
```
CSS 样式之间用分号 ; 隔开，建议每条 CSS 样式后面都加上分号
很多资料不推荐这种内联写法：
- 在原生的 HTML 编写过程中这种写法确实是不推荐的
- 在 Vue 的 template 中某些动态的样式是会使用内联样式的
所以，内联样式的写法依然需要掌握

2. 内部样式表

将 CSS 放在 HTML 文件 <head> 元素里的 <style> 元素之中

html

<head>
  <style>
    .title {
      color: red;
    }
  </style>
</head>

在 vue 的开发过程中，每个组件也会有一个 style 元素，和内部样式表非常的相似（原理并不相同）

3. 外部样式表

外部样式表是将 css 编写在一个独立的文件中，并且通过 <link> 元素引入进来
使用外部样式表主要分成两个步骤：
- 第一步：将 css 样式在一个独立的 css 文件中编写（后缀名为 .css）
- 第二步：通过 <link> 元素引入进来
link 元素的作用，后续单独讲解

五. @import

告诉 CSS 引擎引入一个外部样式表
可以在 style 元素或 css 文件中使用 @import 导入其他的 css 文件
必须先于所有其他类型的规则（@charset除外），即写在样式表最上方，结尾需加 ;

补充：
页面导入样式时，使用 link 和 @import 有什么区别？
link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用
而 @import 是 CSS 提供的，只能用于加载 CSS
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题
link 方式的样式的权重高于 @import 的权重
https://juejin.cn/post/7031194984338423822

六. CSS 的注释

CSS 代码也可以添加注释来方便阅读：
- CSS 的注释和 HTML 的注释是不一样的
  css
```
/* 注释内容 */
div {
  /* 设置div字体大小20px */
  font-size: 20px; 
}
```

七. 必须掌握的 CSS 属性

必须掌握的 CSS 属性

在开发中90+%的时间写的都是这些属性

一. 定位(Position)和布局(Layout)
    1. position
    2. top / bottom / left / right
    3. z-index
    4. float / clear
    5. flexbox
        5.1 flex-direction
        5.2 justify-content
        5.3 align-items
        等等...
二. 展示(Display)和可见(Visibility)
    1. display
    2. opacity
    3. visibility
三. 盒子模型(Box Model)顺序
    1. margin
    2. box-shadow
    3. border
    4. border-radius
    5. width / height
    padding
四. 背景设置(Background)
    1. background
五. 字体(Font)、文本(Text)
    1. font-family / font-size / font-weight / font-style
    2. line-height
    3. text-align / text-transform
    4. color
六. 其他属性(Other Property)
    1. overflow
    2. clip
    3. cursor
    4. transform
    5. animation、transition
    6. white-space

赶紧开始?
- 不要小看这几个 CSS 属性，里面涉及到的概念是非常多的
- 你必须了解 CSS 的很多特性，才能真正理解里面的每个属性
- 并且在遇到一些问题的时候知道如何去调试

八. CSS属性的官方文档

CSS 官方文档地址
- https://www.w3.org/TR/?tag=css
CSS 推荐文档地址
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#关键字索引
由于浏览器版本、CSS 版本等问题，需要查询某些 CSS 是否可用
- 可以到 https://caniuse.com/ 查询 CSS 属性的可用性
- 这个网站在后续的 browserlist 工具中我们再详细说明

九. 目前需要掌握的 CSS 属性

要想深刻理解所有常用 CSS 属性，最好先学会以下几个最基础最常用的 CSS 属性
- font-size：文字大小
- color：前景色（文字颜色）
  - color属性用来设置文本内容的前景色
  - 包括文字、装饰线、边框、外轮廓等的颜色
- background-color：背景色
- width：宽度
- height：高度

十. link 元素

1. 定义

link 元素是外部资源链接元素，规范了文档与外部资源的关系
- link 元素通常是在 head 元素中
最常用的链接是样式表（CSS）
- 此外也可以被用来创建站点图标（比如 “favicon” 图标）

2. link 元素常见的属性

href：
- 指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的
rel：
- 指定链接类型
- 常见的链接类型：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
- icon：站点图标
- stylesheet：CSS 样式
- dns-prefetch（实验属性）：提示浏览器该资源需要在用户获取资源之前进行 DNS 查询和协议握手
  - 即：访问网站先是通过 DNS 服务器解析域名获取资源所在服务器的 ip 地址的，解析这一过程是需要花费时间的，因为 DNS 服务器也是通过备案去查询域名所绑定的服务器 ip 地址的，所以可以通过该属性提前对一些资源存放在别的服务器的域名进行解析，等到真正访问相应的资源时候，DNS 就不需要再花时间去解析相应资源所在的域名了，因为提前解析好了，就直接请求对应 ip 地址的服务器即可

十一. 认识进制

1. 进制的概念

维基百科：进位制是一种记数方式，亦称进位计数法或位值计数法
通俗理解：当数字达到某个值时，进一位(比如从1位变成2位)
按照进制的概念，来理解一下十进制:
- 当数字到9的时候，用一位已经表示不了了，那么就进一位变成2位
按照上面的来理解，二进制、八进制、十六进制:
- 二进制：当数字到1的时候，用一位已经表示不了了，那么就进一位
- 八进制：当数字到7的时候，用一位已经表示不了了，那么就进一位
- 十六进制：等等，用一位如何表示十六个数字呢？a(10)、b(11)、c(12) 、 d(13) 、 e(14) 、 f(15)

2. 人类的十进制

学习编程语言，需要了解进制的概念：
- 我们平时使用的数字都是十进制的，当我写下一个数字的时候，你会默认当做十进制来使用
- 从发明数字的开始，人类就使用十进制，原因可能是人类正好十根手指
- 如果人类有八根手指，现在用的可能是八进制
所以说，十进制就是放之四海而皆准的常理吗？
- 并不见得，计算机就认为二进制、八进制、十六进制更符合自己的思维

3. 计算机中的进制

为什么计算机更喜欢二进制呢?
- 和其底层的原理有关系，计算机电路中的开（表示1）和关（表示0）
如何表示二进制、八进制、十六进制?
- 二进制（0b开头, binary）：其中的数字由 0、1 组成，可以回顾之前学习过的机器语言
- 八进制（0o开头, Octonary）：其中的数字由 0~7 组成
- 十六进制（0x开头, hexadecimal）：其中的数字由 0~9 和字母 a-f 组成（大小写都可以）
十进制还是二进制：
- 虽然计算机更喜欢二进制, 但是编程中我们还是以十进制为主
- 因为高级编程语言的目的就是更加接近自然语言, 让我们人类更容易理解

十二. CSS 颜色的表示方法

1. 颜色关键字（color keyword）

不区分大小写的标识符，表示一个具体的颜色
可以表示哪些颜色呢？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#语法

2. RGB颜色

RGB 是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色
- 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色
RGB 各个原色的取值范围是 0~255

3. RGB的表示方法

RGB 颜色可以通过以 # 为前缀的十六进制字符和函数（rgb()、rgba()）标记表示
方式一：十六进制符号 #RRGGBB[AA]
- R（红）、G（绿）、B （蓝）和A（alpha）是十六进制字符（0–9、A–F）；A是可选的（0-1）
- 比如，#ff0000 等价于 #ff0000ff
方式二：十六进制符号 #RGB[A]
- R（红）、G（绿）、B（蓝）和A（alpha）是十六进制字符（0–9、A–F）
  - 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版
  - 比如，#f09 和 #ff0099 表示同一颜色
- 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版
  - 比如，#0f38 和 #00ff3388 表示相同颜色
**方式三：函数符 **rgb[a] (R, G, B[, A])
- R（红）、G（绿）、B（蓝）可以是<number>（数字），或者<percentage>（百分比），255相当于100%
- A（alpha） 可以是0到1之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）

十三. Chrome 浏览器开发者工具

打开 Chrome 调试工具
- 方式一：鼠标右键-检查
- 方式二：快捷键-F12
其他技巧：
- 快捷键：ctrl+ 可以调整页面或者调试工具的字体大小
- 可以通过删除某些元素来查看网页结构
- 可以通过增删 css 来调试网页样式

十四. 浏览器渲染流程

先加载(下载) html 文件
加载完 html 后，开始解析 html
自上而下解析 html 过程中，遇到 css 会异步加载 css，不会阻塞 html 的解析（好的浏览器设计不会阻塞）
html 解析一旦完成，就会创建 dom 树，等待 css 解析完成，绑定样式到 dom 节点上，形成渲染树
最后就是进行渲染和展示

一. 认识 CSS ​

1. 什么是 CSS ​

2. CSS 是一种语言吗？ ​

二. CSS 的历史 ​

1. 发展历史 ​

2. 总结 ​

三. CSS 如何编写呢？ ​

1. 语法规则 ​

四. 如何将 CSS 样式应用到元素上？ ​

1. 内联样式 ​

2. 内部样式表 ​

3. 外部样式表 ​

五. @import ​

六. CSS 的注释 ​

七. 必须掌握的 CSS 属性 ​

八. CSS属性的官方文档 ​

九. 目前需要掌握的 CSS 属性 ​

十. link 元素 ​

1. 定义 ​

2. link 元素常见的属性 ​

十一. 认识进制 ​

1. 进制的概念 ​

2. 人类的十进制 ​

3. 计算机中的进制 ​

十二. CSS 颜色的表示方法 ​

1. 颜色关键字（color keyword） ​

2. RGB颜色 ​

3. RGB的表示方法 ​

十三. Chrome 浏览器开发者工具 ​

十四. 浏览器渲染流程 ​

一. 认识 CSS

1. 什么是 CSS

2. CSS 是一种语言吗？

二. CSS 的历史

1. 发展历史

2. 总结

三. CSS 如何编写呢？

1. 语法规则

四. 如何将 CSS 样式应用到元素上？

1. 内联样式

2. 内部样式表

3. 外部样式表

五. @import

六. CSS 的注释

七. 必须掌握的 CSS 属性

八. CSS属性的官方文档

九. 目前需要掌握的 CSS 属性

十. link 元素

1. 定义

2. link 元素常见的属性

十一. 认识进制

1. 进制的概念

2. 人类的十进制

3. 计算机中的进制

十二. CSS 颜色的表示方法

1. 颜色关键字（color keyword）

2. RGB颜色

3. RGB的表示方法

十三. Chrome 浏览器开发者工具

十四. 浏览器渲染流程