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 כולל בורר, תכונה, ו-ערך. כל זוג של תכונות וערכים מסתיים בנקודה-פסיק.

  • בורר מציין לאיזה אלמנט ב-HTML הסגנון חל. בדוגמה זו, הסגנונות מוחלים על כל אלמנטי ה-<header>.
  • תכונה מציינת את מאפיין הסגנון שיש לשנות, כגון צבע או גודל גופן. Padding ו-color הם התכונות בדוגמה זו.
  • ערך הוא הערך המוקצה לתכונה. לדוגמה, עבור צבע, זה יכול להיות 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> משתנה לאדום.

בוחר מזהה (ID) 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # הוא בוחר מזהה (ID) שמשמש לבחירת אלמנטים לפי מזהה.
  • מזהים הם ייחודיים, ולכן יכול להיות רק אלמנט אחד עם אותו מזהה בעמוד יחיד.

בוחר מחלקות (Class) 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . הוא בוחר מחלקות (Class) שמשמש לבחירת אלמנטים לפי מחלקה.
  • הוסף מאפיין מחלקה (class) לאלמנטים ב-HTML כדי להחיל סגנונות על אלמנטים השייכים למחלקה זו.

בוחר מאפיינים (Attribute) 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] הוא בוחר מאפיינים (Attribute) שבוחר אלמנטים עם מאפיין מסוים.
  • בדוגמה זו, הטקסט של אלמנט <a> עם ערך מאפיין href של index.html מוגדר כמודגש.

משלב (Combinator)

משלבים (Combinators) משמשים לשילוב מספר בוחרים כדי לבחור אלמנטים בעלי קשרים מסוימים. בעוד שבוחר בוחר אלמנטים בנפרד, משלב מגדיר את הקשרים המבניים בין האלמנטים.

משלב צאצאים (Descendant) 

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}
  • : משמש לבחירת פסאודו-מחלקות.
  • פרטים על פסאודו-מחלקות יוסברו במאמר אחר.

פסאודו-אלמנטים 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: משמש לבחירת פסאודו-אלמנטים.
  • פרטים על פסאודו-אלמנטים יוסברו גם במאמר אחר.

ספציפיות ב-CSS

קדימות ב-CSS היא חיונית להבנת אופן הפעולה של CSS ולמניעת יישום סגנונות לא צפוי. עדיפות ב-CSS קובעת איזו חוק היא החזקה ביותר כאשר מספר חוקי CSS מיושמים על אותו אלמנט. העדיפות של CSS נקבעת בעיקר על ידי הגורמים הבאים.

  1. Inline styles: סגנונות שנכתבים ישירות בתוך קוד HTML
  2. ID Selectors ：#id
  3. מחלקות, בוררי מאפיינים, פסאודו-מחלקות ：.class, [attribute=value], :hover, etc
  4. בוררי אלמנטים ：div, h1, p, etc
  5. בורר אוניברסלי ：*

ככל שהגורם גבוה יותר ברשימה, כך העדיפות שלו גבוהה יותר, וככל שהוא נמוך יותר, העדיפות נמוכה יותר.

כיצד לחשב ספציפיות

עדיפות ב-CSS מחושבת על ידי כימות ה'משקל' של כל בורר. המשקל של כל בורר מיוצג באופן הבא.

  1. Inline styles: סגנונות בקו הם החזקים ביותר ותמיד זוכים לעדיפות.
  2. ID selectors: בורר ID אחד שווה ל-'100 נקודות'.
  3. מחלקות, בוררי מאפיינים, פסאודו-מחלקות: שווים ל-'10 נקודות'.
  4. בוררי אלמנטים, פסאודו-אלמנטים: שווים ל-'1 נקודה'.

החוק עם הציון הגבוה ביותר הוא זה שחל.

דוגמה: 

 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 (1 נקודה)
  • בורר מחלקה .header (10 נקודות)
  • בורר ID #header (100 נקודות)

במקרה זה, מאחר שלבורר ה-ID יש את העדיפות הגבוהה ביותר, 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 וסדר עדיפויות

כפי שהשם 'גיליונות סגנון מדורגים (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 נקבע באמצעות אלגוריתמים כמו ספציפיות, אבל כאן התייחסנו רק לחלקים הבסיסיים.

החוקים הבסיסיים הם כדלקמן:

  • סגנונות Inline תמיד בעלי עדיפות הגבוהה ביותר.
  • סלקטורים של ID הם חזקים וגוברים על קלאסים ותגיות.
  • סלקטורים של קלאסים ו-מחלקות מדומות הם בעדיפות ברמה בינונית.
  • סלקטורים של תגיות ו-אלמנטים מדומים הם בעדיפות ברמה הנמוכה ביותר.
  • !important גובר על סדר עדיפויות רגיל ומחיל את הסגנון בכוח.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

ירושה ב-CSS