At-rules規(guī)則是目前CSS中一種常見的語法規(guī)則，它使用一個(gè)"@"符號(hào)加一個(gè)關(guān)鍵詞定義，后面跟上語法區(qū)塊，如果沒有則以分號(hào)結(jié)束即可。
這種規(guī)則一般用于標(biāo)識(shí)文檔、引入外部樣式、條件判斷等等，本文是對(duì)該規(guī)則的使用總結(jié)。

常用規(guī)則

@import

@import 主要用于從其他樣式表導(dǎo)入新的樣式規(guī)則，語法：@import url|string list-of-mediaqueries;。

• url|string：需要引入的樣式資源路徑，相對(duì)路徑或絕對(duì)路徑都可以；
• list-of-mediaqueries：逗號(hào)分隔的條件列表，判斷什么條件下才引入該樣式資源，支持媒體查詢條件。

@import "./reset.css";
@import url("./reset.css")

當(dāng)使用條件判斷時(shí)，可以使用媒體查詢條件。

/* 寬度小于1000px才會(huì)生效 */
@import "./reset.css" screen and (max-width: 1000px); 

另外，當(dāng)在html文件或樣式文件中使用該語法(不使用現(xiàn)代框架)，有兩點(diǎn)需要注意：

• 引入位置：必須位于樣式文件或<style>區(qū)塊的頭部，前面不可以出現(xiàn)其他css樣式，但可以在@charset 后面。
• 不能在條件嵌套語法中使用。

當(dāng)使用vue等框架的時(shí)候，則可以在 @import 前出現(xiàn)css樣式，也能在條件嵌套語法中使用，是因?yàn)閷?dǎo)入的樣式資源會(huì)被解析具體的樣式到頁面上。

@font-face

@font-face 用于加載自定義字體。屬于目前前端比較常用的語法，也有多開源的字體圖標(biāo)庫可以使用。
既支持提供字體資源文件路徑進(jìn)行加載，也支持用戶本地安裝的字體加載。

@font-face {
  font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
}
@font-face {
  font-family: "iconfont";
  src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}

如上，就是一個(gè)加載字體資源的示例，一個(gè)加載cdn上的地址，一個(gè)加載本地文件。

@font-face 定義了一個(gè)CSS區(qū)塊，有多個(gè)屬性取值：

• font-family：指定字體名字，被用于font或font-family屬性；
• src：加載字體資源；

  url()：加載字體資源文件；

  local()：加載本地電腦字體名稱，如 src: local("Arial");；

• font-style：對(duì)src指定字體的描述；
• font-variant
• font-weight

@font-face {
  font-family: "sys-Arial";
  src: local("Arial");
  font-weight: normal;
}

如上，使用local加載當(dāng)前電腦系統(tǒng)的字體名稱。

@charset

@charset 為樣式表文件指定所需要使用的字符編碼，只能在CSS文件中使用，語法：@charset "charset";。

• charset：指定使用的字符集。

@charset "UTF-8";

特點(diǎn)：

• 在樣式表文件中使用，不能在html文件的<style>區(qū)塊或元素內(nèi)樣式屬性中使用。
• 必須出現(xiàn)在樣式表文件的最前面。
• 使用有效的字符編碼和雙引號(hào)，并且中間只能間隔一個(gè)空格字符，且以分號(hào)結(jié)尾。
• 不能在條件嵌套語法中使用。
• 如果有多個(gè)@charset聲明，則只有第一個(gè)會(huì)生效。

瀏覽器解析樣式表文件使用字符編碼的順序：

• 文件的編碼格式；
• http請(qǐng)求響應(yīng)中的charset屬性值；
• @charset；
• link設(shè)置；
• 默認(rèn)UTF-8；

@keyframes

@keyframes 通過定義動(dòng)畫序列中的關(guān)鍵幀的樣式，用來控制CSS動(dòng)畫的中間步驟。
語法定義：@keyframes animationname { keyframes-selector { css-styles; } }。

• animationname：動(dòng)畫名稱，作為動(dòng)畫引用時(shí)的標(biāo)識(shí)符；
• keyframes-selector：關(guān)鍵幀的名稱選擇器，用于指定關(guān)鍵幀被用于動(dòng)畫過程中的哪個(gè)節(jié)點(diǎn)，一般是時(shí)間節(jié)點(diǎn)，有兩種取值方式：

  百分比：0% - 100%，時(shí)間百分比的節(jié)點(diǎn)

  from和to：from等同起始時(shí)間from，to等同結(jié)束時(shí)間

• css-styles：指定當(dāng)前關(guān)鍵幀的樣式屬性值。

