Articles
Pengenalan kepada CSS
Asas CSS

Asas CSS

Artikel ini menerangkan asas-asas CSS.

Anda boleh mempelajari tentang penyeleksi CSS, penggabung, dan kekhususan.

YouTube Video

HTML/CSS untuk Pratonton

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.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 Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

Sintaks Asas 

1selector {
2    property: value;
3}

Struktur asas CSS terdiri daripada selector, property, dan value. Setiap pasangan sifat dan nilai diakhiri dengan tanda titik koma.

  • selector menentukan elemen HTML yang mana gaya tersebut dikenakan. Dalam contoh ini, gaya diterapkan pada semua elemen <header>.
  • property menentukan sifat gaya yang hendak diubah, seperti warna atau saiz fon. Padding dan color adalah ciri dalam contoh ini.
  • value adalah nilai yang diberikan kepada sifat. Sebagai contoh, untuk warna, ia boleh menjadi white atau #9cf, dan untuk saiz margin, ia boleh menjadi 20px.

Pemilih

CSS selectors adalah corak untuk memilih elemen HTML. Dengan menggunakan selector, anda boleh mengenakan gaya pada elemen tertentu atau kumpulan elemen.

Pemilih Sejagat 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * adalah universal selector yang dikenakan kepada semua elemen.
  • Dalam contoh ini, fon untuk semua elemen telah diubah.

Pemilih Elemen 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Penyeleksi elemen ialah penyeleksi yang diterapkan pada tag HTML tertentu dengan menulis nama tag HTML tersebut.
  • Dalam contoh ini, warna teks elemen <strong> diubah menjadi merah.

Pemilih ID 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # adalah ID selector yang digunakan untuk memilih elemen mengikut ID.
  • ID adalah unik, jadi hanya boleh ada satu elemen dengan ID yang sama pada satu halaman.

Pemilih Kelas 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . adalah class selector yang digunakan untuk memilih elemen mengikut kelas.
  • Tambah atribut kelas pada elemen HTML untuk menerapkan gaya kepada elemen yang termasuk dalam kelas tersebut.

Pemilih Atribut 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] adalah penyeleksi atribut yang memilih elemen dengan atribut tertentu.
  • Dalam contoh ini, teks elemen <a> dengan nilai atribut href index.html ditetapkan kepada tebal.

Penggabung

Penggabung digunakan untuk menggabungkan beberapa penyeleksi bagi memilih elemen yang mempunyai hubungan tertentu. Walaupun penyeleksi memilih elemen secara individu, penggabung berperanan mendefinisikan hubungan struktur antara elemen.

Penggabung keturunan 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Penggabung keturunan menerapkan gaya kepada semua elemen tertentu dalam satu elemen tertentu.
  • Dalam contoh ini, garis bawah diterapkan pada elemen <strong> dalam elemen <span>.

Penggabung anak 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Tanda > antara span dan em digunakan sebagai penggabung anak. Dalam contoh ini, gaya hanya diterapkan pada elemen <em> yang merupakan anak langsung kepada elemen <span>. Dalam contoh baris ketiga, kerana terdapat tag <s> antara tag <span> dan <em>, gaya tidak diterapkan.

Penggabung saudara bersebelahan 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Adjacent sibling combinator yang menggunakan tanda + mengenakan gaya kepada elemen saudara yang muncul tepat selepas elemen tertentu.
  • Dalam contoh ini, warna teks menjadi hijau hanya jika tag <b> muncul segera selepas tag <br>.

Penggabung saudara umum 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • General sibling combinator yang menggunakan tanda ~ memilih semua elemen saudara yang muncul selepas elemen tertentu.
  • Dalam contoh ini, warna teks bagi semua tag <b> yang muncul selepas tag <br> akan berwarna biru.

Kelas Pseudo 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : digunakan untuk memilih pseudo-class.
  • Butiran tentang pseudo-kelas akan diterangkan dalam artikel lain.

Pseudo-elemen 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: digunakan untuk memilih pseudo-elemen.
  • Butiran tentang pseudo-elemen juga akan diterangkan dalam artikel lain.

Kekhususan CSS

