גיליונות סגנון מדורגים

גיליונות סגנון מדורגים (באנגלית: Cascading Style Sheets ובראשי תיבות: CSS) הם פורמט לעיצוב דפי אינטרנט. הגיליונות קובעים את עיצובם של תגים ב-HTML,‏ XHTML וכל שפה דומה ל-XML לבניית אתרי אינטרנט.

CSS נוצר במטרה להפריד בין תוכן ומבנה דפי האינטרנט לבין עיצובם: עד ליצירת ה-CSS בידי קבוצת התקינה W3C ב-1995, נכתבו תוכן האתרים וסגנון העיצוב שלהם באותו דף HTML. כתוצאה מכך, הפך קוד ה-HTML למסובך ובלתי קריא, ושינויים עיצוביים באתר שלם דרשו מעבר דף אחר דף. באמצעות CSS ניתן למקם הגדרות עיצוב בקובץ יחיד, ששינוי בו ישתקף בבת אחת בכל הדפים העושים בו שימוש.

גליונות הסגנון נקראים "מדורגים" (באנגלית: Cascading) משום שהגדרות סגנון שונות נבנות זו על גבי זו. לדוגמה, יהיו הגדרות סגנון מסוימות החלות על כל האלמנטים מסוג "פסקה" (<p>), והגדרות אחרות התקפות רק לסוגים מסוימים של פיסקאות. במקרה של סתירה לגבי תכונת עיצוב (property) מסוימת, אחד הכללים הוא שההגדרה המתייחסת לסוג מסוים של פיסקאות תגבר על הגדרה המתייחסת לכל הפיסקאות משום שהיא ספציפית יותר, וישנם כללים נוספים. במקרה שאין עדיפות אחרת, ההגדרה המופיעה אחרונה תגבר.

הלוגו הרשמי של CSS נכון ל-12 בנובמבר 2024

יתרונות

הפרדה זו יוצרת מספר יתרונות:

• עיצוב גלובלי – בראש ובראשונה יצירת תבנית גלובלית לכל דפי האתר. שינוי קובץ ה-CSS ישתקף בכל דפי האתר, ולא יצריך התערבות פרטנית בכל דף ודף.
• קוד נקי יותר – הורדת המורכבות והסיבוכיות ביצירת דפי HTML, באמצעות הוצאת הוראות העיצוב מתוכם.
• הפרדת רשויות – הפרדה נוחה בין אנשי המקצוע השונים שעובדים ביצירת האתר. העיצוב והגרפיקה נעשים על ידי אנשי העיצוב בקבצים נפרדים, והתכנים נכתבים על ידי אנשי התוכן בקוד נקי מהגדרות עיצוב.
• התאמה אישית – ההפרדה בין העיצוב לתכנים מאפשרת הצגה מותאמת למשתמש, כפי שהדבר נעשה למשל בוויקיפדיה, שבה כל משתמש יכול לבחור באיזה עיצוב, מתוך עיצובים אחדים המוצעים לו, ברצונו לצפות באתר.
• התאמה לפלטפורמות שונות – שימוש ב-CSS מאפשר יצירת גרסאות להדפסה, גרסאות להצגה על מדיומים אחרים (כמו מחשבי כף יד, טלפונים סלולריים טלוויזיה וכדומה). CSS תומכת גם ביכולות קוליות ובכתב ברייל.
• התאמה לגודלי מסך שונים-עיצוב רספונסיבי – שימוש ב-CSS 3 Media Queries נותן אפשרות לעצב את האתר לגודלי מסך שונים. בין השאר יתרון זה, נותן אפשרות לעצב את האתר למכשירים ניידים.

גרסאות

• CSS1 הוכרז בדצמבר 1996, במסגרתו הוגדר שימוש רשמי לתמיכה בעיצוב אלמנטים דוגמת: גופנים ומניפולציות בגופנים, צבעי טקסט ואלמנטים שונים, הגדרות טקסט כגון גובה ומרווחי שורה, יישור תכנים, ריפודים, מרווחים, מסגרות ועוד. תקן זה אינו נתמך עוד.
• CSS2 הוכרז במאי 1998, ושופר בהמשך על ידי CSS2.1. גרסה זו כוללת יכולות חדשות דוגמת מיקומי אובייקטים, סוגי מדיה ואלמנטים של גובה.
• CSS3 הוכרז לראשונה ביוני 1999 והוכרז כתקן רשמי (נכון ל-2017). נכון למרץ 2017, ישנם קרוב ל-40 תקנים מאושרים. תקן זה צפוי לכלול אלמנטים גרפיים רבים כגון שינויי צבע וכיוון דינאמיים, צללים, שקיפות, פינות מעוגלות ועוד.

האלמנטים הניתנים לשינוי באמצעות CSS

באמצעות ה-CSS אפשר לשנות את מראה האלמנטים שבדף ה-HTML. הנה כמה מהאופציות הקיימות:

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

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

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

תחביר

תחביר ה-CSS הבסיסי כולל שלושה חלקים:

selector { property : value; }

הסלקטור הוא ה"בוחר" ומגדיר את האלמנט שאותו אנו רוצים לעצב. הוא יכול להיות שם של אלמנט, למשל: p, div, span, h1, input (פסקה, בלוק טקסט, קטע טקסט, כותרת ושדה-קלט בהתאמה) וכדומה.

