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