Các quy tắc CSS `@`

Articles

Các quy tắc CSS `@`

Bài viết này giải thích các quy tắc @ của CSS.

Bạn có thể tìm hiểu về cách sử dụng và cách viết các quy tắc @ như @import và @media.

YouTube Video

HTML để Xem trước

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>

Các quy tắc CSS `@`

Các quy tắc @ của CSS (at-rules) là các hướng dẫn đặc biệt được sử dụng để điều khiển hành vi và điều kiện áp dụng của các bảng kiểu. Khác với các thuộc tính CSS thông thường, các quy tắc @ áp dụng kiểu dáng hoặc nhập tài nguyên bên ngoài theo điều kiện. Các quy tắc @ tiêu biểu bao gồm @media, @import và @keyframes, cùng với một số quy tắc khác.

Các loại quy tắc `@` tiêu biểu

`@import`

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

@import được sử dụng để nhập các tệp CSS khác vào bảng kiểu hiện tại. Điều này cho phép tái sử dụng dễ dàng các tệp CSS bên ngoài.

Điểm chú ý:

@import phải được viết ở đầu bảng kiểu.
Nên tránh sử dụng trong các dự án lớn do ảnh hưởng tới hiệu suất.

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

@media sử dụng các truy vấn phương tiện để áp dụng kiểu dáng dựa trên các điều kiện cụ thể (như chiều rộng màn hình, độ phân giải, v.v.). Nó thường được sử dụng trong việc triển khai thiết kế đáp ứng.

Các Điều kiện Thường xuyên Sử dụng

Dưới đây là các điều kiện thường được sử dụng trong các truy vấn phương tiện.

Các điều kiện dựa trên chiều rộng

 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}

Chiều rộng tối thiểu (min-width) áp dụng các kiểu khi chiều rộng bằng hoặc lớn hơn giá trị được chỉ định.
Chiều rộng tối đa (max-width) áp dụng các kiểu khi chiều rộng bằng hoặc nhỏ hơn giá trị được chỉ định.

Định hướng thiết bị (`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}

Định hướng thiết bị (orientation) có thể được đặt là dọc (portrait) hoặc ngang (landscape).

Độ phân giải (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

Các kiểu có thể được áp dụng dựa trên độ phân giải (resolution).
Trong ví dụ này, một hình nền độ phân giải cao được chỉ định cho các màn hình có độ phân giải cao.

Kết hợp các điều kiện

Các truy vấn phương tiện cũng có thể kết hợp nhiều điều kiện.

Điều kiện AND (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

Điều kiện AND áp dụng các kiểu khi tất cả các điều kiện đều được thỏa mãn.
Trong ví dụ này, khi chiều rộng màn hình là 600px hoặc lớn hơn và trong chế độ dọc, màu nền của body được đặt thành màu xanh lá nhạt.

Điều kiện OR (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

Điều kiện OR áp dụng các kiểu khi bất kỳ điều kiện nào được thỏa mãn.
Trong ví dụ này, khi chiều rộng màn hình là 400px hoặc nhỏ hơn, hoặc ở chế độ ngang, màu chữ của body được đặt là màu xám.

Điều kiện NOT (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

Điều kiện NOT áp dụng các kiểu khi điều kiện không được thỏa mãn.
Trong ví dụ này, đối với tất cả các thiết bị, khi chiều rộng màn hình không phải là 600px hoặc lớn hơn, kích thước phông chữ của body được đặt thành 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 được sử dụng để định nghĩa phông chữ web. Với quy tắc này, phông chữ bên ngoài có thể được tải xuống và áp dụng trên một trang web.

Phông chữ tùy chỉnh có thể được sử dụng thay vì phụ thuộc vào các phông chữ tiêu chuẩn.
Cần chú ý đến kích thước tệp phông chữ.

`@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 được sử dụng để tạo hoạt ảnh CSS. Các kiểu dáng có thể được chỉ định ở từng bước của một hoạt ảnh.

Nó cho phép kiểm soát chi tiết hoạt ảnh.
Nó được sử dụng cùng với thuộc tính animation.

`@supports`

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

@supports kiểm tra xem trình duyệt có hỗ trợ các tính năng CSS nhất định hay không và áp dụng kiểu dáng dựa trên kết quả.

Nó giúp duy trì khả năng tương thích giữa các trình duyệt cũ và mới.
Các phương án dự phòng có thể được áp dụng thông qua kiểm tra tính năng.

`@page`

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

@page được sử dụng để kiểm soát kiểu dáng khi in ấn. Nó hữu ích để thiết lập kích thước trang và lề.

Điểm chú ý:

Nó được sử dụng để thiết lập kiểu dáng cho phương tiện in ấn.
Bạn cũng có thể tùy chỉnh kiểu dáng của các phần tử trang cụ thể như tiêu đề và chân trang.

`@charset`

1@charset "UTF-8";

@charset chỉ định mã hóa ký tự của tệp CSS. UTF-8 chủ yếu được chỉ định.

Nó phải được khai báo ở đầu trang kiểu (style sheet).
Đặc biệt được sử dụng cho các trang web đa ngôn ngữ.

`@layer`

@layer là một quy tắc @ mới, được sử dụng để tổ chức mức độ ưu tiên của các trang kiểu trong CSS, cho phép nhóm và quản lý nhiều quy tắc CSS theo lớp. Quy tắc này đặc biệt hữu ích trong các trang kiểu lớn hoặc dự án có nhiều tệp CSS bên ngoài để dễ dàng tránh xung đột CSS.

Trong các trang kiểu CSS, mức độ ưu tiên thường được xác định bởi 'cascade', nhưng khi sử dụng @layer, bạn có thể kiểm soát mức độ ưu tiên của kiểu linh hoạt và rõ ràng hơn.

Cú pháp Cơ bản

1@layer <layer-name> {
2  /* Styles within this layer */
3}

Khi định nghĩa các kiểu bằng cách sử dụng @layer, cú pháp sẽ như sau.

 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}

