Articles
מבוא ל-CSS
ירושה ב-CSS

ירושה ב-CSS

מאמר זה מסביר על ירושה ב-CSS.

ניתן לבדוק מאפיינים נורמטיביים נירשים וכאלה שלא נירשים.

YouTube Video

HTML לתצוגה מקדימה

css-inheritance.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 Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

ירושה ב-CSS

ב-CSS, חלק מהמאפיינים נירשים באופן אוטומטי מאלמנטים הורה לאלמנטים ילד. זהו מנגנון שימושי משום שאחרי שמגדירים מאפיין מסוים, גם אלמנטים ילדי יקבלו את אותו הסגנון, וכך לא צריך להגדיר אותו שוב ושוב. עם זאת, לא כל המאפיינים נירשים; חלק נירשים וחלק לא. לדוגמה, color ו-font-family נירשים, אבל מאפיינים של מודל הקופסה כמו margin ו-padding אינם נירשים.

מאפיינים נירשים

מאפיינים שניתן להוריש הם בעיקר כאלו שקשורים לטקסט וגופנים.

מאפיינים נירשים נפוצים

  1. color: צבע טקסט
1body {
2    color: black;
3}
  • במקרה זה, כל האלמנטים הילדיים בתוך body יהיו בצבע טקסט שחור.
  1. font-family: משפחת גופן
1body {
2    font-family: "Times New Roman", cursive;
3}
  • כל האלמנטים הילדיים משתמשים בגופן Arial.
  1. font-size: גודל טקסט
1body {
2    font-size: 16px;
3}
  • כל הטקסט בתוך body יהיה בגודל 16px כברירת מחדל.
  1. line-height: מרווח שורות
1p {
2    line-height: 1.5;
3}
  • טקסט בתוך אלמנט <p> יוצג עם גובה שורה של 1.5, וישפיע גם על אלמנטי הילד שלו.
  1. text-align: יישור טקסט
1div {
2    text-align: center;
3}
  • טקסט ואלמנטים ברמת שורה בתוך אלמנט div מוצגים במרכז.
  1. visibility: נראות אלמנט
1div {
2    visibility: hidden;
3}
  • visibility הוא מאפיין ששולט בנראות של אלמנט. כאשר מוגדר כ־hidden, האלמנט הופך לבלתי נראה.
  • במקרה זה, גם אלמנטים פנימיים בתוך ה־div יוסתרו.
  1. list-style: סגנון רשימה (סימני רשימות עבור <ul> ו־<ol>)
1ul {
2    list-style: square;
3}
  • במקרה הזה, פריטי הרשימה בתוך תגית ul יוצגו עם סימנים בצורת ריבוע.

דוגמה:

מאפיינים שאינם ניתנים להורשה

מאפיינים הקשורים לפריסה ולמודל הקופסה אינם מועברים בירושה בדרך כלל. מאפיינים אלו צריכים להיות מוגדרים בנפרד עבור כל אלמנט.

מאפיינים שאינם ניתנים להורשה נפוצים

  1. margin, padding: שוליים חיצוניים ופנימיים של אלמנט
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • גם אם תגדיר שוליים חיצוניים או פנימיים לאלמנט div, זה לא ישפיע על האלמנטים הפנימיים שלו.
  1. border: גבול האלמנט
1div {
2    border: 1px solid black;
3}
  • גם אם מוגדר גבול על אלמנט האב, זה לא ישפיע על האלמנטים הפנימיים.
  1. width, height: רוחב וגובה של אלמנט
1div {
2    width: 100px;
3    height: 50px;
4}
  • הרוחב והגובה של אלמנט האב אינם משפיעים אוטומטית על האלמנטים הפנימיים.
  1. background: סגנון רקע
1body {
2    background-color: lightblue;
3}
  • צבע הרקע שמוגדר על אלמנט ה־body אינו משפיע ישירות על האלמנטים הפנימיים. עם זאת, אם לאלמנט פנימי יש רקע שקוף, צבע הרקע של אלמנט האב עשוי להיות גלוי דרכו.

דוגמה:

שליטה בירושה

ניתן לשלוט בירושה באמצעות מילות המפתח inherit, initial או unset.

  • אם תרצה לאפשר ירושה: תוכל לכפות ירושה בצורה מפורשת באמצעות מילת המפתח inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • אם אינך רוצה בירושה: תוכל לאפס את המאפיין לערך ההתחלתי שלו באמצעות מילות המפתח initial או unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

