CSS-@規則(At-rules)常用語法使用總結-有解無憂

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

常用規則

@import

@import 主要用于從其他樣式表匯入新的樣式規則，語法：@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檔案或樣式檔案中使用該語法(不使用現代框架)，有兩點需要注意：

引入位置：必須位于樣式檔案或<style>區塊的頭部，前面不可以出現其他css樣式，但可以在@charset 后面，
不能在條件嵌套語法中使用，

當使用vue等框架的時候，則可以在 @import 前出現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區塊，有多個屬性取值：

font-family：指定字體名字，被用于font或font-family屬性；
src：加載字體資源；
1. url()：加載字體資源檔案；
2. local()：加載本地電腦字體名稱，如 src: local("Arial");；
font-style：對src指定字體的描述；
font-variant
font-weight

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

如上，使用local加載當前電腦系統的字體名稱，

@charset

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

charset：指定使用的字符集，

@charset "UTF-8";

特點：

在樣式表檔案中使用，不能在html檔案的<style>區塊或元素內樣式屬性中使用，
必須出現在樣式表檔案的最前面，
使用有效的字符編碼和雙引號，并且中間只能間隔一個空格字符，且以分號結尾，
不能在條件嵌套語法中使用，
如果有多個@charset宣告，則只有第一個會生效，

瀏覽器決議樣式表檔案使用字符編碼的順序：

檔案的編碼格式；
http請求回應中的charset屬性值；
@charset；
link設定；
默認UTF-8；

@keyframes

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

animationname：影片名稱，作為影片參考時的識別符號；
keyframes-selector：關鍵幀的名稱選擇器，用于指定關鍵幀被用于影片程序中的哪個節點，一般是時間節點，有兩種取值方式：
1. 百分比：0% - 100%，時間百分比的節點
2. 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);
  }
}

如上，使用兩種方式定義的關鍵幀影片樣式，

特性說明：

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

為了獲得最佳影片體驗，應該始終定義開始和結束狀態，

@media

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

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

說明：

mediatype：媒體型別，描述設備類別，一般有 all、print、screen、speech，默認all：
- all：所有設備；
- print：列印預覽模式；
- screen：用于螢屏；
- speech：語音合成器；
媒體特性(media feature)：描述設備、環境的具體條件特征；必須使用括號括起來，常用的有：
- 寬高類：width、max-width、min-width、height、max-height、min-height等；
- 其他：color、grid、orientation、resolution、scan等；
邏輯運算子：and、not、only、，：
- and：多個規則組合，每條都滿足才行；
- not：否定某個查詢規則；
- only：整個查詢匹配時才滿足；
- 逗號，：將多個查詢組合，一條滿足即可，類似 or;

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

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

如上示例，即是我們經常使用的方式，

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

link和style中使用

在引入樣式表的 <link> 陳述句中，也可以使用媒體查詢，根據不同的條件加載不同的樣式檔案：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="https://www.cnblogs.com/jimojianghu/archive/2023/02/03/reset.css">

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="https://www.cnblogs.com/jimojianghu/archive/2023/02/03/reset.css">

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

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

JS檢測媒體查詢

使用Window.matchMedia() 和MediaQueryList.addListener() 方法來測驗和監控媒體狀態，
使用方式：

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

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

可以獲取當前是否已使用該媒體查詢規則，或者監聽媒體查詢狀態的變化事件，

非常用規則

以下是一些使用較少的@規則，

@supports

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

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

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

語法，由一組樣式宣告和一條支持條件構成，支持條件可以是多條，可以使用 and、or、not 等進行結合處理；還可以使用圓括號調整優先級，

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

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

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

其他

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542963.html

標籤：其他

上一篇：Web 頁面如何實作影片效果

下一篇：Web 頁面如何實作影片效果