Ví dụ, bạn có thể định nghĩa kiểu dáng trong các lớp khác nhau như thế này:
Trong trường hợp này, lớp reset, lớp base và lớp theme được định nghĩa lần lượt, và kiểu cuối cùng của h1 được xác định bởi nội dung của lớp theme, dẫn đến việc áp dụng color: red;.

Ưu tiên của nhiều lớp

Tính năng mạnh mẽ của @layer là nó cho phép quản lý mức độ ưu tiên của các kiểu giữa các lớp. Trong ví dụ trên, vì lớp theme được định nghĩa cuối cùng, nên nó sẽ ghi đè lên các kiểu đã được định nghĩa ở các lớp khác.

Ngoài ra, @layer có thể được sử dụng để quản lý chuỗi ưu tiên trong các trang kiểu bên ngoài hoặc các tệp CSS tải từ thư viện khác.

Thứ tự ưu tiên toàn cầu

 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}

Thứ tự của các lớp được ưu tiên trong chuỗi CSS cascade, các kiểu được định nghĩa sau sẽ có mức độ ưu tiên cao hơn. Ví dụ, bạn có thể chỉ định thứ tự của các lớp một cách rõ ràng bằng cách viết chúng như sau.
Điều này đảm bảo rằng các kiểu được áp dụng theo thứ tự theme, base, và reset, ngay cả khi lớp theme được định nghĩa trước.

