样式化和排版页面
CSS是一种用于向用户指定文档如何呈现的语言。
Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成：
- 选择器 选择想应用样式规则的元素
- 样式属性 属性值更新了HTML内容的显示方式
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：
- 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
- 浏览器显示 DOM 的内容。
CSS实际是如何工作的？
CSS应用方式
- 外部样式表
link引用外部样式文件 - 内部样式表
style标签 - 内联样式
style属性
CSS声明
- 属性(property)
- 属性值(value)
CSS 的属性和属性值都是区分大小写的。属性和属性值之间，用英文半角冒号 : 隔离。 CSS 有超过300 个不同的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。
重要: 如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它。
CSS声明块 声明按块分组，每一组声明都用一对大括号包裹。声明块里的每一个声明必须用半角分号（;）分隔，否则代码会不生效。声明块里的最后一个声明结束的地方，不需要加分号，但是最好加上加分号，因为可以防止在后续增加声明时忘记加分号。
层叠算法 一个元素可以被多个选择器所匹配，因此，一个给定的属性可能被多个规则设置多次。 CSS 定义了哪个规则比其它规则更具优先级；则更具优先级的规则必定被应用。
规则(集) 选择器 + 声明块
CSS语句
-
@-规则 在CSS中被用来传递元数据、条件信息或其它描述性信息。
- @charset和@import (元数据)
- @media或@document (条件信息)
- @font-face (描述性信息)
-
嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
- @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
- @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
- @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
CSS 规范
- 空格
- 注释
/* 注释内容 */ - 简写属性
- 简单选择器 元素类型、class或id
- 类型选择器(元素选择器)
- 类选择器
. - id选择器
# - 通用选择器
*
- 属性选择器
[]属性/属性值- 存在和值属性选择器
[attr][attr=val][attr~=val]仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
- 子串值属性选择器 (伪正则选择器)
[attr|=val]选择attr属性的值是 val 或值以 val- 开头的元素[attr^=val]选择attr属性的值以 val 开头（包括 val）的元素[attr$=val]选择attr属性的值以 val 结尾（包括 val）的元素[attr*=val]选择attr属性的值中包含子字符串 val 的元素
- 存在和值属性选择器
- 伪选择器 该选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。
- 伪类
:匹配处于确定状态的一个或多个元素 - 伪元素
::匹配处于相关的确定位置的一个或多个元素::after::before::first-letter::first-line::selection::backdrop
- 伪类
- 组合器
, - 多重选择器
- 后代选择器
- 子选择器
> - 相邻兄弟选择器
+ - 通用兄弟选择器
~
- 后代选择器
- 数值
- 长度和尺寸
- 1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）
- ex, ch: 分别是小写x的高度和数字0的宽度。
- rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用
- vw, vh: 分别是视口宽度的1/100和视口高度的1/100
- 无单位值 无单位行高 字体大小的倍数
- 颜色
- 关键词
- 十六进制值
- rgb()/rgba()
- hsl()/hsla()
- 不透明度 opacity 会设置所有选定元素以及它们的孩子节点的不透明度。
- 函数 rotate(45deg) tanslate(50px, 60px) calc(90% - 15px) url('xx.png')