css中@规则有哪些

小编给大家分享一下css中@规则有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联-专业网站定制、快速模板网站建设、高性价比镇康网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式镇康网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖镇康地区。费用合理售后完善，10余年实体公司更值得信赖。

一个at-rule就是一个CSS语句，以@开头，后接标识符，最后以；结束。

@charset

@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。

/* @charset ""; */
@charset "UTF-8";

@import

@import用于导入外部CSS样式表文件。

/* @import url; */
/* @import url list-of-media-queries; */
@import 'custom.css';
@import url("fineprint.css") print;

@namespace

@namespace是用来定义使用在CSS样式表中的XML命名空间的@规则。

/* @namespace ? [  |  ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

@media

@media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。

/* @media */
@media screen and (min-width: 900px) {
 h2 {
 color:red;
 font-size:14px;
 }
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

@page

@page用于在打印文档时修改某些CSS属性。@page规则只能修改margin、orphans、widow 和 page breaks of the document，对其他属性的修改是无效的。

/*
 * @page  {
 * 
 * }
 */
@page {
 size: 10in 20in;
 margin: 10% 20%;
}

@keyframes

@keyframs通过定义动画序列中的关键帧来控制CSS动画不同步骤的状态。

/* @keyframes */
@keyframes slidein {
 from {
 margin-left: 100%;
 width: 300%;
 }

 to {
 margin-left: 0%;
 width: 100%;
 }
}

@supports

@supports用来检测规则组的规则是否生效。规则与@media类似

/*
 * @supports  {
 * 
 * }
 */
@supports (display: flex) {
 div {
 display: flex;
 }
}

@viewport

@viewport用于设置视口（viewport）的特性。

/*
 * @viewport {
 * 
 * }
 */
@viewport {
 min-width: 640px;
 max-width: 800px;
}

@viewport {
 zoom: 0.75;
 min-zoom: 0.5;
 max-zoom: 0.9;
}

@viewport {
 orientation: landscape;
}

@counter-style

@counter-style用于自定义counter的样式

/*
 * @counter-style  {
 * 
 * }
 */
@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

.items {
 list-style: circled-alpha;
}

@font-face

@font-face用于给网页指定文本字体。

/*
 * @font-face {
 * 
 * } 
 */
@font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }

@doucment

@document如果满足条件组的条件，则规则生效（推延至 CSS Level 4 规范）

/*
 * @document name(guide) {
 * 
 * }
 */
@document url(http://www.w3.org/),
 url-prefix(http://www.w3.org/Style/),
 domain(mozilla.org),
 regexp("https:.*") {
 /* 该条CSS规则会应用在下面的网页:
 + URL为"http://www.w3.org/"的页面.
 + 任何URL以"http://www.w3.org/Style/"开头的网页
 + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页 
 + 任何URL以"https:"开头的网页 */

 /* make the above-mentioned pages really ugly */
 body {
 color: purple;
 background: yellow;
 }
}

以上是“css中@规则有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！