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

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比鎮(zhèn)康網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鎮(zhèn)康網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鎮(zhèn)康地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

一個(gè)at-rule就是一個(gè)CSS語句，以@開頭，后接標(biāo)識(shí)符，最后以；結(jié)束。

@charset

@charset用于定義樣式表中使用的字符編碼。它必須寫在樣式表的最開頭且前面不可有別的字符。

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

@import

@import用于導(dǎo)入外部CSS樣式表文件。

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

@namespace

@namespace是用來定義使用在CSS樣式表中的XML命名空間的@規(guī)則。

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

@media

@media用于定義在一個(gè)或多個(gè)設(shè)備類型、具體特點(diǎn)和環(huán)境的媒體查詢來應(yīng)用樣式。

/* @media */
@media screen and (min-width: 900px) {
 h2 {
 color:red;
 font-size:14px;
 }
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

@page

@page用于在打印文檔時(shí)修改某些CSS屬性。@page規(guī)則只能修改margin、orphans、widow 和 page breaks of the document，對(duì)其他屬性的修改是無效的。

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

@keyframes

@keyframs通過定義動(dòng)畫序列中的關(guān)鍵幀來控制CSS動(dòng)畫不同步驟的狀態(tài)。

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

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

@supports

@supports用來檢測(cè)規(guī)則組的規(guī)則是否生效。規(guī)則與@media類似

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

@viewport

@viewport用于設(shè)置視口（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用于給網(wǎng)頁指定文本字體。

/*
 * @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如果滿足條件組的條件，則規(guī)則生效（推延至 CSS Level 4 規(guī)范）

/*
 * @document name(guide) {
 * 
 * }
 */
@document url(http://www.w3.org/),
 url-prefix(http://www.w3.org/Style/),
 domain(mozilla.org),
 regexp("https:.*") {
 /* 該條CSS規(guī)則會(huì)應(yīng)用在下面的網(wǎng)頁:
 + URL為"http://www.w3.org/"的頁面.
 + 任何URL以"http://www.w3.org/Style/"開頭的網(wǎng)頁
 + 任何主機(jī)名為"mozilla.org"或者主機(jī)名以".mozilla.org"結(jié)尾的網(wǎng)頁 
 + 任何URL以"https:"開頭的網(wǎng)頁 */

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

以上是“css中@規(guī)則有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！