כיצד CSS ירושה עובד במסמכי אינטרנט

חלק חשוב של עיצוב אתר אינטרנט עם CSS הוא להבין את הרעיון של ירושה.

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

מהי CSS ירושה?

כל אלמנט במסמך HTML הוא חלק מעץ וכל אלמנט פרט למרכיב הראשוני יש אלמנט הורה שמקיף אותו. לא משנה מה סגנונות מוחלים על אלמנט ההורה יכול להיות מיושם על אלמנטים סגורים בו אם המאפיינים הם אלה שיכולים להיות בירושה.

לדוגמה, לקוד HTML זה יש תג H1 שמכיל תג EM:

זוהי Big כותרת

רכיב ה- EM הוא ילד של אלמנט H1, וכל הסגנונות ב- H1 שיירשו יועברו גם לטקסט EM. לדוגמה:

h1 {font-size: 2em; }

מכיוון שהמאפיין בגודל גופן עובר בירושה, הטקסט שאומר "ביג" (שהוא מה שמוגדר בתגי EM) יהיה בגודל זהה לשאר ה- H1. הסיבה לכך היא שהוא יורש את הערך שנקבע במאפיין CSS.

כיצד להשתמש בירושה CSS

הדרך הקלה ביותר להשתמש בו היא להכיר את מאפייני CSS שאינם ולא בירושה. אם הנכס עובר בירושה, אתה יודע שהערך יישאר זהה עבור כל רכיב ילדים במסמך.

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

body {font-family: Arial, sans-serif; }

השתמש ב- Inherit Style Value

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

גוף {margin: 1em; } p {margin: inherit; }

ירושה משתמשת בערכים מחושבים

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

אם תגדיר גודל גופן של 1:00 על רכיב BODY שלך, כל הדף שלך לא יהיה בגודל 1 מ"מ בלבד. הסיבה לכך היא כי אלמנטים כמו כותרות (H1-H6) ואלמנטים אחרים (כמה דפדפנים לחשב מאפיינים בטבלה אחרת) יש גודל יחסי בדפדפן האינטרנט. בהיעדר מידע גופן אחר, דפדפן האינטרנט תמיד יהפוך כותרת H1 לטקסט הגדול ביותר בדף, ואחריו H2 וכן הלאה. כאשר אתה מגדיר את האלמנט BODY לגודל מסוים של גופן, אז זה משמש כגודל הגופן "ממוצע", ​​ורכיבי הכותרת מחושבים מתוך זה.

הערה על תכונות ירושה ורקע

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