css中@規則有哪些

小編給大家分享一下css中@規則有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一個at-rule就是一個CSS語句，以@開頭，后接標識符，最后以；結束。

@charset

@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-prefix>? [ <string> | <url> ]; */
@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-selector-list> {
 * <page-body>
 * }
 */
@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_condition> {
 * <specific rules>
 * }
 */
@supports (display: flex) {
 div {
 display: flex;
 }
}

@viewport

@viewport用于設置視口（viewport）的特性。

/*
 * @viewport {
 * <group-rule-body>
 * }
 */
@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-name> {
 * <group-rule-body>
 * }
 */
@counter-style circled-alpha {
 system: fixed;
 symbols: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?;
 suffix: " ";
}

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

@font-face

@font-face用于給網頁指定文本字體。

/*
 * @font-face {
 * <group-rule-body>
 * } 
 */
@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) {
 * <group-rule-body>
 * }
 */
@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中@規則有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！