CSS语法之@规则(at-rule)

最新推荐文章于 2025-10-10 23:16:09 发布

原创最新推荐文章于 2025-10-10 23:16:09 发布 · 9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #@规则 #at-rule

css 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了CSS中的@-rules，包括@charset用于指定字符集，@import用于引入外部样式表，@media用于媒体查询，@page用于分页打印样式，@counter-style用于定义计数器样式，@keyframes用于定义动画，@font-face用于自定义字体，@support用于环境特性检查，@namespace用于XML命名空间，@viewport用于设置视口属性。

at-rule由一个@关键字和后续的一个区块组成，如果没有区块，则以分号结束。

@charset

用于提示css文件使用的字符串编码方式，它如果被使用，必须出现在最前面。这个规则只是在给出语法解析阶段前使用，并不影响页面上展示效果。

@charset "utf-8"

@import

用于引入一个css文件，除@charset规则不会被引入外，可以引入一个文件的全部内容。

@import "mystyle.css";
@import url("mystyle.css");

@media

media query 使用规则，它能够对设备的类型进行一些判断，在media的区块中，是普通规则列表。

@media print {
    body {
        font-size: 10pt;
    }
}

@page

page用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page {
    size: 8.5in 11in;
    margin: 10%;
    @top-left {
        content: "Hamlet";
    }
    @top-right {
        content: "Page " counter(page);
    }
}

@counter-style

counter-style产生一种数据，用于定义列表项的表现。

@counter-style triangle {
    system: cyclic;
    suffix: "";
}

@key-frames

key-frames产生一种数据，用于定义动画关键帧。

@keyframes diagonal-side {
    from {
        left: 0;
        top: 0;
    }
    
    to {
        left: 100px;
        top: 100px;
    }
}

@fontface

fontface用于定义一种字体，iconfont技术就是利用这个特性来实现。

@font-face {
    font-family: Gentium;
    src: url(http://xxxx);
}
p {
    font-family: Gentium, serif;
}

@support

support检查环境的特性，它与media比较类似。

@namespace

用于跟xml命名空间配合的一个规则，表示内部的css选择器全都带上特定命名空间。

@viewport

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替。

其他

以下是一些不太推荐使用的@规则：

@color-profile

@document

@font-feature-values