CSS - עיצוב מדורג - Cascading
style על התגית עצמה דורס את כל השאר. בדוגמה נתנו צבע צהוב.להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: CSS - עיצוב מדורג - Cascading
תמלול ההרצאה: CSS - עיצוב מדורג - Cascading
הטקסט המלא של הדקות הראשונות בהרצאה «CSS - עיצוב מדורג - Cascading» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות זה את נושא הקסקיידינג. פירוש CSS זה קסקיידינג סטיילשיט או בעברית גיליון עיצוב מדורג. אבל מה זה אומר המילה קסקיידינג?
המילה קסקיידינג מתארת דרגות שבהן הדפדפן שם את העיצובים שלנו על קובץ ה-HTML, כאשר הדפדפן מחפש עיצובים מסוימים, שם אותם ולאחר מכן מחפש עיצובים אחרים שיכולים לדרוס את העיצובים הקודמים.
לכן חשוב לנו בתור מעצבים להבין איך הדפדפן חושב ואיזה עיצובים שם על איזה עיצובים אחרים. בואו נפתח קובץ HTML חדש, נשמור אותו ונחבר אליו קובץ CSS. נשים אותם אחד ליד השני כך שניתן לראות בבת אחת את שניהם.
בואו נבין מה הדבר הראשון שהדפדפן שם על קובץ ה-HTML מבחינת ה-CSS. מה שנעשה זה נבנה פסקה. לפני שאני אתן לה בכלל עיצוב בואו נסתכל איך הפסקה הזאת נראית.
נריץ את הדף ואנחנו יכולים לראות שהטקסט הוא שחור. אם חשבתם פעם למה הטקסטים בי דיפולט הם בצבע שחור, לינקים הם בי דיפולט בצבע כחול וכברת מחדל יש ללינק מתחתיו קו תחתון, למה כל הדברים האלה מצוינים בי דיפולט מבחינת הדפדפן?
אז הסיבה היא שלדפדפן יש כמובן ערכי דיפולט עבור כל התגיות האלה. אפשר להתייחס לזה כאילו שזה איזשהו קובץ css דיפולטי שהדפדפן קודם כל שם על התגיות שלנו. לאחר מכן הוא מכיל את העיצובים שלנו.
אפשר לראות שבתור שכבה ראשונה דפדפן שם ערכים שהם דיפולט. עכשיו בואו נדרוס אותם. נלך לקובץ ה-CSS שלנו ונגדיר עיצוב עבור פסקה.
נבחר כרגע סלקטור של Element Name Selector, כלומר השם P, בכדי שיחול על כל הפסקאות. ניקח צבע ירוק ונקשר את ה-HTML עם קובץ ה-CSS שלנו.
נשמור ונראה רק שבאמת העיצוב שאנחנו נתנו דרס את העיצוב הדיפולטי, ואנחנו רואים אכן שהטקסט הפך להיות ירוק. אוקיי, אבל מה באמת הדירוג כאן?
אז מה שקורה זה דבר כזה. בוא נניח שהייתה לי עוד פסקה מבחינת עיצוב בעלת צבע אחר. מה הדפדפן עושה כאשר הוא רואה עיצוב ולאחריו עוד עיצוב שדורס אותו?
אז כמובן שאחד ידרוס את השני. אבל מי ידרוס את מי? בואו נבדוק. נראה שהדפדפן לקח את האדום בסופו של דבר ועלה על הירוק.
אז מה הדפדפן עושה? דפדפן מתחיל לעצב מלמעלה למטה, כאשר כל עיצוב שהוא נתקל בו דורס את העיצובים הקודמים.
אנחנו יכולים לראות גם שאם אנחנו שמים פה עיצוב, שניהם נמצאים באותו הבלוק, העיצוב השני ידרוס את העיצוב שהיה לפניו. בואו נבדוק את זה, ונראה כרגע שהצבע הוא כחול.
דפדפן ממשיך ומחפש עוד עיצובים בשביל לדרוס את העיצובים הקודמים מבחינת השכבות. אם היה לי כאן עיצוב של טייל שגם מתייחס לפסקאות וגם הוא שולט על הצבע שלהם, אז אנחנו יכולים לראות שהדבר הזה המרון ידרוס את כל הקודמים מפני שמבחינת הדפדפן הוא הולך מלמעלה למטה ונתקל בעיצוב הזה
שזה העיצוב האחרון שידרוס את כל היתר. בואו נרפרש ונראה שכרגע הצבע הוא מרון כלומר חום. יש לשים לב שהסיבה שהעיצוב הזה עלה לעיצובים הקודמים היא בגלל שמבחינת הסדר או המיקום הוא נמצא אחרי העיצובים הקודמים בגלל שהלינק שמפנה אליהם נמצא לפני העיצוב של הסטייל הזה שנקרא אמבדד.
אם אני אקח את הלינק הזה ואהעביר אותו למיקום שהוא אחרי עיצוב האמבדד אנחנו יכולים לראות שהדפדפן קודם כל שם את העיצוב האמבדד מבחינת הדף כי הוא הכי למעלה ולאחר מכן הכיל את כל העיצובים שנמצאים באקסטרנל זאת אומרת שהעיצוב שאמור לדרוס את הכל כרגע זה העיצוב הכחול בואו נבדוק את זה נרפרש ונראה אכן שהטקסט הוא כחול זאת הסיבה שחשוב תמיד לקחת את
הקישור של הלינק ובמידה ויש לי עיצוב אמבדד בדף לשים אותו מעל לעיצוב האמבדד בכדי שהעיצוב האמבדד שכנראה הוא יותר ספציפי עבור הדף שלי ידרוס עיצובים קודמים שיכולים להיות בקובץ cff חיצוני לאחר מכן מבחינת המיקומים הדפדפן ממשיך ומחפש האם יש מיקום עוד יותר קרוב לתגית והכוונה היא ל-inline styling זה מתבצע כמובן
על ידי attribute style שקיים בפסקה בואו ניתן צבע צהוב ב-inline ונראה כרגע שהצבע הצהוב אמור לדרוס את כל היתר נשמור נחזור לדפדפן ונרפרש ונראה שהפסקה שלי צבועה בצבע צהוב אם ככה עד עכשיו ראינו שיש מעין שתי שכבות שכבה ראשונה וערכים דיפולטיים שהדפדפן שם על כל התגיות.
שכבה שנייה מתבצעת על פי מיקומים, כאשר הדפדפן הולך מלמעלה למטה, וכל עיצוב שעולה על עיצובים קודמים שהוא נתקל בו, דורס את העיצובים הקודמים.
השכבה השלישית שהדפדפן מחפש זה שכבה לפי ספציפיות של הסלקטור. אנחנו כרגע השתמשנו רק בסלקטור שנקרא Element Name Selector, שהסלקטור הזה סך הכל הוא שם הפסקה, או שם התגית יותר נכון.
אם עכשיו אני אוסיף עוד סלקטורים אחרים ובואו אפילו נוסיף אותם למעלה נראה מה הדפדפן עושה מבחינת העיצובים עצמם כאשר עיצוב אחד יכול לעלות על עיצוב אחר אז מה שנעשה זה נבנה סלקטור עבור קלאס נבנה כאן סלקטור שנקרא paragraph design והוא קלאס סלקטור נקודה מציינת לי קלאס סלקטור ניתן צבע aqua נשמור וניתן לתגית את
הקלאס הזה חשוב להבין למרות שהקלאס עולה מבחינת החוזק שלו על אלמנט ניים, עדיין אנחנו הולכים לראות את הצהוב.
תכף נבין למה, אבל בואו קודם כל נסתכל על זה. אני חוזר לדפדפן, מרפרש, ועדיין אני רואה את הצהוב. הסיבה היא מפני שאכן יש סלקטור שהוא יותר חזק מסלקטור אחר, לדוגמה קלאס יותר חזק מאלמנט ניים, אבל עיצוב של אינליין עולה עליהם.
והוא יותר חזק בסופו של דבר מקלאס סלקטור או מסלקטורים אחרים. אז בשביל להמחיש את עניין הסלקטורים בואו נוריד את האינליין ונראה מה יש לנו פה כרגע.
יש לנו בלוק עיצוב שמוגדר על ידי קלאס שנקראת paragraph design. נתתי את הקלאס הזאת לפי, לפסקה. לאחר מכן יש עיצובים נוספים אבל העיצובים האלה מתבצעים על ידי אלמנט ניים סלקטור.
למרות שהאלמנט ניים סלקטור נמצא מבחינת סדר אחרי הקלאס, הקלאס עדיין הולך לדרוס אותם ומי שיהיה פה הכי חזק כרגע זה יהיה הקלאס הזה והצבע אמור להיות אקווה.
בואו נשמור, נחזור לדפדפן ונרפרש. נראה שהצבע הוא אקווה. זאת אומרת שעיצוב של קלאס דרס עיצוב של אלמנט ניים.
עכשיו נגדיר עיצוב יותר חזק שנקרא ID. ניקח צבע כסף, נשמור וכל מה שאנחנו צריכים לעשות זה לתת את ה-ID הזאת לפסקה. זאת אומרת שעכשיו לפסקה יש גם ID שנקראת ParID, גם קלאס שנקראת ParagraphDesign וגם עיצובים שונים של Element Name עבור פסקאות.
מה שייקח בסופו של דבר זה העיצוב של ה-Silver מפני שסלקטור שהוא ID הוא יותר ספציפי עבור תגית מאשר סלקטור שאינו קלאס שעדיין יותר ספציפי עבור תגית מאשר סלקטור שהוא אלמנט ניים.
אם אנחנו נרפרש כרגע אנחנו אמורים לראות את הצבע כסילבר, צבע כסף. בואו נרפרש ונראה אכן שהצבע של הפסקה הוא כסף.
אם כך, מבחינת השכבות שכבה ראשונה הייתה שכבה דיפולטית שהדפדפן שם על כל התגיות, שכבה שנייה זה עיצוב על פי מיקום בקבצים, כאשר מיקום מאוחר יותר דורס מיקום מוקדם יותר, ושכבה שלישית זו שכבה על פי רמת הספציפיות של הסלקטורים, כאשר הכי חזק זה ID,
לאחריו Class ולאחריו Element Name. יש לשים לב שעדיין אינליין עולה על העיצובים האלה מבחינת הרמת הספציפיות. השכבה השלישית שקיימת, סליחה, הרביעית שקיימת זאת שכבה שנקראת Important.
בואו נשים אותה פה. ניקח עכשיו עיצוב נוסף עבור פסקאות שהוא Element Name, כלומר העיצוב הכי פשוט וגם הוא נמצא הכי למעלה, כלומר מבחינת המיקום הוא יעוצב ראשון וכל אחת אחרת יוכל לדרוס אותו.
נגדיר Color, ניקח איזשהו צבע, לדוגמה Orange, ונגדיר סימן קריאה Important. ברגע שעשיתי עיצוב Important, העיצוב הזה עולה על כל העיצובים הקודמים שהיו עד עכשיו, כולל עיצוב של Inline.
בואו נשים פה עיצוב של אינליין. יש לנו פה עיצוב של אינליין שהיה אמור לעלות על הכל, שזה סגול בהיר, ולאחר מכן נתתי עיצוב עבור פסקאות, כתום, אבל רשמתי סימן קריאה important.
important דורס הכל. בואו נבדוק את זה, נרפרש ונראה אכן שהטקסט הוא כתום. אם כך, עד עכשיו היה לנו שכבה ראשונה עיצוב דיפולטי שהדפדפן שם, שכבה שנייה עיצוב על פי מיקום, שכבה שלישית עיצוב על פי רמת ספציפיות, שכבה רביעית אימפורטנט ובדפדפנים מסוימים קיימת
עוד שכבה. לדוגמה בדפדפן אופרה קיימת שכבה שנקראת User Define וזה אומר שהיוזר כלומר משתמש הקצה יכול להחליט שכל הלינקים לדוגמה הוא רוצה לראות אותם בצבע צהוב ואז הדפדפן ישים את מה שהיוזר בחר אבל זה נמצא רק בדפדפנים נדירים כמו אופרה.
לכן בגדול ישנם ארבע שכבות עיצוב דיפולטי