ה-property "תכונה" היא התכונה שאנו רוצים לשנות באלמנט הנבחר. אחריה יבואו נקודתיים.

ה-value "ערך" היא הערך שאנו רוצים לתת לתכונה של האלמנט הנבחר. לדוגמה:

p { color : blue; }

אנו בוחרים את האלמנט p, ומשנים את התכונה color לערך blue.

בוררים

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

<style>
p#article { color : blue; }
p#letter { color : red; }
</style>

לאחר מכן, כדי להצהיר על איזה סוג של פסקה מדובר, נעשה שימוש ב-id כך: בתוך תגית נכתוב את הקוד הבא:

p id="article"

והטקסט שייכתב יקבל את הגדרות העיצוב כפי שהוגדרו לפסקה מסוג "article".

class הוא למעשה בורר משוכלל יותר מ-id והוא מאפשר להחיל סגנון מסוים על אלמנטים רבים ואף שונים.

הגדרת גליונות הסגנון

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

כדי להגדיר מסך נשתמש בתכונה media, ונכתוב את השורה הבאה:

<style media="screen" type="text/css">

ישנן ארבע צורות בוררים להגדיר עיצוב אלמנטים:

1. כל האלמנטים

יעשה שימוש בבורר *

2. על פי שם האלמנט

לדוגמה לכל הכותרות המשניות – יעשה שימוש בבורר 'h2'

3. צאצא

לדוגמה אלמנט 'a' שהוא צאצא של אלמנט 'li' – יעשה שימוש בבורר 'li a'

4. מחלקה או תכונת id

לדוגמה לאלמנטים מסוג "class="class" id="id – יעשה שימוש בבורר class. או בבורר id#

התחביר של גיליון העיצוב פשוט למדי וכולל רשימת כללים. כל כלל כולל בורר ובלוק הצהרתי. כל בלוק הממוקף בתוי סוגריים מסולסלים ({}) כולל רשימה של מאפיינים המופרדים אחד מהשני בנקודה-פסיק (;). כל מאפיין מורכב משמו, נקודתיים (:) וערך.

צורת תחביר

בורר {תכונה:ערך; תכונה:ערך;}

דוגמה של הגדרות בקובץ CSS:

p {
  font-family: "David", serif;
}

h2 {
  font-size: 110%;
  color: red;
  background: white;
}

.note {
  color: red;
  background: yellow;
  font-weight: bold;
}

p#paragraph1 {
  margin: none;
}

a:hover {
  text-decoration: none;
}

כאן יש חמישה כללים: p, h2, .note, p#paragraph1 and a:hover

דוגמה להצהרה הוא המשפט color: red

בשני החוקים הראשונים, p (פסקה) ו-h2 (כותרת ברמה שנייה), מוקצה סגנון עיצובי לאלמנטים של HTML. גופן הפסקה יהפוך לגופן מסוג David, ואם הוא איננו קיים, הגופן יהיה serif. הכותרת ברמה שנייה תהיה בצבע חזית אדום על רקע צבע לבן וגודלו יהיה 110%.

הכלל השלישי מראה הגדרה של מחלקת CSS, שאפשר להקצות אותה לכל אלמנט מסמכי, ולהשתמש בתכונות של המחלקה. לדוגמה:

<p class="note"> פסקה זו תצויר באדום מודגש עם רקע צהוב </p>

הכלל הרביעי ישפיע על אלמנט p שתכונת ה-ID שלו נקבע ל-paragraph1, והוא יהיה ללא שוליים.

הכלל האחרון יגדיר מעבר עכבר מעל קישור (a מסמל אלמנט של קישור), ברירת המחדל בדפדפנים, שאלמנט קישורי יש לו קו תחתי, כלל זה יגדיר את הסתרת הקו התחתי כאשר המשתמש עובר עם סמן העכבר מעל הקישור מבלי להקיש.

ניתן לשלב הערות למטרת תיעוד בגיליון העיצוב באופן הבא: /* הערה */

עדכון לוגו

ב-1 באוגוסט 2024 החלה קבוצת הקהילה CSS-Next לאסוף רעיונות לעיצוב לוגו חדש. ב-12 בנובמבר 2024 נבחר העיצוב של חאבי אגילר כלוגו הרשמי של CSS. הלוגו החדש ממוקם על רקע בצבע הקס #663399 הידוע גם בשם Rebecca Purple. הצבע נקרא על שם בתו של המפיץ הגדול ביותר של CSS אריק א. מאייר, רֶבֶּקָה, שנפטרה מגידול במוח זמן קצר לאחר יום הולדתה השישי.

ראו גם

• הנפשות CSS

קישורים חיצוניים

• אתר האינטרנט הרשמי של גיליונות סגנון מדורגים
• אתר האינטרנט הרשמי של גיליונות סגנון מדורגים
• מדריך CSS (עמ' 17), באתר http://he.HTML.net
• מדריך CSS פלנט
• מדריך CSS בעברית, באתר וובמאסטר
• לימוד CSS, באתר w3schools
• מדריכי CSS בעברית, באתר bekaloot