CSS (גליונות סגנון מדורגים) היא שפת העיצוב של מסמכי HTML היא קובעת את העימוד והעיצוב של מסמך הHTML וכיצד הדפדפן יציג את האלמנטים השונים בדף
CSS הוא הקוד בו אנו נשתמש כדי לקבוע את העיצוב והנראות של דף האינטרנט שלנו, כמו באיזה צבע יוצג הטקסט בדף, היכן ימוקם התוכן ביחס למסגרת הדפדפן, ואיזה תמונות או צבעים ישמשו כרקע לדף.
מהי שפת CSS
כמו HTML כך CSS איננה שפת תכנות, היא גם לא שפת תגיות, CSS היא שפת עיצוב גיליונות, כלומר באמצעותה אפשר להחיל חוקי עיצוב באופן בררני על כל אלמנט ואלמנט בכל דף או בכל האתר בכללותו. למשל באמצעות הקוד הבא נוכל לקבוע שכל התוכן של אלמנטי הכותרת <h2> במסמך שלנו יוצגו בצבע ירוק.
See the Pen h2 color by guerrilla.co.il (@guerilla) on CodePen.
חיבור גליונות CSS למסמך HTML
ישנם שלושה דרכים לשלב חוקי CSS במסמך HTML. הדרך הראשונה היא באמצעות קישור מסמך הHTML לגליון הCSS, קישור זה נעשה ע”י הוספת תגית <link> לראש מסמך הHTML בין תגית הפתיחה <head> לתגית הסגירה <head/>.
ראשית נפתח מסמך טקסט ניתן לו שם ונשמור אותו עם הסיומת CSS. למשל style.css, לאחר מכן נוסיף לתגית ה <link> את האטריביוט href וניתן לו כערך את שם הגיליון.
See the Pen link css by guerrilla.co.il (@guerilla) on CodePen.
ישנם בתגית הlink עוד שני אטריביוטים נוספים, האטריביוט rel (קיצור של relationship) שתפקידו לומר מהי מערכת היחסים בין מסמך הHTML לקובץ המקושר במקרה שלנו הקישור הוא לקובץ של גליון עיצוב ולכן הערך של האטריביוט הזה יהיה stylesheet. האטריביוט הנוסף הוא type ותפקידו לומר מהו סוג המסמך המקושר ובמקרה שלנו מסמך טקסט עם סיומת css.
הדרך השנייה היא לפתוח תגית <style> בראש המסמך בין תגית הפתיחה <head> לתגית הסגירה <head/>, לכתוב בתוכה את הקוד ולסגור בתגית סיום <style/>
See the Pen Writing CSS in HTML by guerrilla.co.il (@guerilla) on CodePen.
הדרך השלישית היא להוסיף לאלמנט פרטי את קוד העיצוב באמצעות הוספת אטריביוט style אשר יקבל כערך את החוק העיצובי של שפת CSS.
See the Pen inline style by guerrilla.co.il (@guerilla) on CodePen.
המבנה של חוקי CSS
להלן דוגמת קוד בCSS אשר צובעת את כל התגיות מסוג פסקה – <p> בצבע אדום.
See the Pen p color red by guerrilla.co.il (@guerilla) on CodePen.
כעת נביט קצת יותר לעומק על הקוד שלעיל.
כל מבנה הקוד הזה בכללותו מכונה חוק CSS.
שם האלמנט הפותח את החוק בוחר את האלמנט שעליו יחול החוק העיצובי, במקרה שלנו P המייצג את האלמנט <p> כדי להחיל את החוק הזה – צביעת האלמנט בצבע אדום – על אלמנט אחר פשוט נשנה את הP לשם האלמנט אותו אנו רוצים לצבוע באדום למשל h2 כדי להשפיע על האלמנט <h2>, שם האלמנט הזה מכונה סלקטור (Selector) ובעברית בורר, כלומר מה שנכתב בפתיחה (במקרה שלנו P) בורר מכל האלמנטים בדף או באתר את האלמנט הספציפי, הייחודי עליו יחול החוק העיצובי שלנו.
שורת הקוד הבודדת ;color:red מציינת את איזה ממאפייני האלמנט (לכל אלמנט יש שלל מאפיינים כמו גובה, רוחב, סוג פונט, מיקום, צבע ועוד) אנחנו רוצים לעצב (במקרה שלנו את הצבע)והיא מכונה הצהרה (Declaration).
מאפיינים (Properties) מאפשרים לנו לבחור אילו מההיבטים של האלמנט אנחנו רוצים לעצב, במקרה שלנו בחרנו לעצב את הצבע (color), ובאמצעות ערך המאפיין (Property value) שמופיע אחרי הנקודותיים, אנו קובעים את תוכן המאפיין, את הערך, במקרה שלנו באיזה צבע נרצה לצבוע את האלמנט. לאחר קביעת ערך המאפיין נוסיף נקודה פסיק לציין את סוף ההצהרה.
כל הצהרה צריכה להופיע בתוך סוגריים מסולסלות { }.
בין שם המאפיין לערך יופיעו נקודותיים :
לאחר שם ערך המאפיין נוסיף נקודה פסיק ;
לאור כל זאת כדי לקבוע כמה הצהרות עיצוביות לאלמנט בפעם אחת, פשוט נפריד כל הצהרה בנקודה פסיק – ;
See the Pen multiple Declaration by guerrilla.co.il (@guerilla) on CodePen.
כמו כן ניתן להחיל את אותה הצהרת קוד על מספר סלקטורים ע”י הפרדה בניהם בפסיק – , .
See the Pen Selecting multiple elements by guerrilla.co.il (@guerilla) on CodePen.
עד כה דיברנו על סלקטור מסוג מסוים אחד בלבד – סלקטור אלמנט – כלומר, בורר שבוחר על אילו אלמנטים להחיל את חוקי העיצוב באמצעות שם האלמנט, האלמנט שאת שמו רשמתי, רק הוא יושפע מההצהרה שאכתוב.
ישנם עוד סוגים רבים של סלקטורים שמאפשרים לנו לברור על אילו אלמנטים אנו מעוניינים להחיל את חוקי העיצוב במספר דרכים.
| שם הסלקטור | את מה הוא בוחר | דוגמה |
| סלקטור אלמנט | בוחר אלמנט HTML על פי שם התגית | p בורר את כל תגיות ה<P> במסמך |
| ID סלקטור | בוחר את האלמנט במסמך המכיל כאטריביוט את הID שצוין | הסלקטור my-element# יברור את האלמנט <“p id=“my-element> הקיים במסמך (ID במסמך HTML יכול להינתן לאלמנט בודד בלבד) |
| קלאס (class) סלקטור | בוחר את כל האלמנטים במסמך המכילים כאטריביוט את שם הקלאס שצוין | הסלקטור my-class. יברור את כל האלמנטים בעלי הקלאס שצוין למשל את התג <“p class=“my-class> ואת התג <“a class=“my-class> |
| אטריביוט (Attribute) סלקטור | בוחר את האלמנטים במסמך בעלי האטריביוט התואם | הסלקטור [img[src יברור את האלמנט
<“img src=“myimage.png> אך לא את האלמנט <img> |
| פסאודו סלקטור | בוחר אלמנט במסמך אבל רק כאשר הוא במצב נתון למשל במעבר עכבר מעליו | הסלקטור a:hover יבחר את האלמנט a במצב שהגולש מעביר עליו את העכבר, כלומר החוק העיצובי יתבצע כאשר העכבר יעבור על האלמנט ויחזור למצר הקודם כאשר העכבר יעזוב את האלמנט |
בפועל ישנם עוד הרבה סוגים ואפשריות של סלקטורים שמאפשרים לגשת לאלמנטים ולעצב אותם בדרכים שונות. תוכלו למצוא רשימה מפורטת של הסלקטורים בCSS באתר של הw3schools.
גופנים וטקסט
ראשית כדי לסגנן את הטקסט שלנו בגופנים מיוחדים אנחנו נזדקק להוסיף למסמך שלנו קישור לגופן בו אנו מעוניינים, גם את זה נעשה באמצעות התגית <link> שאותה נקונן בתוך תגית ה<head>. את תגית הלינק המתאימה לפונט בו אנו מעוניינים נקבל מהאתר של google font ע”י הצעדים הבאים:
- נחפש בדף את הפונט בו אנו מעוניינים.
- נלחץ על סימן הפלוס בצד ימין של התיבה
- נעתיק את תגית ה <link> מהלשונית שנפתחה בתחתית המסך
- מתחת לתגית הלינק נקבל גם את שם הקוד של הפונט אותו נצטרך להטמיע כערך לחוק הCSS שלנו כפי שנראה להלן.
למשל אם נרצה לעצב את הטקסט שלנו בגופן רוביק נכניס לתגית ה <head> את הלינק לגופן שנקבל מגוגל כך:
See the Pen google font link by guerrilla.co.il (@guerilla) on CodePen.
לאחר מכן נטרגט (כלומר נתפוס באמצעות סלקטור) את האלמנט עליו אנו רוצים להחיל את עיצוב הגופן באמצעות המאפיין – font-family שלו ניתן כערך את הקוד שקבלנו מגוגל, שלמעשה מצהיר את סוג הפונט.
See the Pen font family by guerrilla.co.il (@guerilla) on CodePen.
ישנם עוד מס’ מאפיינים שנוסיף לטקסט שלנו על מנת לשפר את המראה שלו:
נוכל להוסיף font-size ולתת לו ערך בפיקסלים על מנת לשנות את גודל הטקסט.
המאפיין text-align יעזור לנו לקבוע להיכן ליישר את הטקסט.
עם המאפיין line-height נקבע את גובה השורה.
ועם letter-spacing נקבע את ריווח האותיות.
See the Pen font&text by guerrilla.co.il (@guerilla) on CodePen.
מודל הקופסא
CSS מבוססת על קונספט שנקרא מודל הקופסא, מה שאומר שכל אלמנט בדף ברובד העיצובי בנוי כמו קופסא.
לאלמנט עצמו יש רוחב, גובה ומסגרת. בין המסגרת לתוכן האלמנט יש מרווח המכונה ריפוד (padding), מעבר למסגרת האלמנט יש מרווח/ספייס/חלל מוגדר שמפריד בין האלמנט לאלמנטים שסביבו המכונה margin.
ישנם מספר חוקים נפוצים לעיצוב קופסאות (נציין שגם תגית ה<body> עצמה היא קופסא).
background-color – קובע את צבע הרקע של חלקי התוכן והריפוד (padding).
כאשר ניתן את החוק הזה לסלקטור של התגית <html> זה ישפיע על כל הדף.
See the Pen background-color by guerrilla.co.il (@guerilla) on CodePen.
כפי שהזכרנו לכל אלמנט יש מסגרת (border) כדי לעצב את המסגרת נשתמש במאפיין border, שיכול לקבל שלושה ערכים בפעם אחת. הערך הראשון יציין את עובי המסגרת בפיקסלים, השני יקבע את סגנון המסגרת (פשוט, מקווקו, מסגרת כפולה וכו) והאחרון יקבע את צבע המסגרת.
See the Pen border by guerrilla.co.il (@guerilla) on CodePen.
בדוגמה לעיל קבענו שהמסגרת של הbody תהיה בעובי של שלושה פיקסלים, בסגנון פשוט ובצבע צהוב, ניתן לראות שיש רווח חיצוני למסגרת שהוא הmargin ורווח נוסף בין המסגרת לתחילת האלמנט הראשון (כותרת h2) שהוא הpadding (ריפוד).
כעת נגדיל את הpadding של הbody ונראה כיצד זה משפיע על עיצוב המסמך
See the Pen NavRyM by guerrilla.co.il (@guerilla) on CodePen.
כפי שניתן לראות מרווח השוליים בין המסגרת לתוכן הפנימי גדל ב40px מכל כיוון.
כעת נגדיל את הmargin ב40px מכל כיוון.
See the Pen margin by guerrilla.co.il (@guerilla) on CodePen.
כפי שניתן לראות כעת הרווח החיצוני של האלמנט <body> גדל ב40px מכל כיוון.
באמצעות מאפייני הרוחב – width, והגובה – height, ניתן לקבוע את הרוחב והגובה של האלמנט, זה כולל את התוכן עצמו הפדינג והמסגרת ללא המרג’ין.
במקרה ונקטין את רוחב הקופסא וגובהה, ייתכן והתוכן ייפלט החוצה, בכדי לקבוע איך להתנהג עם התוכן שנפלט (להסתיר, להציג, או לפתוח סרגל גלילה צדדי) נשתמש במאפיין overflow
בדוגמה הבאה אנחנו מקטינים את הרוחב והגובה של אלמנט ה<body> התוכן שנפלט החוצה במקרה זה ממשיך להיות מוצג, כיוון שזה הערך הדיפולטיבי (ברירת המחדל) של המאפיין overflow.
See the Pen width&height by guerrilla.co.il (@guerilla) on CodePen.
סיכום
ראינו מהי שפת CSS ולמה היא משמשת, סקרנו מס’ חוקים נפוצים בעיצוב עמוד HTML.
מדריכים מפורטים ניתן למצוא באתר של w3schools.com ובאתר המפתחים של מוזילה – MDN