Articles
Pengenalan kepada CSS
Peraturan CSS `@`

Peraturan CSS `@`

Artikel ini menerangkan peraturan @ dalam CSS.

Anda boleh belajar cara menggunakan dan menulis peraturan @ seperti @import dan @media.

YouTube Video

HTML untuk Pratonton

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>

Peraturan CSS @

Peraturan @ dalam CSS (at-rules) adalah arahan khas yang digunakan untuk mengawal kelakuan dan syarat aplikasi helaian gaya. Tidak seperti sifat CSS biasa, peraturan @ digunakan secara bersyarat untuk menggunakan gaya atau mengimport sumber luaran. Peraturan @ yang biasa termasuk @media, @import, dan @keyframes, antara lain.

Jenis Peraturan @ Contoh

@import 

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

@import digunakan untuk mengimport fail CSS lain ke dalam helaian gaya semasa. Ini membolehkan penggunaan semula fail CSS luaran dengan mudah.

Titik-titik:

  • @import mesti ditulis pada permulaan helaian gaya.
  • Ia perlu dielakkan dalam projek besar kerana kesannya kepada prestasi.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media menggunakan kueri media untuk menggunakan gaya berdasarkan syarat tertentu (seperti lebar skrin, resolusi, dll.). Ia sering digunakan dalam melaksanakan reka bentuk responsif.

Syarat yang Biasa Digunakan

Berikut adalah keadaan biasa yang sering digunakan dalam pertanyaan media.

Keadaan Berdasarkan Lebar 
 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}
  • Lebar minimum (min-width) menerapkan gaya apabila lebar adalah sama atau lebih besar daripada nilai yang ditentukan.
  • Lebar maksimum (max-width) menerapkan gaya apabila lebar adalah sama atau kurang daripada nilai yang ditentukan.
Orientasi Peranti (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}
  • Orientasi peranti (orientation) boleh ditetapkan kepada potret atau landskap.