Sử dụng `@import` với `@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);

Bằng cách kết hợp @import và @layer, bạn cũng có thể quản lý các lớp trong các trang kiểu bên ngoài.
Điều này cho phép các tệp CSS bên ngoài được đặt vào các lớp khác nhau, quản lý mức độ ưu tiên của chúng.

Các điểm chính của `@layer`

@layer là một công cụ mạnh mẽ trong quản lý kiểu dáng CSS, cung cấp một phương pháp tiện lợi để tránh xung đột kiểu dáng trong các dự án lớn. Nó đặc biệt đáng chú ý khi quản lý mức độ ưu tiên của kiểu một cách súc tích khi làm việc với nhiều nguồn kiểu dáng. Sẽ tốt nếu bạn ghi nhớ các điểm sau.

Bằng cách tách các kiểu theo lớp, bạn có thể kiểm soát mức độ ưu tiên của chuỗi cascade.
Bằng cách sử dụng cùng với @import, bạn có thể đưa các tệp CSS bên ngoài vào quản lý lớp.
Định nghĩa nhiều lớp có thể ngăn chặn xung đột kiểu dáng.

Điều này giảm thiểu xung đột kiểu dáng và cho phép thiết kế hiệu quả ngay cả trong các dự án yêu cầu quản lý kiểu dáng phức tạp.

Các ví dụ về cách sử dụng `@layer`

Khi sử dụng @layer, bạn có thể cân nhắc các điểm như quy ước đặt tên lớp, thứ tự nhập khẩu, và số lượng lớp phù hợp với quy mô của dự án.

Đặt tên lớp

Tên lớp được xác định dựa trên cấu trúc và mục đích của dự án. Các ví dụ phổ biến về cách đặt tên lớp bao gồm những điều sau:.

1@layer base, layout, components, utilities;

base: Một lớp định nghĩa các phong cách cơ bản như đặt lại các kiểu và kiểu chữ.
layout: Một lớp định nghĩa các phong cách cho bố cục trang và hệ thống lưới.
components: Một lớp định nghĩa các phong cách cho các thành phần giao diện người dùng tái sử dụng như nút và thẻ.
utilities: Một lớp định nghĩa các phong cách cho các lớp công cụ (ví dụ: margin, padding, text-center).

Thứ tự nhập khẩu rõ ràng

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);

Khi xử lý nhiều tệp CSS, việc thiết lập một thứ tự rõ ràng bằng cách sử dụng @import là rất quan trọng. Thứ tự này đảm bảo rằng độ ưu tiên dự kiến được duy trì.

Củng cố và đơn giản hóa các lớp

 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}

Trong các dự án quy mô nhỏ, giới hạn số lượng lớp có thể giảm bớt sự phức tạp.

Tóm tắt

Các quy tắc CSS @ là công cụ mạnh mẽ hỗ trợ ứng dụng kiểu dáng linh hoạt và cải thiện hiệu suất trong thiết kế web. @media, @keyframes, và @supports giúp dễ dàng định kiểu dựa trên sự khác biệt về thiết bị và tương thích trình duyệt. Thêm vào đó, @import và @font-face cho phép tích hợp hiệu quả các tài nguyên bên ngoài để diễn đạt phong phú hơn.

Hiểu biết và sử dụng đúng các quy tắc @ này giúp mã hóa CSS hiệu quả hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Lớp Giả và Giả Phần Tử trong CSS

Các quy tắc CSS `@`

YouTube Video

HTML để Xem trước

Các quy tắc CSS @

Các loại quy tắc @ tiêu biểu

@import

Điểm chú ý:

@media

Các Điều kiện Thường xuyên Sử dụng

Các điều kiện dựa trên chiều rộng

Định hướng thiết bị (orientation)

Độ phân giải (resolution)

Kết hợp các điều kiện

Điều kiện AND (and)

Điều kiện OR (,)

Điều kiện NOT (not)

@font-face

@keyframes

@supports

@page

Điểm chú ý:

@charset

@layer

Cú pháp Cơ bản

Ưu tiên của nhiều lớp

Thứ tự ưu tiên toàn cầu

Sử dụng @import với @layer

Các điểm chính của @layer

Các ví dụ về cách sử dụng @layer

Đặt tên lớp

Thứ tự nhập khẩu rõ ràng

Củng cố và đơn giản hóa các lớp

Tóm tắt

YouTube Video

Các quy tắc CSS `@`

Các loại quy tắc `@` tiêu biểu

`@import`

`@media`

Định hướng thiết bị (`orientation`)

Độ phân giải (`resolution`)

Điều kiện AND (`and`)

Điều kiện OR (`,`)

Điều kiện NOT (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Sử dụng `@import` với `@layer`

Các điểm chính của `@layer`

Các ví dụ về cách sử dụng `@layer`