CSS - @規則

在 CSS 中，@規則是特殊的指令或語句，以“@”符號開頭。它們用於控制或修改樣式表的行為，通常用於定義媒體查詢、匯入外部樣式表或指定字型等任務。

@規則是一種擴充套件和增強 CSS 功能的方法，使其超越基本的選擇器和屬性-值對。

一個 @規則以at (@)符號開頭，後面跟著一個識別符號，幷包括直到下一個分號 (;) 或下一個 CSS 塊的所有內容。

語法

/* General structure */
@identifier (RULE);

@規則的型別

常規

CSS 提供了不同的常規 @規則，基於識別符號，每個規則都有不同的語法。

@charset：指定外部樣式表的字元編碼。
@import：用於將外部 CSS 檔案匯入當前樣式表。
@namespace：用於在 CSS 樣式表中宣告和定義 XML 名稱空間。

巢狀

巢狀語句的一個子集，既可以作為獨立的樣式表語句，也可以作為條件組規則中的元件。

@media：如果裝置滿足使用媒體查詢定義的條件，則應用條件組規則的內容。
@supports：如果瀏覽器滿足給定的條件，則應用條件組規則的內容。
@page：定義列印頁面的佈局。
@font-face：定義要在網頁中使用的自定義字型。
@keyframes：定義 CSS 動畫序列中中間步驟的方面。
@counter-style：定義未預定義的不同自定義計數器樣式。
@font-feature-values：為在 OpenType 中啟用的功能定義 font-variant-alternates 中的通用名稱。它處理備用字形的用法，這些字形在@font-feature-values中定義。
@property：定義自定義屬性和變數的用法。
@layer：定義一個層並設定優先順序順序，當存在多個級聯層時。

CSS @規則 - @page 示例

這是一個@page用法的示例

<html>
<head>
<style>
   @page :first {
      margin-left: 80%;
      margin-top: 80%;
}

p {
   page-break-after: always;
}
</style>
</head>
<body>
   <p>Page One.</p>
   <p>Page Two.</p>
   <button>Print</button>

   <script>
      document.querySelector("button").addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS @規則 - @keyframes 示例

這是一個@keyframes用法的示例

<html>
<head>
<style>
   p {
      animation-duration: 3s;
      animation-name: slidein;
   }

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

      to {
         margin-left: 0%;
         width: 100%;
      }
   }
</style>
</head>
<body>
   <p>
      The text appears from right to left
      </p>
</body>
</html>

CSS @規則 - @property 示例

這是一個@property用法的示例

<html>
<head>
<style>
   @property --item-size {
      syntax: "<percentage>";
      inherits: true;
      initial-value: 40%;
   }

   .container {
      display: flex;
      height: 100px;
      border: 3px dotted black;

   /* set custom property values on parent */
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }

   /* use custom properties to set item size and background color */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }

   /* set custom property values on element itself */
   .second {
      --item-size: initial;
      --item-color: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="first item">First Item</div>
      <div class="second item">Second Item</div>      
   </div>

   <script>
      window.CSS.registerProperty({
      name: "--item-color",
      syntax: "<color>",
      inherits: false,
      initialValue: "peachpuff",
   });
   </script>
</body>
</html>

CSS @規則 - 規則列表

下表列出了所有 CSS @規則

@規則	示例
@charset	@charset "UTF-8";
@container	@container (width > 400px) { h1 {font-size: 2em;} }
@counter-style	@counter-style sample {}
@font-face	@font-face { font-family: "CustomFont"; src: url("customfont.woff2") format("woff2"); }
@font-feature-value	@font-feature-values "CustomFont" {@swash { fancy: 2; }}
@font-palette-values	@font-palette-values One { font-family: "Bungee Spice";}
@import	@import ur();
@keyframes	@keyframes sample-slide { from { transform: translateY(100%) } }
@layer	@layer sample-layer{ .margin-lg { margin: 5px; } }
@media	@media screen and (max-width: 600px) {}
@namespace	@namespace svg url();
@page	@page { size: 5in 6in; margin-left: 4in }
@property	@property sample-property { rules }
@supports	@supports (transform-origin: 10% 10%) {}

列印頁面