Resolusi (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Gaya boleh diterapkan berdasarkan resolusi (resolution).
  • Dalam contoh ini, imej latar belakang resolusi tinggi ditentukan untuk paparan resolusi tinggi.

Menggabungkan Keadaan

Pertanyaan media juga boleh menggabungkan pelbagai keadaan.

Keadaan AND (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • Keadaan AND menerapkan gaya apabila semua keadaan dipenuhi.
  • Dalam contoh ini, apabila lebar skrin adalah 600px atau lebih besar dan dalam orientasi potret, warna latar belakang body ditetapkan kepada hijau muda.
Keadaan OR (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • Keadaan OR menerapkan gaya apabila mana-mana keadaan dipenuhi.
  • Dalam contoh ini, apabila lebar skrin adalah 400px atau kurang, atau dalam orientasi landskap, warna teks body ditetapkan kepada kelabu.
Keadaan NOT (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • Keadaan NOT menerapkan gaya apabila keadaan tidak dipenuhi.
  • Dalam contoh ini, untuk semua peranti, apabila lebar skrin tidak 600px atau lebih besar, saiz fon body ditetapkan kepada 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 digunakan untuk mentakrifkan fon web. Dengan peraturan ini, fon luaran boleh dimuat turun dan diterapkan ke halaman web.

  • Fon khusus boleh digunakan menggantikan penggunaan fon standard.
  • Perhatian pada saiz fail fon adalah penting.

@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 digunakan untuk mencipta animasi CSS. Gaya boleh ditentukan pada setiap langkah animasi.

  • Ia membolehkan kawalan terperinci pada animasi.
  • Ia digunakan bersama dengan sifat animation.

@supports 

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

@supports memeriksa sama ada ciri CSS tertentu disokong oleh pelayar dan menggunakan gaya berdasarkan hasilnya.

  • Ia membantu mengekalkan keserasian antara pelayar lama dan baru.
  • Fallback boleh diterapkan melalui pengesanan ciri.

@page 

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

@page digunakan untuk mengawal gaya untuk cetakan. Ia berguna untuk menetapkan saiz halaman dan margin.

Titik-titik:

  • Ia digunakan untuk menetapkan gaya untuk media cetak.
  • Anda juga boleh menyesuaikan gaya elemen halaman tertentu seperti pengepala dan pengaki.

@charset 

1@charset "UTF-8";

@charset menetapkan pengekodan aksara bagi fail CSS. UTF-8 kebiasaannya ditetapkan.

  • Ia mesti ditetapkan di permulaan helaian gaya.
  • Ia terutamanya digunakan untuk laman web berbilang bahasa.

@layer

@layer ialah peraturan @ baharu yang digunakan untuk mengatur keutamaan helaian gaya dalam CSS, membolehkan pelbagai peraturan CSS dikumpulkan dan diuruskan mengikut lapisan. Peraturan ini sangat berguna untuk helaian gaya besar atau projek yang melibatkan pelbagai helaian gaya luaran bagi memudahkan mengelak konflik CSS.

Dalam helaian gaya CSS, keutamaan biasanya ditentukan oleh 'cascade', tetapi dengan menggunakan @layer, anda boleh mengawal keutamaan gaya dengan lebih fleksibel dan jelas.

Sintaks Asas 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • Apabila menentukan gaya menggunakan @layer, sintaksnya adalah seperti berikut.
 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}
  • Sebagai contoh, anda boleh mendefinisikan gaya dalam lapisan yang berbeza seperti ini:
  • Dalam kes ini, lapisan reset, lapisan base, dan lapisan theme ditentukan masing-masing, dan gaya akhir h1 ditentukan oleh kandungan lapisan theme, menghasilkan color: red; digunakan.

Keutamaan pelbagai lapisan

Ciri kuat @layer ialah ia membolehkan pengurusan keutamaan gaya antara lapisan. Dalam contoh di atas, kerana lapisan theme ditentukan terakhir, ia menulis semula gaya yang ditentukan dalam lapisan lain.

Selain itu, @layer boleh digunakan untuk menguruskan keutamaan cascade dalam helaian gaya luaran atau fail CSS yang dimuatkan daripada perpustakaan lain.

Keutamaan global 
 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}
  • Susunan lapisan diberi keutamaan dalam cascade CSS, dengan gaya yang ditentukan kemudiannya mengambil keutamaan. Sebagai contoh, anda boleh dengan jelas menentukan susunan lapisan dengan menuliskannya seperti ini.
  • Ini memastikan bahawa gaya diterapkan mengikut urutan tema, asas, dan reset, walaupun lapisan tema ditentukan terlebih dahulu.

Menggunakan @import dengan @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);
  • Dengan menggabungkan @import dan @layer, adalah mungkin untuk menguruskan lapisan dalam helaian gaya luaran.
  • Ini membolehkan helaian gaya luaran diletakkan dalam lapisan yang berbeza, menguruskan keutamaannya.

Titik utama @layer

@layer ialah alat yang berkuasa dalam pengurusan gaya CSS, menyediakan kaedah yang mudah untuk mengelak konflik gaya dalam projek besar. Ia sangat ketara untuk menguruskan keutamaan gaya secara ringkas apabila berhadapan dengan pelbagai sumber gaya. Adalah baik untuk mengingati perkara berikut.

  • Dengan memisahkan gaya mengikut lapisan, anda boleh mengawal keutamaan cascade.
  • Dengan menggunakannya bersama @import, anda boleh memasukkan fail CSS luaran dalam pengurusan lapisan.
  • Mentakrifkan pelbagai lapisan dapat mengelakkan konflik gaya.

Ini meminimumkan perlanggaran gaya dan membolehkan reka bentuk yang cekap walaupun dalam projek yang memerlukan pengurusan gaya yang kompleks.

Contoh penggunaan @layer

Apabila menggunakan @layer, anda boleh mempertimbangkan perkara seperti konvensyen penamaan lapisan, urutan import, dan bilangan lapisan yang sesuai dengan skala projek.

Penamaan Lapisan

Nama lapisan ditentukan berdasarkan struktur dan tujuan projek. Contoh biasa penamaan lapisan termasuk yang berikut:.

1@layer base, layout, components, utilities;
  • base: Lapisan yang mentakrifkan gaya asas seperti tetapan semula dan tipografi.
  • layout: Lapisan yang mentakrifkan gaya untuk susun atur halaman dan sistem grid.
  • components: Lapisan yang mentakrifkan gaya untuk komponen UI yang boleh digunakan semula seperti butang dan kad.
  • utilities: Lapisan yang mentakrifkan gaya untuk kelas utiliti (contohnya, margin, padding, text-center).
Urutan Import yang Jelas 
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);
  • Apabila menangani fail CSS yang banyak, adalah penting untuk menetapkan urutan yang jelas menggunakan @import. Urutan ini memastikan keutamaan yang dimaksudkan dikekalkan.
Penggabungan dan Penyederhanaan Lapisan 
 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}
  • Dalam projek berskala kecil, mengehadkan bilangan lapisan boleh mengurangkan kerumitan.

Ringkasan

Peraturan CSS @ adalah alat yang kuat yang menyokong aplikasi gaya yang fleksibel dan peningkatan prestasi dalam reka bentuk web. @media, @keyframes, dan @supports memudahkan penggayaan dengan mengambil kira perbezaan peranti dan keserasian pelayar. Selain itu, @import dan @font-face membolehkan penggabungan sumber luaran yang cekap untuk ekspresi yang lebih kaya.

Memahami dan menggunakan peraturan @ ini dengan betul membolehkan pengekodan CSS yang lebih berkesan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Kelas Pseudo dan Elemen Pseudo CSS