@keyframes dropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wave {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

如上，使用兩種方式定義的關(guān)鍵幀動(dòng)畫樣式。

特性說明：

• 當(dāng)沒有指定開始或結(jié)束狀態(tài)，則將元素的享有樣式作為開始或結(jié)束狀態(tài)；
• 當(dāng)有多個(gè)同名稱的關(guān)鍵幀時(shí)，樣式屬性相同以最后一次為準(zhǔn)，樣式屬性不同則會(huì)合并所有屬性共同起作用；
• 如果再關(guān)鍵幀樣式中使用不能用作動(dòng)畫的屬性，會(huì)被忽略；
• 在關(guān)鍵幀中使用 !important 限定樣式會(huì)被忽略，不起作用。

為了獲得最佳動(dòng)畫體驗(yàn)，應(yīng)該始終定義開始和結(jié)束狀態(tài)。

@media

@media 媒體查詢，是基于不同的媒體查詢結(jié)果定義不同的樣式。多用于針對(duì)不同屏幕尺寸進(jìn)行差異化的樣式設(shè)置，做一些響應(yīng)式頁面設(shè)計(jì)。另外，如果縮放瀏覽器的大小，也可以根據(jù)查詢寬高重新渲染頁面樣式等。

語法： @media mediatype and|not|only (media feature) { CSS-Style; }。

說明：

• mediatype：媒體類型，描述設(shè)備類別，一般有 all、print、screen、speech，默認(rèn)all：

  • all：所有設(shè)備；
  • print：打印預(yù)覽模式；
  • screen：用于屏幕；
  • speech：語音合成器；

• 媒體特性(media feature)：描述設(shè)備、環(huán)境的具體條件特征；必須使用括號(hào)括起來，常用的有：

  • 寬高類：width、max-width、min-width、height、max-height、min-height等；
  • 其他：color、grid、orientation、resolution、scan等；

• 邏輯操作符：and、not、only、，：

  • and：多個(gè)規(guī)則組合，每條都滿足才行；
  • not：否定某個(gè)查詢規(guī)則；
  • only：整個(gè)查詢匹配時(shí)才滿足；
  • 逗號(hào)，：將多個(gè)查詢組合，一條滿足即可，類似 or;

@media screen (max-width: 1000px) { 
  div {
    background-color: red;
  }
}

/*或者嵌套*/
@media screen {
  @media (max-width: 1000px) {
    div {
      background-color: red;
    }
  }
}

如上示例，即是我們經(jīng)常使用的方式。

@media 媒體查詢也能作為 @import 的條件使用，可見上面已有介紹。

link和style中使用

在引入樣式表的 <link> 語句中，也可以使用媒體查詢，根據(jù)不同的條件加載不同的樣式文件：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">

在 <style> 樣式區(qū)塊也可以使用媒體查詢：

<style media="screen and (max-width: 1000px)">
  div {
    background-color: red;
  }
</style>

JS檢測(cè)媒體查詢

使用Window.matchMedia() 和MediaQueryList.addListener() 方法來測(cè)試和監(jiān)控媒體狀態(tài)。
使用方式：

// 獲取媒體查詢MediaQueryList對(duì)象，有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true  -- 當(dāng)前媒體查詢規(guī)則已生效，為false則不生效
// media: "(max-width: 1000px)"

screenMediaQueryList.addEventListener('change', (res) => {
  console.log(2, res)
})

可以獲取當(dāng)前是否已使用該媒體查詢規(guī)則，或者監(jiān)聽媒體查詢狀態(tài)的變化事件。

非常用規(guī)則

以下是一些使用較少的@規(guī)則。

@supports

@supports 用于指定依賴于瀏覽器一個(gè)或多個(gè)特定CSS功能的支持申明。常用來判斷當(dāng)前瀏覽器是否支持某個(gè)CSS特性功能，所以又被稱為特性查詢。
ie不支持。

如判斷自定義屬性，詳見自定義屬性知識(shí)介紹。

@supports ((--a: 0)) {
  /* 支持自定義屬性 */
}
@supports (not (--a: 0)) {
  /* 不支持自定義屬性 */
}

語法，由一組樣式聲明和一條支持條件構(gòu)成，支持條件可以是多條，可以使用 and、or、not 等進(jìn)行結(jié)合處理；還可以使用圓括號(hào)調(diào)整優(yōu)先級(jí)。

/* 瀏覽器支持grid */
@supports (display: grid) {
  div {}
}

/* 不支持grid */
@supports not (display: grid) {
}

/* 不支持gri和flex */
@supports not ((display: grid) and (display: flex)) {
}

其他

• @namespace：是用來定義使用在 CSS 樣式表中的 XML 命名空間的 @規(guī)則。定義的命名空間可以把通配、元素和屬性選擇器限制在指定命名空間里的元素。
• @page：主要用于打印文檔時(shí)修改某些CSS屬性，兼容性不高。
• counter-style：定義如何把一個(gè)計(jì)數(shù)器的值轉(zhuǎn)化為字符串表示。

到此這篇關(guān)于CSS-@規(guī)則(At-rules)常用語法使用總結(jié)的文章就介紹到這了,更多相關(guān)css @規(guī)則At-rules內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論