Articles
مقدمة إلى CSS
أساسيات CSS

أساسيات CSS

تشرح هذه المقالة أساسيات CSS۔

يمكنك التعرف على محددات CSS والمجمعات والخصوصية۔

YouTube Video

HTML/CSS للمعاينة

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>

الصياغة الأساسية 

1selector {
2    property: value;
3}

يتكون الهيكل الأساسي لـ CSS من المحدد (selector), الخاصية (property), و القيمة (value)۔ يتبع كل زوج من الخصائص والقيم بفاصلة منقوطة۔

  • المحدد (selector) يحدد أي عنصر HTML ينطبق عليه النمط.۔ في هذا المثال، يتم تطبيق الأنماط على جميع عناصر <header>۔
  • الخاصية (property) تحدد خاصية النمط التي سيتم تغييرها، مثل اللون أو حجم الخط.۔ Padding و color هما الخصائص في هذا المثال۔
  • القيمة (value) هي القيمة المعينة للخاصية.۔ على سبيل المثال، يمكن أن يكون اللون white أو #9cf، أما بالنسبة لحجم الهامش، فيمكن أن يكون 20px۔

المحددات

محددات CSS هي أنماط لاختيار عناصر HTML.۔ باستخدام المحددات، يمكنك تطبيق الأنماط على عناصر معينة أو مجموعات من العناصر.۔

المحدد العام 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * هو محدد شامل يتم تطبيقه على جميع العناصر.۔
  • في هذا المثال، تم تغيير الخط لجميع العناصر۔

محدد العنصر 

1/* Element Selector */
2strong {
3    color: red;
4}
  • محدد العنصر هو محدد يتم تطبيقه على علامات HTML محددة عن طريق كتابة اسم العلامة۔
  • في هذا المثال، يتم تغيير لون النص لعناصر <strong> إلى اللون الأحمر۔

محدد الهوية 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # هو محدد معرف (ID) يستخدم لاختيار العناصر بواسطة المعرف.۔
  • المعرفات (IDs) فريدة، لذلك لا يمكن أن يكون هناك سوى عنصر واحد بنفس المعرف في الصفحة الواحدة۔

محدد الصنف 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . هو محدد فئة (class) يستخدم لاختيار العناصر بواسطة الفئة.۔
  • أضف خاصية الصنف (class) إلى عناصر HTML لتطبيق أنماط على العناصر التي تنتمي إلى هذا الصنف۔

محدد السمة 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] هو محدد سمات يحدد العناصر التي تحتوي على سمة معينة۔
  • في هذا المثال، يتم تعيين النص لعنصر <a> الذي يحتوي على قيمة سمة href تساوي index.html ليكون بخط عريض.۔

المعامل

تُستخدم المجمعات لدمج محددات متعددة لتحديد العناصر ذات العلاقات المحددة۔ بينما يحدد المحدد العناصر بشكل فردي، يلعب المجمع دور تعريف العلاقات الهيكلية بين العناصر۔

المعامل النسبي 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • يطبق مجمع السليل أنماطًا على جميع العناصر المحددة داخل عنصر معين۔
  • في هذا المثال، يتم تطبيق خط سفلي على عناصر <strong> داخل عناصر <span>۔

المعامل الفرعي 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • يُستخدم الرمز > بين span و em كمجمع للأطفال۔ في هذا المثال، يتم تطبيق الأنماط فقط على عناصر <em> التي هي أطفال مباشرين لعناصر <span>۔ في مثال السطر الثالث، نظرًا لوجود علامة <s> بين علامتي <span> و <em>، لم يتم تطبيق النمط۔

المعامل الأخ المقابل 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • المشغل الشقيق المجاور الذي يستخدم علامة + يطبق الأنماط على عنصر شقيق يظهر مباشرة بعد عنصر معين.۔
  • في هذا المثال، يصبح لون النص أخضر فقط إذا ظهرت علامة <b> مباشرة بعد علامة <br>۔

المعامل الأخ العام 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • المشغل الشقيق العام الذي يستخدم علامة ~ يحدد جميع عناصر الأشقاء التي تظهر بعد عنصر معين.۔
  • في هذا المثال، سيكون لون النص لجميع وسوم <b> التي تظهر بعد وسم <br> بدرجة من اللون الأزرق.۔

الفئات الزائفة 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : يُستخدم لاختيار الفئات الزائفة۔
  • سيتم شرح التفاصيل حول الفئات الزائفة (pseudo-classes) في مقال آخر۔

