CSS @ 覺則：初学者的全面指南

您好，有抱負的網頁開發者們！今天，我們將深入探討 CSS @ 覺則的迷人世界。別擔心，如果您之前從未聽過它們——在本教程結束時，您將能像專家一樣運用這些強大的工具！

CSS - @ Rules

CSS @ 覺則是什麼？

在我們開始之前，讓我們從基礎入手。CSS @ 覺則（發音為 "at-rules"）是特殊的指示，賦予 CSS 超能力。它們讓我們能夠定義我們的樣式在不同情況下的行為，創建動畫，甚至定義自定義屬性。把它們當作讓您的網頁真正動態和引人入勝的秘密調味料！

@ 覺則的語法非常直接。它們總是以 '@' 符號開頭，接著是一個標識符（規則名），然後是一個聲明塊或一個分號。這裡是一般的結構：

@rule-name {
/* 覺則內容 */
}

或者對於一些不需要塊的規則：

@rule-name value;

簡單吧？現在，讓我們探索一些最常見且有用的 @ 覺則！

CSS 中有相當多的 @ 覺則，每個都有其特殊用途。這裡是一個總結一些最重要的覺則的表格：

現在，讓我們深入探索一些這些規則的範例！

@page 覺則在處理打印佈局時特別有用。它讓您定義打印頁面的尺寸、邊距和其他屬性。

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

在這個範例中，我們將所有頁面設為 A4 尺寸，並有 1cm 的邊距。然後，我們給第一頁一個特殊的 2cm 頂部邊距。想像一下，如果您正在創建一份美麗的履歷——這個規則確保它在紙張上看起來與在螢幕上同樣出色！

現在，讓我們添加一些閃耀的動畫效果！@keyframes 覺則是創建有平滑、引人注目的動畫的通行證。

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: bounce 1s infinite;
}

這段代碼創建了一個簡單的彈跳動畫。按鈕會向上移動 20 像素，然後再回到原位，無限重複。這就像給您的按鈕一個微小的彈跳床！

要使用這個動畫，您會像這樣應用它到一個元素：

<button class="bouncy-button">點我！</button>

@property 覺則是 CSS 中的新增加，讓您定義和使用自定義屬性（也稱為 CSS 變量）具有特定的類型、繼承行為和初始值。

@property --main-color {
syntax: '<color>';
inherits: false;
initial-value: #ff0000;
}

.my-element {
background-color: var(--main-color);
}

在這個範例中，我們定義了一個名為 --main-color 的自定義屬性。它被設置為顏色值，不從父元素繼承，並具有初始的紅色值。這給我們在工作時提供了更多控制和靈活性。

雖然我們已經涵蓋了一些最常見的 @ 覺則，但還有許多其他覺則等待探索。這裡是一個更全面的列表：

@ 覺則	描述
@charset	指定樣式表的字符編碼
@import	從其他 CSS 文件引入樣式
@namespace	宣告一個命名空間前綴
@media	根據設備特性應用樣式
@supports	根據瀏覽器功能支持應用樣式
@document	根據文件特性應用樣式（已棄用）
@font-face	允許使用自定義字體
@keyframes	定義動畫序列
@viewport	控制視口特性（大多被 meta viewport 標籤取代）
@page	定義頁面特定的打印規則
@counter-style	定義計數器樣式
@font-feature-values	定義 OpenType 字體特徵的命名值
@property	定義自定義 CSS 屬性

每個覺則都為樣式化和控制您的網頁打開了新的可能性。隨著您在 CSS 上的旅程繼續，您會發現自己越來越常使用這些強大的工具。

記住，精通 CSS @ 覺則的關鍵是練習。不要害怕嘗試和嘗試不同的組合。誰知道呢？您可能會創造下一個大的網頁設計趨勢！

快樂編程，願您的樣式表總是無蟲害！

Credits: Image by storyset