שפת CSS או בשם מלא (Cascading Style Sheets; גיליונות סגנון מדורגים) היא שפת מחשב מסוג שפת עיצוב המורכבת מתכונות וערכים שאותם מיישמים לאלמנטים (אלמנטיי HTML או לחלופין מבניי HTML) ועצמים נוספים (כמו פסאודו-אלמנטים) שאותם אנו רוצים לעצב.
מה זה "אלמנטיי HTML" או "מבניי HTML" או "פסאודו-אלמנטים" מצריך למידה טכנית-מעשית של שפת HTML עם מספיק CSS אבל לצורך הפישוט רק אגיד שאלה מבני מידע שאנו מציגים במסמך (או בדף אינטרנט) שניתן לעצב אותם עם CSS.
פקודת CSS תיהיה למשל "צבע הטקסט בדף מסוג X באתר" והערך יהיה למשל "שחור".
פקודה כזו תביא לצביעת כל הטקסט בכל דף מסוג X בצבע שחור כך שכל משתמש באתר שלנו יקבל טקסט בצבע שחור.
כמו שאפשר לשלוט על צבע אפשר גם לשלוט על גופן, גודל, רקע וכדומה ולא רק למבני טקסט אלא גם לתמונות, סרטונים, קבצי אודיו וכדומה.
שפת מחשב זו משמשת לעיצוב בסיס וכלכלי של כלל אתרי הווב הקיימים.
חשיבות למידת שפת CSS לבוני אתרים ומתחזקיי אתרים
לפי דעתי כל בעל אתר (המתחזק אתרו בעצמו, במידת מה) צריך ללמוד עקרונות יסוד ב-CSS.
אין זה הגיוני שבעל אתר יתקשר למתכנת ויזמין אצלו שעת עבודה בשביל שינויי CSS מינוריים כמו שינוי גודל תמונה מ-200 פיקסלים ל-400 פיקסלים או שינוי צבע רקע, סוג גבול וכדומה.
יש כמובן אופרציות הרבה יותר מורכבות שגם אותן ניתן לבצע לבד כמו יצירת מפרסים (grids) להצגת גלריית תמונות ריספונסיבית (כלומר, שמתאימה הן למובייל והן לדסקטופ) עם פקודה כמו flex, אבל זה העיקר.
עבודה עם שפת CSS
במסגרת העבודה עם השפה כל גיליון CSS משויך לתגית HTML, כאשר פעולה זו יכולה להיעשות בשלושה צורות:
- הוספת הגיליון בתוך התגית HTML עצמה
- הוספת הגיליון בסקטור המיוחד לכך (באזור ה Head, של דף ה HTML)
- הוספת גיליונות רבים לתוך קובץ CSS המהווה מחסן שלהן.
כיום השליטה על ה-CSS היא פשוטה מאד שכן היא נעשית בעיקר על פי הדרך השלישית (קובץ גליונות), בהם לכל מאפיין CSS מספר שורה שקל מאד לאיתור ולשינוי. זוהי תורה טובה שלימודיה יכולים להטיב מאד עם בעלי האתרים.
לדעתי CSS הוא כלי שכל בעל אתר ווב (וכל אדם המעוניין להיכנס לעולם הווב) צריך להכיר לפחות ברמת הפקודות הבסיסיות והיכולת לשנות (לקסטם, To customize) באופן בסיסי, ערכת עיצוב קיימת.
בעברי הרחוק, כשבניתי אתר הווב המשמעותי הראשון שלי (אז דרך חברה ששכרתי את שירותיה), גיליתי כמה חשוב לבעל אתר לדעת CSS וכמה הדבר יכול להקל עליו בעת העבודה עם החברה המפתחת.
דרכים לעבוד עם שפת CSS
להלן מספר דרכים אפשריות לעבוד עם CSS. אם אין לך כוונה לעסוק ב CSS כלל אין צורך לקרוא פרק זה.
אם משהו לא ברור, אפשר לקחת אצלי שיעור פרטי בנושא CSS ואני אסביר את העניין.
1) ייחוס עיצוב תוך-קבצית ללא סלקטור
ייחוס עיצוב תוך-קבצית ללא סלקטור היא שיטה לייחוס שפת עיצוב למבנים.
ניקח לדוגמה את קוד ה HTML-CSS הבא:
<div style="background-color: red">
בקוד העיצוב לעיל הגדרתי צבע רקע של מבנה מסוג div (תג HTML מסוג div).
לשיטה יתרונות וחסרונות אך מניסיוני יש הסתייגות כללית מן השימוש בה למעט בתוכנות קטנות של דף אחד כי שימוש מרובה בה יגרום לחוזרניות בשל שעתוק הגדרות זהות או דומות למקומות שונים במקום קריאה מקוצרת להן ממקום מרוחק (אם משפט זה לא היה ברור הוא אמור יהיה להתברר מהכרת שתי השיטות האחרות לייחוס עיצוב, אותן אציג להלן).
2) ייחוס עיצוב תוך-קבצית עם סלקטור
ייחוס עיצוב תוך-קבצית עם סלקטור היא שיטת ייחוס עיצוב למבנה דרך סלקטור שהוגדר בקובץ שמכיל את המבנה עצמו.
בקובץ ה HTML-CSS להלן שני תגים שונים, תג div ותג span אשר שניהם קיבלו צבע רקע התואם את הצבע העיקרי באתר (p כאן פירושו primary).
הקוד:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--p: red;
--s: green;
--a: blue;
}
div {background-color: var(--p)}
span {background-color: var(--p)}
</style>
</head>
<body>
<div>myDivision_1</div>
<span>myDivision_2</span>
</body>
</html>3) ייחוס עיצוב חוץ-קבצי עם סלקטור
ייחוס עיצוב חוץ-קבצי עם סלקטור הוא ייחוס עיצוב למבנה דרך קובץ חיצוני (כלומר, קובץ שאיננו הקובץ שמכיל את קוד המבנה) וזאת בהתבסס על קישור בין הקבצים.
בקוד העיצוב להלן הגדרתי עיצוב לכל המבנים מסוג div בקובץ אשר מכיל את קוד העיצוב.
בקובץ ה HTML נכתוב את הקוד הבא ובכך נקשור אותו לקובץ ה-CSS:
<link
rel="stylesheet"
href="styleSheet.css"
type="text/css"
/>
בקובץ ה CSS נכתוב את הקוד הבא:
:root { --p: red; --s: green; --a: blue; }
.menu-general {background: gray}
בקובץ ה HTML נכתוב את הקוד הבא (בו נעשה שימוש בהגדרות העיצוב שבקובץ ה-CSS החיצוני):
<div style="color: var(--p)">Our first div</div> div class="menu-general">Our second div</div>
בכך יש לנו מבניי HTML שקיבלו הוראות עיצוב אשר נמצאים בקובץ CSS חיצוני.
