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

常用規(guī)則

@import

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

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

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

當使用條件判斷時，可以使用媒體查詢條件。

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

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

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

當使用vue等框架的時候，則可以在 @import 前出現(xiàn)css樣式，也能在條件嵌套語法中使用，是因為導入的樣式資源會被解析具體的樣式到頁面上。

@font-face

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

@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');
}

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

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

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

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

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

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

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

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

@charset

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

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

@charset "UTF-8";

特點：

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

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

• 文件的編碼格式；
• http請求響應中的charset屬性值；
• @charset；
• link設置；
• 默認UTF-8；

@keyframes

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

• animationname：動畫名稱，作為動畫引用時的標識符；
• keyframes-selector：關鍵幀的名稱選擇器，用于指定關鍵幀被用于動畫過程中的哪個節(jié)點，一般是時間節(jié)點，有兩種取值方式：

  百分比：0% - 100%，時間百分比的節(jié)點

  from和to：from等同起始時間from，to等同結束時間

• css-styles：指定當前關鍵幀的樣式屬性值。

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

如上，使用兩種方式定義的關鍵幀動畫樣式。

特性說明：

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

為了獲得最佳動畫體驗，應該始終定義開始和結束狀態(tài)。

@media

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

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

說明：

• mediatype：媒體類型，描述設備類別，一般有 all、print、screen、speech，默認all：

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

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

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

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

  • and：多個規(guī)則組合，每條都滿足才行；
  • not：否定某個查詢規(guī)則；
  • only：整個查詢匹配時才滿足；
  • 逗號，：將多個查詢組合，一條滿足即可，類似 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檢測媒體查詢

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

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

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

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

非常用規(guī)則

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

@supports

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

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

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

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

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

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

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

其他

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

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

最新評論