Articles
CSS 簡介
CSS `@` 規則

CSS `@` 規則

本文說明了 CSS 的 @ 規則。

您可以學習如何使用和編寫像 @import 和 @media 這樣的 @ 規則。

YouTube Video

預覽的HTML

css-at-rule.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

CSS @ 規則

CSS @ 規則（at-rules）是用於控制樣式表行為和應用條件的特殊指令。與普通的 CSS 屬性不同，@ 規則有條件地應用樣式或導入外部資源。典型的 @ 規則包括 @media、@import 和 @keyframes 等。

典型 @ 規則的类型

@import 

1@import url('styles.css');

@import 用於將其他 CSS 文件導入當前的樣式表。這允許輕鬆重用外部 CSS 文件。

要點：

  • @import 必須寫在樣式表的開頭。
  • 由於其對效能的影響，大型項目中應避免使用。

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media 使用媒體查詢根據特定條件（如螢幕寬度、解析度等）應用樣式。它經常用於實現響應式設計。

常用條件

以下是媒體查詢中常用的條件。

基於寬度的條件 
 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}
  • 最小寬度 (min-width) 當寬度等於或大於指定值時應用樣式。
  • 最大寬度 (max-width) 當寬度等於或小於指定值時應用樣式。
設備方向 (orientation) 
 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}
  • 設備方向 (orientation) 可設定為 縱向 或 橫向。
解析度 (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • 可根據 解析度 (resolution) 應用樣式。
  • 在此範例中，為高解析度顯示器指定了高解析度的背景圖片。

結合條件

媒體查詢也可以結合多個條件。

AND 條件 (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • 當所有條件都滿足時，AND 條件會應用樣式。
  • 在此範例中，當螢幕寬度為 600px 或以上且為縱向方向時，body 的背景顏色將設定為淺綠色。
OR 條件 (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • 當任何一個條件滿足時，OR 條件會應用樣式。
  • 在此範例中，當螢幕寬度為 400px 或以下，或者為橫向方向時，body 的文字顏色將設定為灰色。
NOT 條件 (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • 當條件不滿足時，NOT 條件會應用樣式。
  • 在此範例中，對於所有設備，當螢幕寬度不是 600px 或以上時，body 的字型大小將設定為 14px。

@font-face 

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face 用於定義網頁字體。通過這個規則，可以下載外部字體並應用到網頁上。

  • 可以使用自定義字體，而不是依賴標準字體。
  • 需要注意字體文件的大小。

@keyframes 

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes 用於創建 CSS 動畫。可以在動畫的每個步驟中指定樣式。

  • 它允許對動畫進行詳細控制。
  • 它與 animation 屬性結合使用。

@supports 

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports 檢查瀏覽器是否支持特定的 CSS 功能並根據結果應用樣式。

  • 它有助於維持舊版和新版瀏覽器之間的兼容性。
  • 可以通過功能檢測應用降級處理。

@page 

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page 用於控制列印時的樣式。這對設置頁面尺寸和邊距很有用。

要點：

  • 它用於設定列印媒體的樣式。
  • 您還可以自訂特定頁面元素的樣式，例如標題和頁尾。

@charset 

1@charset "UTF-8";

@charset指定CSS文件的字符編碼。主要指定為UTF-8。

  • 必須在樣式表的開頭指定。
  • 這特別用於多語言網站。

@layer

@layer是一個新的@規則，用於組織CSS樣式表的優先級，允許通過圖層對多個CSS規則進行分組和管理。此規則在大型樣式表或涉及多個外部樣式表的項目中特別有用，可以更輕鬆地避免CSS衝突。

在CSS樣式表中，優先級通常由'層疊'決定，但通過使用@layer，您可以更靈活和明確地控制樣式的優先級。

基本語法 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • 使用@layer定義樣式時，語法如下。
 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}
  • 例如，您可以這樣在不同層中定義樣式：
  • 在此情況下，分別定義了reset層、base層和theme層，最終的h1樣式由theme層的內容決定，結果應用為color: red;。

多层的优先级

@layer的強大功能在於它允許管理圖層之間樣式的優先級。在上面的示例中，因為theme層是最後定義的，所以它覆蓋了其他圖層中定義的樣式。

此外，@layer可以用於管理外部樣式表或從其他庫加載的CSS文件中的優先順序層疊。

全局優先級 
 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}
  • 在CSS層疊中，圖層的順序具有優先性，後定義的樣式具有更高的優先級。例如，您可以通過如下方式明確指定圖層的順序。
  • 這確保樣式按照 theme、base 和 reset 的順序應用，即使 theme 層是首先定義的。

結合 @import 與 @layer 使用 

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);
  • 通過結合使用@import和@layer，還可以管理外部樣式表中的圖層。
  • 這允許將外部樣式表放置在不同的圖層中，從而管理其優先順序。

@layer 的要點

@layer是CSS樣式管理中的一個強大工具，提供了一種方便的方法來避免大型項目中的樣式衝突。在處理多個樣式來源時，它在簡潔地管理樣式優先級方面特別值得注意。請記住以下幾點。

  • 通過按圖層分隔樣式，可以控制層疊的優先級。
  • 通過將其與@import一起使用，可以將外部CSS文件包含到圖層管理中。
  • 定義多個層可以防止樣式衝突。

這可以將樣式衝突降到最低，並且即使在需要複雜樣式管理的項目中也能實現高效設計。

使用 @layer 的範例

在使用 @layer 時，可以考慮層命名規範、匯入順序，以及適合於專案規模的層數等要點。

層命名

層的名稱是根據專案的結構和目的來確定的。層命名的常見範例包括以下內容：。

1@layer base, layout, components, utilities;
  • base：一個定義基本樣式（如重置和排版）的層。
  • layout：一個定義頁面佈局和網格系統樣式的層。
  • components：一個定義可重複使用的 UI 元件（如按鈕和卡片）樣式的層。
  • utilities：一個定義工具類別樣式（如 margin、padding、text-center）的層。
清晰的匯入順序 
1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);
  • 處理多個 CSS 檔案時，使用 @import 設定清晰的順序非常重要。此順序確保了預期的優先級得以維持。
層的合併與簡化 
 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}
  • 在小規模專案中，限制層數可以減少複雜性。

總結

CSS 的 @ 規則是強大的工具，可以在網頁設計中支持靈活的樣式應用並提升性能。@media、@keyframes 和 @supports 使得樣式設計更容易考慮設備差異和瀏覽器相容性。此外，@import 和 @font-face 使外部資源的引入更加高效，實現更豐富的表現。

理解並正確使用這些 @ 規則可以實現更高效的 CSS 編碼。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

CSS 偽類和偽元素字體相關的CSS屬性