# CSS
CSS 指层叠样式表 (Cascading Style Sheets)，CSS 用于为网页上的元素设定样式，它们通常保存在外部的 .css 文件中，这样只需更改这个 CSS 文件即可更改这个网页的外观，也可以在 html 文件中通过 <style> 标签把样式写在 html 文件里
# 语法
h1 {color:red;font-size:14px;}
这行 CSS 代码表示，所有的<h1>标签的颜色为red，字体大小为14px
在这里的
h1是选择器，用于选择设置属性的对象在 CSS 中
{…}是一个声明块，块里面包含的声明是用来描述HTML元素样式的声明块可以包含一条或多条声明，声明之间用“
;”(分号)隔开每条声明都包含一个属性名称和一个值，格式为
属性名称:值把多条声明用
{}括起来，构成了一个声明块
例如：
p {
color: red;
text-align: center;
}
p是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。color是属性，red是属性值text-align是属性，center是属性值
CSS 可以同时对多个类型的元素进行样式化，每个选择器之间用,隔开
p,
h1,
h2 {
color: red;
}
这段 CSS 代码把所有的 p，h1，h2 元素的颜色都设置成了红色
CSS 中的选择器可以组合使用
例如：
对所有 <li> 中的 <em> 元素进行样式化
<body>
<li>
<em></em>
<em></em>
<em></em>
</li>
</body>
li em {
color: red;
}
对所有的 <li> 元素中类（class）为 special 的元素进行样式化
<ul>
<li></li>
<li class="special"></li>
<li></li>
</ul>
li.special {
color: orange;
}
# 注释
CSS 注释以 /* 开始, 以 */结束
/*这是个注释*/
注释是不执行的，它的作用仅仅是为了标注这些代码或者某行代码是用来干嘛的，方便开发者对代码进行查看或修改
p
{
text-align:center;
color:black; /*颜色设置为黑色*/
font-family:arial;
}
# 引入 CSS
在 HTML 中引入 CSS 有三种方式
- 内联样式
在 HTML 元素中使用 style 属性
<p style="color: red; font-size: 20px;"> </p>
- 内部样式表
在 HTML 中使用 <style> 标签
<style>
p {
color: blue;
font-size: 18px;
}
</style>
- 外部样式表
使用 <link> 引入外部 CSS 文件
<link rel="stylesheet" href="styles.css">
# 选择器
| 符号 | 选择器 | 说明 |
|---|---|---|
| 类型选择器 | 选择特定类型（HTML标签）的元素 | |
. | 类选择器 | 选择具有特定类名（class）的元素 |
# | ID 选择器 | 选择具有指定 id 的元素 |
[] | 属性选择器 | 选择具有某种指定属性的元素 |
* | 通用选择器 | 通配符，用于替代任意选择对象或者单独出现时表示选择全部元素 |
: | 伪类选择器 | 在普通选择器的基础上，选择 HTML 元素的某种状态 |
:: | 伪元素选择器 | 选则该元素上的位置（例如，元素之前或之后或元素的第一个字母等） |
> | 子选择器 | 选择某元素的子元素 |
+ | 相邻兄弟选择器 | 选择相同辈分下的相邻元素（只选择之后的相邻元素） |
~ | 通用兄弟选择器 | 选择相同辈分的元素 |
# 类型选择器
类型选择器一般用于选择 HTML 标签，例如 div，p，a 等
- 选择器的名称直接写要选择的标签的名称
- 选择了某个标签，就相当选择了页面中所有这种标签的元素
例如，以下代码就是把页面中所有的标签为 <p> 的元素的颜色都设置为红色
p {
color: red;
}
# 类选择器
类选择器具有特定类名的元素
- 选择器以
.开头，例如.example - 选择了某个类名，就相当选择了页面中所有
class为该类名的元素
例如，这个 HTML 中有两个 class 为 content 的元素
<div>
<a class="content">链接</a>
<p class="content">段落1</p>
<p>段落2</p>
</div>
使用类选择器把所有类名为 content 的元素的字体大小设定为 18px
.content{
font-size: 18px
}
现在 “链接” 和 “段落1” 的字体大小都变成了18px
# ID 选择器
ID 选择器用于选择具有指定 id 的元素
- 选择器以
#开头，例如#example
以下 HTML 中只有一个 id 为 start 的元素
<div>
<a class="content">链接</a>
<p id="start" class="content">段落1</p>
<p>段落2</p>
</div>
使用 ID 选择器把 id 为 start 的元素的字体粗细设置为400
#start{
font-weight: 400
}
现在 “段落1” 的字体粗细就变成了400
# 属性选择器
选择具有某种指定属性的元素
- 属性用
[]包起来
属性选择器有多种使用方法
| 选择器 | 说明 |
|---|---|
[attr] | 选择有 attr 属性的元素 |
[attr="value"] | 选择有 attr 属性且其值为 value 的元素 |
[attr~="value"] | 选择有 attr 属性且其值存在 value 的元素（值可以有多个，其中一个是value） |
[attr|="value"] | 选择有 attr 属性且其值为 value 或包含 value-的元素 |
示例1：
<div>
<p title="content" >段落1</p>
<p>段落2</p>
</div>
使用属性选择器把具有 title 属性的元素的字体样式设置为斜体
[title] {
font-style: italic
}
显示效果
段落1
段落2
示例2：
<div>
<p title="content">段落1</p>
<p title="test">段落2</p>
</div>
使用属性选择器把 title="test" 的元素的颜色设置为蓝色
[title="test"] {
color: blue;
}
显示效果
段落1
段落2
示例3：
<p title="red flower">J</p>
<p title="blue sky">Q</p>
<p title="red flower blue sky">K</p>
使用属性选择器将具有 title 且属性中存在值为 flower 的元素的颜色设置为红色
[title~="flower"] {
color:red
}
显示效果
J
Q
K
示例4：
<p tilte="zh">A</p>
<p tilte="zh-hk">B</p>
<p tilte="zha">C</p>
使用属性选择器将具有 tilte 且属性值为 zh 或属性值中包含zh-的元素的颜色设置为红色
[tilte|="en"] {
color:red
}
显示效果
A
B
C
# 伪类选择器
伪类选择器用于在普通选择器的基础上，选择 HTML 元素的某种状态（例如点击元素后，鼠标在元素上悬停时，元素被选中时），当元素在特定状态下时对元素进行样式化
- 伪类选择器的前缀是
:，例如:hover - 伪类选择器一般跟在普通选择器（如类型选择器、类选择器、ID选择器等）的后面，例如
#id:hover，.class:active，a:hover
以下代码通过使用伪类选择器，实现在元素上悬停时改变元素样式
<p>将鼠标移到这里</p>
<style>
p:hover {
color: red;
}
</style>
显示效果
将鼠标移到这里
常用的伪类选择器
| 选择器 | 说明 |
|---|---|
:hover | 当鼠标悬停在元素上时 |
:active | 当鼠标点击（激活）元素时 |
:focus | 当元素获得焦点时（被选中） |
:focus-within | 当元素或其子元素获得焦点时 |
元素结构相关的伪类选择器
| 选择器 | 说明 |
|---|---|
:first-child | 选择该元素的第一个子元素 |
:last-child | 选择该元素的最后一个子元素 |
:nth-child(n) | 选择该元素的第 n 个子元素 |
:first-of-type | 选择该元素的第一个同标签的元素 |
:last-of-type | 选择该元素的最后一个同标签的元素 |
:nth-of-type(n) | 选择该元素的第 n 个同标签的元素 |
链接相关的伪类选择器
这些伪类选择器用于 <a>
| 选择器 | 说明 |
|---|---|
:link | 未被访问过的链接 |
:visited | 已被访问过的链接 |
:target | 链接中包含锚点的元素被点击后 |
# :nth-child()
使用表达式匹配元素
- 表达式格式为
an+b，a和b都为整数 - 如果
a被省略，则默认为 1，如果b被省略，则默认为 0 n表示从0开始的所有自然数（0和正整数）
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
2n+1 表示1，3，5，7，9等 即所有的奇数，这里表示把列表中所有的奇数项的背景色都设置为淡黄色
li:nth-child(2n+1) {
background-color: lightyellow;
}
显示效果
- 第一项
- 第二项
- 第三项
- 第四项
- 第五项
也可以这样，表示选择列表的前三项，这里的 -n+3 和 3-n 是一个意思但不能使用 3-n ，因为语法格式是 an+b
li:nth-child(-n+3) {
}
使用关键词匹配元素
关键词
odd表示元素在兄弟元素列表中的奇数位置：1、3、5……。even表示元素在兄弟元素列表中的偶数位置：2、4、6……。
下面的例子使用选择器 :nth-child() 把列表中的偶数项背景色设置为了淡黄色
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
li:nth-child(even) {
background-color: lightyellow;
}
显示效果
- 第一项
- 第二项
- 第三项
- 第四项
- 第五项
使用 of <selector> 匹配元素
示例
<ul>
<li>第一项</li>
<li class="important">第二项</li>
<li class="important">第三项</li>
<li class="important">第四项</li>
<li class="important">第五项</li>
</ul>
该选择器匹配前三个设置了 class="important" 的列表项，并把它们的背景色设置为亮蓝
li:nth-child(-n + 3 of li.important) {
background-color: lightblue;
}
第二项到第五项 class 都为 important 由于只匹配 class="important" 的前三项，所以只有第二项到第四项的背景色被设置为了亮蓝
显示效果
- 第一项
- 第二项
- 第三项
- 第四项
- 第五项
与前者不同，这个选择器表示在前三个列表项中选择具有 class="important" 的项
li.important:nth-child(-n + 3) {
}
# 伪元素选择器
伪元素选择器在不改变元素DOM结构的情况下，对元素进行样式化。例如，在元素前后插入一些内容，或者对该元素的第一个字母或第一行内容进行样式化等
常用的伪元素选择器
| 选择器 | 说明 |
|---|---|
::before | 在元素的前面 |
::after | 在元素的后面 |
::first-letter | 选择元素的第一个字母 |
::first-line | 选择元素的第一行内容 |
::selection | 选择元素中被选中的部分 |
示例：
使用伪元素选择器 ::before 在元素前面添加一段内容
<p>CSS 完全指南</p>
p::before {
content: "第 1 章 ";
}
显示效果
CSS 完全指南
使用伪元素选择器 ::first-letter 让元素内容中的第一个字母放大变粗
<p>Knowledge is power</p>
p::first-letter {
font-size: 20px;
font-weight: 600
}
显示效果
Knowledge is power
使用伪元素选择器 ::first-line 让元素的第一行内容显示为红色
<p>拾起一片秋叶，那叶子上还带着一丝丝凉意和凋零的悲哀，但是，仔细观察，你会发现它却依然散发着一股秋天的美好香气。而那些曾经闪耀着光辉的回忆和刻骨铭心的经历，它们都犹如这一片秋叶一样，轻轻地飘落进时间的流水中。</p>
p::first-line {
color: red;
}
显示效果
拾起一片秋叶，那叶子上还带着一丝丝凉意和凋零的悲哀，但是，仔细观察，你会发现它却依然散发着一股秋天的美好香气。而那些曾经闪耀着光辉的回忆和刻骨铭心的经历，它们都犹如这一片秋叶一样，轻轻地飘落进时间的流水中。
使用伪元素选择器 ::selection 让选中的内容背景变为黄色
<p>试着选中这些内容</p>
p::selection {
background-color:yellow;
}
显示效果
试着选中这些内容
# 关系选择器
| 符号 | 选择器 | 说明 |
|---|---|---|
> | 子选择器 | 选择某元素的子元素 |
+ | 相邻兄弟选择器 | 选择相同辈分下的相邻元素（只选择之后的相邻元素） |
~ | 通用兄弟选择器 | 选择相同辈分的元素 |
# 子选择器
子选择器用于选择某元素的子元素
子选择器的符号为 >，例如 div > p，表示在 <div> 中选择标签为 <p> 的子元素
示例：
使用子选择器把 <div> 标签下，标签为 <p> 的子元素颜色设置为蓝色
<div>
<p>div的子元素p</p>
<a>div的子元素a</a>
</div>
<p>div的兄弟元素</p>
div>p {
color: blue;
}
显示效果
div的子元素p
div的子元素a
div的兄弟元素
在显示效果中我们可以看到 div的子元素p 和 div的子元素a 都是 <div> 子元素，但子选择器指定了标签 <p> 的子元素，所以只有 div的子元素p 变为蓝色
如果想让所有的子元素都样式化，我们可以使用通配符 * 带代表 <div> 下的所有元素
div > * {
color: blue;
}
显示效果
div的子元素p
div的子元素p
div的兄弟元素
# 相邻兄弟选择器
相邻兄弟选择器用于选择相同辈分下的相邻元素（只选择之后的相邻元素）
相邻兄弟选择器的符号为 +
示例：
选择与 id="b" 的元素相邻，且在其之后的的元素，使该元素变为蓝色
<div>
<p id="a">div的子元素A</p>
<p id="b">div的子元素B</p>
<p id="c">div的子元素C</p>
</div>
#b + p {
color: blue;
}
显示效果
div的子元素A
div的子元素B
div的子元素C
在显示效果中，我们可以看到与元素B相邻的元素有两个，虽然都是相邻元素但相邻兄弟选择器只选择后面的元素
# 通用兄弟选择器
通用兄弟选择器用于选择相同辈分的元素，例如以下 HTML 结构中
<div> 中的三个 <p>，都是 <div> 的子元素，这三者就是相同辈分的元素
<div>
<p id="a">div的子元素A</p>
<p id="b">div的子元素B</p>
<p id="c">div的子元素C</p>
</div>
选择同辈分下 id="a" 的元素的所有相邻元素
#a ~ * {
color: blue;
}
显示效果
div的子元素A
div的子元素B
div的子元素C
# 通用选择器
* 是 CSS 中的通配符，表示全部元素，用它做选择器则会选择网页中的所有元素
* 可以和其他选择器组合使用
- 例如
#a ~ *表示id为a的元素的所有同级相邻元素 - 或者
div > *表示<div>标签下的所有元素
# CSS 属性
| 属性 | 说明 | 属性 | 说明 |
|---|---|---|---|
color | 设置文本颜色 | display | 设置元素显示类型 |
background | 设置背景 | position | 设置元素定位方式 |
font | 设置字体 | opacity | 设置透明度 |
text | 设置文本 | border | 设置边框 |
line-height | 设置行高 | opacity | 设置透明度 |
width | 设置宽度 | z-index | 设置堆叠顺序 |
height | 设置高度 | transition | 设置过渡动画 |
margin | 设置外边距 | animation | 设置动画效果 |
padding | 设置内边距 | outline | 设置元素轮廓 |
visibility | 设置元素是否可见 | filter | 应用图像效果，如模糊、亮度、对比度等 |
min-width | 设置元素的最小宽度 | min-height | 设置元素最小高度 |
max-width | 设置元素最大宽度 | max-height | 设置元素最大高度 |
transform | 对元素应用2D或3D的变形效果 | user-select | 设置用户是否可以选择元素的内容 |
box-shadow | 设置元素的阴影效果 | pointer-events | 控制元素是否响应鼠标事件 |
# background
background 是个复合属性，它可以同时设置背景的多种属性，也可以使用background 的具体属性来设置背景，例如 background-color 只用于设置背景颜色
| 属性 | 说明 |
|---|---|
| background-color | 定义元素的背景颜色 |
| background-image | 定义元素的背景图像 |
| background-position | 控制背景图像在元素中的初始位置 |
| background-repeat | 指定背景图像是否以及如何重复 |
| background-size | 控制背景图像的大小 |
| background-clip | 决定背景的绘制区域 |
| background-blend-mode | 控制背景图像是否随着页面的其余部分滚动，或者固定在视口上 |
| background-origin | 指定背景图像相对于哪个盒子定位 |
| background-position-x | 控制背景图像的水平位置 |
| background-position-y | 控制背景图像的垂直位置 |
# text
| 属性 | 说明 |
|---|---|
text-align | 设置文本内容的水平对齐方式 |
text-align-last | 设置文本内容最后一行的水平对齐 |
text-combine-upright | 在垂直排版的文本中使部分内容水平并排显示 |
text-decoration | 用于设置文本的装饰效果，如下划线、删除线等 |
text-decoration-color | 用于设置文本修饰线的颜色 |
text-decoration-line | 用于设置文本修饰线的类型，例如上划线，下划线等 |
text-decoration-style | 用于设置文本修饰线的样式，例如实现，虚线，波浪线等 |
text-decoration-thickness | 用于设置文本装饰线的厚度 |
text-emphasis (opens new window) | 用于在文本上添加额外的强调标记，例如小圆点、符号等 |
text-emphasis-color (opens new window) | 设置文本强调标记的颜色 |
text-emphasis-position (opens new window) | 设置文本强调标记的位置 |
text-emphasis-style (opens new window) | 设置文本强调标记的样式 |
text-indent (opens new window) | 用于设置文本缩进长度 |
text-justify (opens new window) | 用于设置文本两端对齐时如何填充文本行之间的空白空间，以达到两端对齐的效果 |
text-orientation (opens new window) | 用于规定垂直文本的显示方式 |
| text-overflow | 内容 |
| text-shadow | 为文本添加阴影 |
| text-transform | 内容 |
| text-underline-offset | 内容 |
| text-underline-position | 内容 |
| text-wrap | 内容 |
| text-wrap-mode | 内容 |
| text-wrap-style | 内容 |
# text-align
| 值 | 说明 |
|---|---|
left | 内容向左侧对齐 |
right | 内容向右侧对齐 |
center | 内容居中 |
justify | 内容向两侧对齐，填满整个容器的宽度（除最后一行） |
start | 根据内容方向进行文本的对齐，若从左至右，则等于 left，反之则为 right |
end | 根据内容方向进行文本的对齐，若从左至右，则等于 right，反之则为 left |
inherit | 继承父元素的text-align属性 |
initial | 将该属性设置为默认，一般默认为向左对齐 |
revert | 文本根据用户语言的特性进行对齐，一般向左对齐，阿拉伯语或希伯来语会向右对齐 |
以下示例演示了向左对齐，向右对齐，居中对齐 三种对齐方式
<p class="left-align">向左对齐</p>
<p class="right-align">向右对齐</p>
<p class="center-align">居中对齐</p>
/*向左对齐 */
.left-align {
text-align: left;
}
/*向右对齐*/
.right-align {
text-align: right;
}
/*居中对齐 */
.center-align {
text-align: center;
}
显示效果
向左对齐
向右对齐
居中对齐
# text-align-last
当 text-align 被设置为 justify 时文本的最后一行会默认向左对齐，这时想要规定最后一行的文本对齐方式，就要用到 text-align-last 属性
- 该属性只有在
text-align被设置为justify时才会生效
| 值 | 说明 |
|---|---|
auto | （默认值）向左对齐 |
left | 最后一行内容向左水平对齐 |
right | 最后一行内容向右水平对齐 |
center | 最后一行内容居中 |
justify | 最后一行文本内容的开头与 的左侧对齐，末尾与右侧对齐 |
start | 如果内容方向是左至右，则等于 left，反之则为 right |
end | 如果内容方向是左至右，则等于 right，反之则为 left |
# text-combine-upright
在垂直排版的文本中使部分内容水平并排显示
| 值 | 说明 |
|---|---|
none | 字符不并排显示 |
all | 允许所有字符并排显示 |
示例
<div class="vertical-text">
<span class="combined">2024</span>年
<span class="combined">10</span>月
<span class="combined">8</span>日より放映開始
</div>
/*规定文本垂直显示*/
.vertical-text {
writing-mode: vertical-rl;
}
/*规定内容并排显示*/
.combined {
text-combine-upright: all;
}
显示效果
# text-decoration
text-decoration 是一个复合属性，用于设置文本的装饰效果，如下划线、删除线等
它由以下属性构成
text-decoration-color用于设置文本修饰线的颜色text-decoration-line用于设置文本修饰线的类型，例如上划线，下划线等text-decoration-style用于设置文本修饰线的样式，例如实现，虚线，波浪线等text-decoration-thickness用于设置文本装饰线的厚度
| 值 | 说明 |
|---|---|
| none | 没有任何装饰(默认值) |
| underline | 显示下划线 |
| overline | 显示上划线 |
| line-through | 显示删除线 |
| inherit | 继承父元素的属性值 |
示例
当触碰元素时使元素下方出现红色下划线
<div>
<p>Visit website</p>
</div>
<style>
p {
text-decoration: none;
}
p:hover {
text-decoration: underline red;
}
</style>
显示效果
Visit website
# text-decoration-style
用于设置文本修饰线的类型
| 值 | 说明 | 效果 |
|---|---|---|
solid | 实线 | 1234567890abcde |
double | 双实线 | 1234567890abcde |
dotted | 点划线 | 1234567890abcde |
dashed | 虚线 | 1234567890abcde |
wavy | 波浪线 | 1234567890abcde |
# text-decoration-thickness
用于设置文本装饰线的厚度
| 值 | 说明 |
|---|---|
auto | 浏览器默认厚度 |
from-font | 如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值，如果没有则使用默认厚度 |
<length> (opens new window) | 长度类型，例如1px，1em等 |
<percentage> | 百分比，文本修饰线的粗细相对于文本高度的百分比 |
# text-shadow
用于给文本添加阴影效果
| 值 | 属性 |
|---|---|
<color> | 阴影的颜色 |
<offset-x> | 阴影相对于文本的水平偏移量 |
<offset-y> | 阴影相对于文本的垂直偏移量 |
<blur-radius> | 阴影的模糊半径，模糊半径越大，阴影越大越淡，默认为0 |
# color
| 属性 | 说明 |
|---|---|
color | 设置文本的颜色或某些元素的填充颜色。它可以接受各种颜色值，如十六进制颜色值（例如 #ff0000），颜色名称（如 red），RGB、RGBA、HSL 或 HSLA 形式的颜色值 |
color-scheme | 声明一个元素可以支持的色彩方案，从而帮助浏览器选择合适的样式来匹配用户的偏好或操作系统的主题，通常应用在根元素:root上，以全局地影响整个文档的色彩方案。值：normal（使用系统的默认色彩方案）light（使用浅色主题）dark（使用深色主题） |
| color-interpolation-filters | 这个属性主要用于SVG图形和滤镜效果中，它定义了在颜色空间中进行颜色插值的方式。值为 auto（浏览器自动选择最适合当前颜色空间的插值方法）sRGB（在sRGB颜色空间中进行插值）linearRGB（在线性RGB颜色空间中进行插值，这在处理图像的高动态范围时更为准确）auto-hwb（在Hue-Whiteness-Blackness (HWB) 颜色空间中自动选择插值方式 |
# font
font 用于设置元素的字体，是一个复合属性，可以同时设置多个单独的字体属性，例如，字体大小、字体粗细、字体风格、字体类型等
| 属性 | 说明 |
|---|---|
font-family | 为文本设置自定义字体 |
font-size | 设置字体的大小 |
font-weight | 设置字体的粗细程度 |
font-style | 设置字体风格 值：normal 正常字体，italic 斜体，oblique 文本倾斜 |
font-feature-settings | 用于控制 OpenType 字体中的高级印刷功能 |
font-kerning | 根据字体的内置字距信息调整间距，值：auto（浏览器自动选择）normal（使用）none（禁用） |
font-stretch (opens new window) | 设置字体的水平拉伸 |
font-variant (opens new window) | 控制小写字母的大写形式、分数、序数等变体特性 |
font-variant-ligatures | 控制连字和花体字的使用 值：normal 使用连字，none 不使用连字 |
# font-family
在HTML 中使用自定义字体，首先需要在CSS中定义规则，然后才能应用
- 定义字体规则
@font-face {
font-family: 'MyFont';/* 给自定义字体命名 */
src: url('myfont.ttf') format('ttf'),
url('myfont.woff') format('woff');
}
url中填写字体文件的路径 URLformat用于表示该字体的文件格式
- 应用字体
在指定的元素中使用 font-family 属性设定字体，可以同时设定多个字体作为备选（用,隔开），如果第一个字体无法显示就会备选字体
body {
font-family: 'MyCustomFont', sans-serif;
}
这个例子中的选择器是 body 把 <body> 中的所有文本都设定为了自定义的字体，可以用类选择器或者ID选择器对单独的文本元素进行字体的设置
# font-size
font-size 属性用于控制字体大小，单位可以是相对大小（em，rem）也可以是绝对大小（px，pt）
单位
| 单位 | 说明 |
|---|---|
px | 像素单位，固定大小，不会随容器大小变化 |
pt | 固定大小，1pt = 1/72 英寸 |
% | 百分比，相对于父元素的大小（相对于父元素的宽度和高度） |
em | 相对于父元素的字体大小，（相对于父元素 font-size 属性的大小）适合创建相对大小 |
rem | 相对于根元素 <html> 的字体大小（相对于根元素 font-size 属性的大小） |
相对大小
以相对单位 em 举例，在这个HTML结构中，<div> 是 <p> 的父元素
<div>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</div>
元素的相对大小是由其父元素决定的，假如父元素 <div> 的 font-size 为 20px，子元素 <p> 的 font-size 为 1em，这个 1em 就相当于 20px
div {
font-size: 20px;
}
p{
font-size: 1em;
}
# font-weight
font-weight 用于设置字体的粗细程度，粗细程度可以用数值表示，例如 font-weight: 400，也可以用关键词表示 font-weight: bold
| 值 | 说明 |
|---|---|
normal | 正常粗细 400 |
bold | 加粗 700 |
lighter | 比父元素的值更细 |
bolder | 比父元素的值更粗 |
如果用数值表示粗细，数值范围应在 1~1000 之间
粗细对照
这是 font-weight 为 200 的字体
这是 font-weight 为 normal 的字体
这是 font-weight 为 bold 的字体
相对粗细值对照表
| 父元素 | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
# font-feature-settings
值
liga启用标准连字dlig启用自由连字frac启用分数格式
该属性按顺序解析，后面的值有更高的优先级，如果存在相同的值，后面的会覆盖前面的设置
示例
font-feature-settings: "liga" off, "dlig" on, "frac" 1;
on 启用特性，off 禁用特性 （也可以使用数字替代， 0 表示禁用 1 表示启用）
这行代码表示，禁用标准连字，启用自由连字，启用分数显示
# 兼容性
在使用 CSS 属性时，经常会见到有些属性前有 -webkit-, -moz-, -ms-, 和 -o- 的前缀
这时因为在制定新的CSS标准前，浏览器厂商会实验性的在浏览器中加入一些还未被写入标准的新的属性，每个浏览器厂商对于新属性的实现是不同的， 所以使用时就要加上这些前缀（例如，-webkit- 对应 WebKit 引擎，主要用于 Chrome 和 Safari；-moz- 对应Firefox；-o- 对应 Opera）
但当这一属性被标准化后，所有的浏览器厂商都应该支持该属性，这时使用这些属性时就不需要加入前缀了
# 媒体查询
媒体查询是一种可以对当前设备进行判断的方法，它可以根据设备的类型和特性，来为不同的设备设置不同的样式，也可以用于 HTML 中的 media 属性作为生效条件，媒体查询通常用于响应式设计
媒体查询表达式一般由媒体类型，逻辑运算符，媒体特性表达式三部分构成
# 媒体类型
媒体类型用于指定所查询的设备类型，以下是常用的媒体类型：
| 媒体类型 | 说明 |
|---|---|
all | 所有媒介类型 |
screen | 计算机屏幕、平板电脑和智能手机等显示设备 |
print | 打印或预览打印样式 |
speech | 语音合成设备 |
这里 print 指定了打印设备，所以当打印时，网页才会显示里面的样式
@media print { ... }
还可以同时定位多种媒体类型，用逗号隔开
@media screen, print { ... }
# 逻辑运算符
| 运算符 | 说明 |
|---|---|
and | 同时满足多个媒体特征 |
not | 排除某个媒体类型 |
only | 指定某个特定的媒体类型 |
当需要同时满足多种媒体特征是用 and 连接
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
当需要排除某个媒体类型时，用 not 连接
例如这个就是除打印时外都使用此样式
@media not print { ... }
not 会否定整个媒体查询的含义，例如这两个是等效的
@media not all and (monochrome) { ... }
@media not (all and (monochrome)) { ... }
如果不想 not 否定掉整个媒体查询的含义，可以用 , 把两段媒体特征隔开，这样 not 就不会影响到 , 之后的部分
@media not screen and (max-width: 30em), print and (max-width: 30em) { ... }
对于不支持媒体查询的老旧浏览器，使用 only 可以防止它们加载不适用的样式表，从而节省资源，因为这些老旧浏览器无法识别 only 关键字，它们会认为这是它们不理解的媒介类型，并因此忽略整个 media 属性，不会加载该样式表
所以在媒体查询中加上 only 可以防止旧浏览器加载样式出错
/* 仅在屏幕显示且分辨率至少为2倍像素密度时应用 */
@media only screen and (max-width: 30em) { ... }
# 深色模式
prefers-color-scheme 是媒体查询的一种特性，用于检测用户设备所使用的颜色模式（浅色模式或深色模式）
prefers-color-scheme 有三个值
light：设备为浅色模式dark：设备为深色模式no-preference：用户没有设定偏好，或者设备/操作系统不支持深色模式
如果设备为深色模式
@media (prefers-color-scheme: dark) {}
如果设备浅色模式
@media (prefers-color-scheme: light) {}
如果没有颜色偏好
@media (prefers-color-scheme: no-preference) {}
# 屏幕自适应
根据屏幕显示的长度和宽度进行响应
| 条件 | 说明 |
|---|---|
max-height | 显示区域的最大高度 |
min-height | 显示区域的最小高度 |
max-width | 显示区域的最大宽度 |
min-width | 显示区域的最小宽度 |
@media (max-width: 600px) {}
提示
这些特性可以单独使用，也可以组合使用，例如
/*当满足显示宽度最小320px 最大480px时响应*/
@media (min-width: 320px) and (max-width: 480px) {}
当同时满足()里的这两个条件时{}里的代码才会响应
根据屏幕方向进行响应
| 条件 | 说明 |
|---|---|
landscape | 屏幕横向时响应 |
portrait | 屏幕纵向时响应 |
@media (orientation: landscape) {}
根据屏幕比例进行响应
aspect-ratio 和 min-aspect-ratio / max-aspect-ratio
| 条件 | 说明 |
|---|---|
min-aspect-ratio | 最小横纵比，min-aspect-ratio: 16/9 表示当横纵比大于 16/9 时响应 |
max-aspect-ratio | 最大横纵比，max-aspect-ratio: 16/9 表示当横纵比小于 16/9时响应 |
@media (min-aspect-ratio: 16/9) {}