דוגמה:

המאפיין all

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

  • initial: מאפס את כל המאפיינים לערכים ההתחלתיים שלהם.
  • inherit: יורש את כל המאפיינים מאלמנט האב.
  • unset: יורש את המאפיין אם הוא ניתן לירושה, אחרת מאפס אותו לערך ההתחלתי שלו.

all שימושי מאוד כשרוצים לאפס או להגדיר מספר רב של מאפיינים במכה אחת, במקום להגדיר מאפיינים מסוימים באופן פרטני.

דוגמה לאיפוס לערכים התחלתיים 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • כשאתה רוצה לאפס את כל הסגנונות שהוגדרו בעבר עבור אלמנט מסוים ולהחזירו למצבו ההתחלתי, השתמש ב-all: initial כך:.

  • בדוגמה זו, כל המאפיינים של אלמנט <div> עם המחלקה .all-initial מאופסים לערכי ברירת המחדל ההתחלתיים של הדפדפן.

דוגמה לירושה 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • שימוש ב-all: inherit גורם לכל המאפיינים להירש מאלמנט האב.
  • בדוגמה זו, האלמנטים עם המחלקה .all-inherit יורשים את כל המאפיינים, כגון color ו-font-size, מאלמנט האב.

דוגמה לקביעת ערך ראשוני או ירושה בהתבסס על תנאים 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • שימוש ב-all: unset גורם למאפיינים להירש במידה וניתן; אחרת, הם מנוקים לערכים ההתחלתיים שלהם.
  • במקרה זה, color נ inheritance, בעוד ש-font-weight מאופס לערך ההתחלתי שלו, שבדרך כלל הוא normal.

הקשר עם ספציפיות (קדימויות) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • המאפיין all הוא מנגנון איפוס חזק, אבל הוא מושפע מספציפיות ב-CSS. אם לאלמנט מסוים יש הגדרות עיצוב חזקות, המאפיין all עשוי לא להיות מסוגל לעקוף אותן. לדוגמה, מאפיינים שהוגדרו עם !important לא מושפעים.

  • בדוגמה זו, גם אם תנסו לאפס את הסגנון עם all: initial, המאפיין color לא יאופס בגלל ההגדרה color: red !important.

אלמנטים ברמת בלוק ואלמנטים בשורה

אלמנטים ברמת בלוק

  • דוגמה: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • מאפיינים:
    • הם תמיד מופיעים בשורה חדשה ומתרחבים למלא את כל רוחב אלמנט האב שלהם.
    • הרוחב (width) והגובה (height) ניתנים להגדרה חופשית.
    • ניתן להגדיר מרווחים (margin) וריפוד (padding) בכל הכיוונים והם ישפיעו על כל הצדדים.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

אלמנטים בשורה

  • דוגמה: <span>, <a>, <strong>, <em>, <img>, <label>
  • מאפיינים:
    • הם מופיעים לצד אלמנטים אחרים בשורה באותה שורה.
    • רוחב (width) וגובה (height) לא ניתנים להגדרה ישירה (אלא אם מוחל display: block).
    • הגדרת מרווחים (margin) או ריפוד (padding) אנכיים יש לה השפעה מוגבלת (מרווחים וריפוד אופקיים הם אפקטיביים).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

הבדלים בין אלמנטים ברמת בלוק לבין אלמנטים ברמת שורה

  • הגדרות רוחב וגובה:

    • אלמנטים ברמת בלוק: ניתן להגדיר רוחב וגובה.
    • אלמנטים ברמת שורה: בדרך כלל לא ניתן להגדיר רוחב וגובה.

  • מרווח (Margin) וריפוד (Padding):

    • אלמנטים ברמת בלוק: מרווח וריפוד מוחלים על כל הצדדים.
    • אלמנטים ברמת שורה: מרווח וריפוד בצד העליון והתחתון אינם אפקטיביים או בעלי השפעה מוגבלת.

  • שיטת תצוגה:

    • אלמנטים ברמת בלוק: ממוקמים אוטומטית בשורה חדשה.
    • אלמנטים ברמת שורה: מיושרים באותה שורה עם אלמנטים אחרים ברמת שורה.

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

טיפול CSS באלמנטים ברמת בלוק ובאלמנטים ברמת שורה 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

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

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

YouTube Video

בסיסי CSSפרטים על בוררי מאפיינים ב-CSS