Cascading Style Sheets

מתוך ויקיפדיה, האנציקלופדיה החופשית

יש לך הודעות חדשות (השווה לגרסה הקודמת).

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

תמונת מסך של עמוד CSS מעוצב

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

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

גליונות הסגנון נקראים "מדורגים" (באנגלית Cascading) משום שיש להם היררכיה: אם יש הגדרות שונות עבור אותו אלמנט בדף, הגדרות CSS הנמצאות בבלוק <style> בחלק ה-<head> של דף ה-HTML גוברות על הגדרות מקבילות הנמצאות בדף CSS חיצוני, והגדרות CSS הנמצאות בתוך תגית בדף (כערך של התכונה style) גוברות על הגדרות בבלוק <style>.

[עריכה] יתרונות

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

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

[עריכה] האלמנטים הניתנים לשינוי באמצעות 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".

[עריכה] הגדרת גליונות הסגנון

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

בכדי להגדיר מסך נשתמש בתכונה 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 מסמל אלמנט של קישור), בררת המחדל בדפדפנים, שאלמנט קישורי יש לו קו תחתי, כלל זה יגדיר את הסתרת הקו התחתי כאשר המשתמש עובר עם סמן העכבר מעל הקישור מבלי להקיש.

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