العناصر الكاذبة 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • يُستخدم :: لاختيار العناصر الوهمية.۔
  • سيتم شرح التفاصيل حول العناصر الزائفة (pseudo-elements) أيضًا في مقال آخر۔

تحديد الأولوية في CSS

الأسبقية في CSS مهمة لفهم كيفية عمل CSS ومنع تطبيق الأنماط غير المتوقعة.۔ تحدد أولوية CSS القاعدة الأكثر قوة عند تطبيق قواعد CSS متعددة على نفس العنصر۔ يتم تحديد أولوية CSS بشكل رئيسي من خلال العوامل التالية.۔

  1. الأنماط المباشرة: الأنماط المكتوبة مباشرة داخل HTML
  2. محددات المعرف ：#id
  3. الفئات، محددات السمات، الفئات الزائفة ：.class, [attribute=value], :hover, etc
  4. محددات العناصر ：div, h1, p, etc
  5. المحدد العالمي ：*

كلما ارتفعت القائمة، زادت الأولوية، وكلما انخفضت، انخفضت الأولوية.۔

كيفية حساب الأولوية

يتم حساب أولوية CSS عن طريق تحديد 'الوزن' لكل محدد.۔ يُعبّر عن وزن كل محدد كما يلي.۔

  1. الأنماط المضمّنة: الأنماط المضمّنة هي الأقوى دائمًا ويتم منحها الأولوية دائماً.۔
  2. محددات المعرف: محدد معرف واحد يعادل '100 نقطة'.۔
  3. محددات الفئات، محددات الصفات، الفئات الوهمية: تعادل هذه '10 نقاط'.۔
  4. محددات العناصر، العناصر الوهمية: تعادل هذه 'نقطة واحدة'.۔

يتم تطبيق القاعدة ذات الدرجة الأعلى.۔

مثال: 

 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>

هنا، تم تطبيق ثلاث أنماط مختلفة على وسم <h1>:

  • مُحدد عنصر h1 (نقطة واحدة)
  • مُحدد فئة .header (10 نقاط)
  • مُحدد معرف #header (100 نقطة)

في هذه الحالة، نظرًا لأن محدد المعرف له الأولوية الأعلى، يتم تطبيق color: blue.۔

تجاوز الأولوية باستخدام !important

استخدم !important إذا كنت تريد فرض نمط وتجاهل الأولويات المعتادة.۔ !important له التأثير الأقوى على جميع القواعد، متجاوزًا كل شيء آخر.۔

مثال: 

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>
  • هنا، يتم تحديد color: red !important;، لذلك يكون color: red له الأولوية.۔

التوريث والأولوية

يمتلك CSS القدرة على وراثة الأنماط من العناصر الأصلية إلى العناصر الفرعية۔ على سبيل المثال، الخصائص مثل color و font-family يتم وراثتها افتراضيًا۔ ومع ذلك، إذا كان هناك عنصر فرعي محدد يتم تنسيقه مباشرة، فإن النمط المطبق مباشرة يأخذ الأسبقية على الأنماط الموروثة۔

مثال: 

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>
  • هنا، يتم تطبيق color: gray; على علامة footer، ولكن نظرًا لأن color: black; محددة بشكل صريح لعنصر p، يتم عرض نص عنصر p باللون الأسود۔ في الوقت نفسه، يرث عنصر span خاصية color من footer ويظهر باللون الرمادي۔

الشلالية والأولوية في CSS

كما يشير الاسم 'Cascading Style Sheets (CSS)'، فإن الأنماط تتدفق۔ وهذا يعني أنه إذا كان هناك أنماط أو قواعد متعددة، فإن القاعدة الأخيرة المحددة تأخذ الأسبقية۔ إذا كانت الأولويات متساوية، يتم تطبيق النمط المكتوب في وقت لاحق۔

مثال: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • هنا، color: blue; معرف لاحقًا، لذا يتم عرض النص باللون الأزرق۔

الملخص

تُحدد أسبقية CSS باستخدام خوارزميات مثل التحديد، لكن هنا اعتبرنا فقط الأجزاء الأساسية۔

القواعد الأساسية كالتالي:

  • دائمًا ما تكون الأنماط المضمنة ذات أولوية عالية۔
  • تُعد المحددات بالمعرف قوية وتأخذ الأسبقية على الفئات والعلامات۔
  • تُعد المحددات بالفئة و الطبقات الكاذبة ذات مستوى أسبقية معتدل۔
  • تُعد المحددات بالعلامة و العناصر الكاذبة ذات أدنى مستوى من الأسبقية۔
  • !important يتجاوز الأسبقية العادية ويطبق النمط بالقوة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

الميراث في CSS