本文最后更新于：2024年4月25日 上午
自定义字体
@font-face可为网页使用自定义字体
font-family属性定义自定义字体名
src属性导入字体,local用于在本地查找
1
2
3
4
5
| @font-face {
font-family: "FiraCode",
src: local("Fira Code"),
url('xxx.xxx.xxx');
}
|
自定义列表前缀
1
2
3
4
5
6
7
8
9
| @counter-style fruit {
system: cyclic;
symbols: '🍎' '🍊' '🍌' '🍉' '🍇' '🍓' '🍑' '🍍' '🍒' '🥝';
suffix: ' ';
}
.count {
list-style: fruit;
}
|
样式文件导入
@import用于引入样式表,但不是并行引入样式文件,故不推荐使用
@import还可在导入地址后添加导入条件
1
2
3
| @import './reset.css';
@import url('./mobile.css') (max-width: 768px);
@import url('./pc.css') (min-width: 768px);
|
声明动画
@keyframe用于声明一段动画
1
2
3
4
5
6
7
8
9
10
11
12
| @keyframes rotate {
0%{
background-color: rgb(17, 128, 255);
box-shadow: 2px 2px 2px rgb(17, 128, 255);
transform: rotateX(0deg);
}
100%{
background-color: rgb(17, 128, 255);
box-shadow: 2px 2px 2px rgb(17, 128, 255);
transform: rotateX(360deg);
}
}
|
媒体查询
@media满足条件时应用相应的样式规则
@media不会提升样式权重,所以应当将@media规则放于默认样式之后
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
.at-rule-media {
background-color: green;
}
@media (max-width: 768px) {
.at-rule-media {
background-color: red;
}
}
</style>
<p class="at-rule-media">宽度小于768px时为红色</p>
|
浏览器视口宽度小于768px时为红色
更多查询类型:
[@media - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media)
容器查询
@container用于查询元素的属性值,符合条件时应用相应的样式.
container-name属性声明容器名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .container {
container-name: test;
container-type: inline-size;
}
.test {
background-color: green;
}
@continer test (min-width: 100px) {
.part {
background-color: red;
}
}
|
特性查询
@supports用于对支持相应CSS属性的浏览器应用相应的样式
@supports (CSS属性: 属性值) {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <style>
.supports-asin {
background-color: red;
}
.supports-asin::after {
content: '不支持asin()';
}
@supports (transform: rotate(asin(-0.2))) {
.supports-asin {
background-color: green;
}
.supports-asin::after {
content: '支持asin()';
}
}
</style>
<p class="supports-asin">当前浏览器</p>
|
当前浏览器
自定义属性
@property
权重级联
基础使用
@layer后声明的权重大于先声明的,且权重低于未使用@layer的选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @layer low {
.layer {
color: red;
}
}
@layer mid {
.layer {
color: yellow;
}
}
@layer high {
.layer {
color: green;
}
}
|
🌈Hello World!
提前声明
@layer规则可以提前声明css的权重,声明后再次声明不会改变权重(权重同第一次声明的权重)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| @layer low, mid, high;
@layer high {
.layer {
color: red;
}
}
@layer mid {
.layer {
color: yellow;
}
}
@layer low {
.layer {
color: green;
}
}
|
🌈Hello World!
但匿名层无法提前声明,每个匿名层都是单独的,各匿名层权重会按各声明位置重新计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| @layer {}
@layer tmp {
.layer {
color: green;
}
}
@layer {
.layer {
color: red;
background-color: green;
}
}
@layer tmp {
.layer {
background-color: yellow;
}
}
|
🌈Hello World!
级联层
1
| @import('./base.css') layer(base);
|
推荐阅读:
[2022 年最受瞩目的新特性 CSS @layer 到底是个啥？](https://juejin.cn/post/7077758893442465806)