规则

yuhuo2022-03-07CssCss基础

@规则 - CSS（层叠样式表） | MDN (mozilla.org)open in new window

@charset

@charset <字符编码>;

@charset "UTF-8";

注意

只能在 css 文件中使用，并且必须放在最开头；
有多个 @charset 规则被声明，只有第一个会被使用；
引号和空格格式要求严格，参考上示例子；

@import

@import <样式文件>

url() 函数
文本值

/* 相对路径 */
@import "./style.css";
@import url(./style.css);
/* 根路径 */
@import "/style.css";
@import url(/style.css);
/* 绝对路径 */
@import "https://yuhuo.com/style.css";
@import url(https://yuhuo.com/style.css);

注意

@import 规则必须放在样式开头，在 @charset 规则之后。

@supports

@supports (not? (<属性:值>)) [and|or (not? (<属性:值>))]# { <样式表> }

@supports (not (display: 1px)) and (display: flex) {
    .box {
        color: red;
    }
}

@media

@media [not|only]? <媒体类型>? [and (<媒体特性>)]# { <样式表> }

媒体类型

all：所有设备默认值
screen：屏幕
print：打印预览模式
speech：语音合成器

媒体特性

width: <视口宽度>

长度值

height: <视口高度>

长度值

min-width: <视口最小宽度>

min-height: <视口最小高度>

max-width: <视口最大宽度>

max-height: <视口最大高度>

device-width: <屏幕宽度>

device-height: <屏幕高度>

min-device-width: <屏幕最小宽度>

min-device-height: <屏幕最小高度>

max-device-width: <屏幕最大宽度>

max-device-height: <屏幕最大高度>

aspect-ratio: <视口宽高比>

数值/数值

max-aspect-ratio: <视口最大宽高比>

min-aspect-ratio: <视口最小宽高比>

device-aspect-ratio: <屏幕宽高比>

max-device-aspect-ratio: <屏幕最大宽高比>

min-device-aspect-ratio: <屏幕最小宽高比>

color: <单种颜色分量位数>

数值

说明

颜色份量由红，蓝，绿3种组成，比如当前单种颜色分量位数为 8，则 javascript 中 screen.colorDepth = 24。（推测的）

max-color: <单个颜色分量最大位数>

min-color: <单个颜色分量最小位数>

orientation: <方向>

landscape：横屏
portrait：竖屏

<link rel="stylesheet" media="screen and (min-width: 500px)" href="style.css" />
<style>
    @media screen and (min-width: 500px) {
        .div { 
            background: red; 
        }
    }
</style>

@keyframes

@keyframes <动画名> { [<关键帧> { <属性表> }]# }

动画名

文本值

关键帧

from：起始帧 = 0%
to：终止帧 = 100%
百分值

@keyframes slidein {
    from {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(20%);
    }
    to {
        transform: translateX(100%);
    }
}

特定作用属性

animation-name

@font-face

@font-face { <字体描述符># }

src: [<本地字体> | <字体文件> <字体格式>?,]# 必选项

本地字体

local() 函数

字体文件

url() 函数

字体格式

format() 函数

@font-face {
    font-family: "MyFont";
    /* IE9兼容模式 */
    src: url(./MyFont.eot);
    	 /* 本地字体 */
    src: local("微软雅黑"),
         /* IE6~IE8 */
         url("./MyFont.eot?#iefix") format('embedded-opentype'),
        /* woff升级版，还未被广泛支持 */
         url("./MyFont.woff2") format('woff2'),
        /* 现代浏览器，W3c标准，对ttf和otf进一步压缩 */
         url("./MyFont.woff") format('woff'),
         /* ttf升级版 */
         url("./MyFont.otf") format('opentype'),
         /* Safari，Android，iOS */
         url("./MyFont.ttf") format('truetype'),
         /* 旧版IOS */
         url("./MyFont.svg") format('svg');
}

TIP

移动端推荐使用 ttf，web 端推荐使用 woff2 / woff。

font-family: <字族> 必选项

font-weight: <字重>

font-style: <字形>

font-variant: <字体变体>

font-stretch: <字宽>

font-display: <字体显示>;

auto：自动默认值，一般效果同 block
block
swap
fallback
option

font-display 详解open in new window

unicode-range: <应用字符范围>,#

U+4E00-9FFF：Unicode 码位范围 4E00-9FFF
U+30??：Unicode 码位范围 3000-30FF
U+45：Unicode 单个码位 45

规则

# @charset

# @import

# @supports

# @media

# @keyframes