CSS - הורשה
inherit ב-CSS, שמאפשר לאלמנט לקבל את הערך של מאפיין מהתגית שעוטפת אותו.a מגדירים צבע בירושה, והלינק מקבל את הצבע של הפסקה.a:hover את הערך underline.ul נתנו גבול של פיקסל אחד בצבע ירוק. התגית li לא קיבלה את הגבול, כי גבול לא עובר אוטומטית לתגיות שבתוכה.a { color: inherit; text-decoration: inherit; }a:hover { text-decoration: underline; }li { border: inherit; }inherit במפורש.להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: CSS - הורשה
תמלול ההרצאה: CSS - הורשה
הטקסט המלא של הדקות הראשונות בהרצאה «CSS - הורשה» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
מה שאנחנו הולכים לראות עכשיו זה שימוש במאפיין של CSS שנקרא Inherit. בואו נראה מה זה אומר. ראשית, בואו ניכנס לאיזשהו אתר מאוד ידוע בעולם בנוגע ל-CSS, והאתר הזה נקרא CSS ZenGarden.
האתר הזה מכיל HTML אחד ויחיד, ומעצבים מכל העולם עיצבו אותו בעברת כל מיני קבצי CSS שונים, ולאחר מכן העלו אותו לאתר. וניתן לראות באתר הזה שיש כל מיני עיצובים שונים לאותו קובץ CSS שניתן להורדה מהלינק הזה לדוגמה.
בואו נראה מספר עיצובים, נלך לעיצוב שנקרא under the C, נוכל לראות שזה בעצם אותו דף HTML בדיוק, אבל עיצוב אחר לגמרי. בואו נלך לעיצוב נוסף, אפשר לראות אותו דף HTML עם עיצוב נוסף.
אוקיי, בואו נחזור רגע לעיצוב הראשוני. יש כאן בצד לינקים. אנחנו יודעים שלינק כברירת מחדל הוא בצבע כחול. במובן שיכלו לשנות לו את הצבע בעזרת css ולתת לו איזשהו צבע אחר.
אבל אנחנו הולכים לראות איך ניתן להשיג את העיצוב הזה שהלינק לא בצבע כחול בעזרת שימוש בתכונה inherit. אז בואו נבנה לנו איזשהו דף html ודף css ונראה איך להשתמש בזה.
אז נפתח דף html חדש, נשמור אותו ונצרף דף css כך שה html יפנה אליו.
בואו נשמור גם את ה-CSS ונציג את שניהם בוויז'ל סטודיו אחד ליד השני על ידי מכה שימני על כותרת הדף view vertical tab group new vertical tab group ושניהם מוצגים אחד ליד השני כך יותר נוח לעבוד עם זה.
אוקיי אז בוא נניח שיש לי כאן איזושהי פסקה בתוך הפסקה יש לי לינק בואו ניתן לזה מספר עיצובים נניח שאני רוצה להשיג את העיצוב הזה אני רוצה את אותו צבע שיש לנו כאן בלינקים האלה איך אני יודע מה הצבע שיש בלינק אז קודם כל כל הדפדפנים הנפוצים והחדשים מכילים אפשרות לחקור את דף ה-HTML ואת ה-CSS שהם מציגים.
באינטרנט אקספלורר ניתן ללכת לטולס, ויש לי פה Developer Tool או לחיצה על F12, ויש לי פה מעין חלונית שמראה לי נתונים לגבי דף ה-HTML הנוכחי. אני יכול ללחוץ על סמן העכבר פה מצד שמאל, ואז לגשת לדף ולבחור את התגית הרצויה, בואו נגיד את התגית הזאת.
ברגע שלחצתי עליה אני רואה מידע רב בנוגע לתגית, פה מצד שמאל אני רואה איך היא בדיוק כתובה מבחינת ה-HTML ופה מצד ימין אני רואה כל מיני מאפיינים לגביה לרבות סטייל.
אז בואו נחפש איפה מוגדר color ונראה כאן את הצבע המדויק של התווית. נעתיק אותו, עזוב לויז'ואל סטודיו ונגדיר עיצוב עבור פסקאות.
נשמור ונראה איך זה נראה בדפדפן. אפשר לסגור כבר את החלון הזה ואנחנו רואים שבעצם יש לי פה את הפסקה שצבועה בצבע ממש דומה או זהה לצבע שראינו, אבל עדיין הלינק מופיע כברירת מחדל בצבע כחול עם קו מתחתיו.
הסיבה היא שהדפדפן נותן איזושהי ברירת מחדל לכל מיני רכיבים, והברירת מחדל עבור לינקים, הצבע הוא כחול ואוטומטית יש קו תחתון מתחת ללינקים.
אוקיי, אז בואו נראה איך אנחנו מטפלים בזה. מה שאני רוצה להגיד זה שהצבע של הלינק ייקח את הערך של התגית שמקיפה אותו, כלומר מהפסקה.
איך עושים את זה? נחזור ל-CSS ונגדיר צוב עבור לינקים. עבור A-לינק, כלומר הערך בת מחדל של לינק, אנחנו רוצים לתת color inherit. אפשר לראות את זה כערך ראשוני פה בחלון ההצעות.
בואו נשמור, נחזור לדפדפן, נרפרש ואוטומטית הלינק הפך גם כן לצבע הזה. אפשר לראות עדיין שזה לינק מפני שברגע שאני עולה עליו, יש לי סימן של יד מבחינת העכבר.
איך אני מעלים את הקו התחתון בדיוק כמו שיש לנו באתר CSS and Garden? אנחנו רואים שהלינקים כברת מחדל לא מכילים קו תחתון אלא רק שעולים עליהם. בואו נחזור ל-HTML ול-CSS ונגדיר עבור לינק טקסט דקוריישן, גם הוא אינהריט.
טקסט דקוריישן מגדיר לי איפה יש קו מבחינת הטקסט. underline, overline, line-through וכו'. קו מתחת, קו מעל, קו באמצע. כאשר אני אומר לו שהוא inherit זה אומר שהוא יורש את התכונה מהתגית שעוטפת אותו.
אם לינק נמצא בתוך פרגרף אז הוא ייקח את התכונה טקסט דקוריישן בדיוק מהפרגרף שעוטפת אותו. בואו נראה איך זה מסתדר. הרגע כשעשיתי רפרש העלמתי את הקו ועדיין זה לינק.
עכשיו, בכדי שכאשר אני אעלה עליו אני כן רוצה לראות קו, אני צריך להחזיר אותו במצב ריחוף מעל הלינק. בואו נחזור ב-CSS ונגדיר עוד עיצוב עבור A-Hover.
עבור הריחוף, הטקסט דקוריישן אמור להיות אנדרליין. נשמור, נחזור לדפדפן, נרפרש, נעלה מעל הלינק, ואנחנו רואים שכאשר אני מרחף מעליו הוא חוזר ומראה לי את הקו התחתון.
אז בעצם מה שעשינו כאן כרגע והשתמשנו בתכונה Inherit בכדי לקחת תכונה של פסקה שעוטפת לינק ולתת את התכונה הזאתי ללינק. במקרה הזה התכונה הייתה Color.
הלכנו ל-Color ואמרנו ל-Color שהוא לוקח את התכונה שלו מהתגיד שעוטפת. כנ"ל לגבי טקסט דקוריישן. בואו נראה דוגמה נוספת שמאפשר לבצע Inherit. בואו נניח שיש לי פה סדרה של קורסים עבור המכללה.
את הסדרה של קורסים אנחנו מסדרים בתוך רשימה לא מסודרת, כלומר Unordered List. יש לנו html, יש לנו css, יש לנו את csharp ויש לנו את vb.net.
עכשיו בואו נניח שאני רוצה לתת עיצוב עבור ה-unordered list. העיצוב שאני רוצה לתת זה רוחב 2 פיקסלים ואני רוצה איזשהו בורדר שעוטף את הכל.
הבורדר שאנחנו רוצים 1 פיקסל סוליד גרין. בואו נשמור, נחזור לדפדפן, נרפרש ויש לנו כרגע איזושהי רשימה לא מסודרת, כלומר אני רואה כאן בולטין וכל פריט מכיל איזושהי שפת תכנות שניתן ללמוד במכללה כאשר יש בורדר אחד מסביב לכל הליסט.
אבל בואו טיפה נסתכל מה בעצם קרה כאן. אני נתתי הוראה ל-unordered list להכיל בורדר שנראה בצבע ירוק, הוא סוליד, כלומר הוא אחיד והוא אחד פיקסל.
את ההוראה הזאת נתתי ל-unordered list ולכן אני רואה שה-unordered list קיבלה בעצם את הבורדר הזה אבל אם נסתכל נראה שהאייטמים בתוך הליסט לא קיבלו את הבורדר למרות שלist item זה תגית שנמצאת בתוך ה-unordered list.
במקרה של color, color כן הגיע אוטומטי לנתונים שנמצאים בתוך פרגרף. במקרה של unordered list זה לא מגיע אוטומטי.
אז איך אנחנו מטפלים בזה? מה שאנחנו צריכים לעשות זה לומר ל-list אייטם לקבל את הבורדר מה-unordered list אם אנחנו רוצים את התופעה הזאת. בואו נסתכל איך עושים את זה.
אני מגדיר תגית list-item ומגדיר לה שהבורדר שלה הוא Inherit. בואו נשמור, נחזור לדפדפן, נרפרש, וכעת כל list-item גם הוא קיבל את הבורדר אוטומטית מה-unordered list שעוטפת אותו.
עכשיו חשוב להבין שכל תכונת CSS היא או אוטומטית Inherit או שהיא אוטומטית לא אינהריט. בורדר לא היה אינהריט אוטומטית, מפני שזה לא הגיוני שאם אני רוצה לעטוף בגבול את כל הרשימה, אני גם ארצה לעטוף בגבול את כל הפריטים של הרשימה.
לכן אם אני הייתי רוצה את העיצוב הזה, הייתי צריך ללכת בדיוק כמו שעשינו עכשיו, ולומר לליסט אייטם שהוא אינהריט, כלומר ייקח את הגבול מהתגיד שעוטפת אותו. בורדר הוא לא אינהריט אוטומטית, ולכן הייתי צריך להגיד לו את זה.
במקרה של הלינק, הלינק מקודם הייתה תכונה דיפולטית של הדפדפן ולכן על ידי תכונת inherit אמרתי לו שייקח את הצבע מהתגיד שעוטפת אותו, כלומר מהפסקה. צבע היא כן תכונה שהיא inherit אבל ספציפית עבור לינק אנחנו דרסנו את הדיפולט שהדפדפן נתן.
אם לדוגמה הייתי הולך ומגדיר במקום paragraph body אז הייתי יכול לראות שנתתי בעצם את הצבע הזה לכל ה-body. אבל מה זה אומר לבאדי? בגלל שColor זה תכונה שהיא by default Inherit, אז גם הפסקאות שנמצאות בתוך הבאדי וגם ה-Unordered List וה-List Item שנמצאים בתוך הבאדי היו מקבלים את התכונת Color כי היא by default