Keutamaan dalam CSS adalah penting untuk memahami bagaimana CSS berfungsi dan mencegah aplikasi gaya yang tidak dijangka. Keutamaan CSS menentukan peraturan mana yang paling kuat apabila beberapa peraturan CSS diterapkan pada elemen yang sama. Keutamaan CSS terutama ditentukan oleh faktor-faktor berikut.

  1. Gaya sebaris: Gaya yang ditulis terus dalam HTML
  2. Pengseleksi ID ：#id
  3. Kelas, Pengseleksi Atribut, Pseudo-kelas ：.class, [attribute=value], :hover, etc
  4. Pemilih Elemen ：div, h1, p, etc
  5. Pemilih Sejagat ：*

Semakin tinggi dalam senarai, semakin tinggi keutamaan, dan semakin rendah, semakin rendah keutamaan.

Cara Mengira Kekhususan

Keutamaan CSS dikira dengan mengukur 'berat' setiap pemilih. Berat setiap pemilih diwakili seperti berikut.

  1. Gaya sebaris: Gaya sebaris adalah paling kuat dan sentiasa diutamakan.
  2. Pemilih ID: Satu pemilih ID bersamaan dengan '100 mata'.
  3. Pemilih kelas, atribut, pseudo-class: Ini bersamaan dengan '10 mata'.
  4. Pemilih elemen, pseudo-elemen: Ini bersamaan dengan '1 mata'.

Peraturan dengan skor tertinggi akan diterapkan.

Contoh: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

Di sini, tag <h1> mempunyai tiga gaya berbeza yang diterapkan:

  • Pemilih elemen h1 (1 mata)
  • Pemilih kelas .header (10 mata)
  • Pemilih ID #header (100 mata)

Dalam kes ini, kerana pemilih ID mempunyai keutamaan tertinggi, warna: biru diterapkan.

Mengatasi keutamaan dengan !important

Gunakan !penting jika anda mahu memaksa gaya dan mengabaikan keutamaan biasa. !important mempunyai pengaruh paling kuat ke atas semua peraturan, mengatasi segala yang lain.

Contoh: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • Di sini, color: red !important; ditentukan, oleh itu color: red menjadi keutamaan.

Pewarisan dan Keutamaan

CSS mempunyai keupayaan untuk mewarisi gaya dari elemen induk ke elemen anak. Sebagai contoh, sifat seperti warna dan font-keluarga diwarisi secara lalai. Walau bagaimanapun, jika elemen anak tertentu dihiasi secara langsung, gaya yang diterapkan secara langsung akan mengatasi gaya yang diwarisi.

Contoh: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • Di sini, color: gray; diterapkan pada tag footer, tetapi kerana color: black; secara jelas ditentukan untuk elemen p, teks elemen p ditampilkan dalam warna hitam. Sementara itu, elemen span mewarisi sifat color daripada footer dan muncul dalam warna kelabu.

CSS Cascade dan Keutamaan

Seperti yang tersirat dari nama 'Cascading Style Sheets (CSS)', gaya 'bercascad'. Ini bermakna, jika terdapat pelbagai lembaran gaya atau peraturan, peraturan yang ditentukan terakhir akan diutamakan. Jika keutamaan adalah sama, gaya yang ditulis kemudian akan digunakan.

Contoh: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Di sini, warna: biru; ditentukan kemudian, jadi teks akan dipaparkan dalam warna biru.

Ringkasan

Keutamaan CSS ditentukan menggunakan algoritma seperti kekhususan, tetapi di sini kita hanya mempertimbangkan bahagian asas.

Peraturan asas adalah seperti berikut:

  • Gaya sebaris sentiasa mempunyai keutamaan tertinggi.
  • Pemilih ID adalah berkuasa dan diutamakan berbanding kelas dan tag.
  • Pemilih kelas dan pseudo-kelas mempunyai tahap keutamaan sederhana.
  • Pemilih tag dan pseudo-elemen mempunyai tahap keutamaan terendah.
  • !penting mengatasi keutamaan biasa dan menerapkan gaya secara paksa.

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

YouTube Video

Pewarisan dalam CSS