פורמט לעיצוב דפי אינטרנט מוויקיפדיה, האנציקלופדיה החופשית
גיליונות סגנון מדורגים (באנגלית: Cascading Style Sheets ובראשי תיבות: CSS) הם פורמט לעיצוב דפי אינטרנט. הגיליונות קובעים את עיצובם של תגים ב-HTML, XHTML וכל שפה דומה ל-XML לבניית אתרי אינטרנט.
יש להשלים ערך זה: בערך זה חסר תוכן מהותי. אין פירוט כלל על תקן CSS3, על ההבדלים, על הגרסאות ועל התמיכה בדפדפנים השונים וכן על משתנים. ייתכן שתמצאו פירוט בדף השיחה. | |
CSS נוצר במטרה להפריד בין תוכן ומבנה דפי האינטרנט לבין עיצובם: עד ליצירת ה-CSS בידי קבוצת התקינה W3C ב-1995, נכתבו תוכן האתרים וסגנון העיצוב שלהם באותו דף HTML. כתוצאה מכך, הפך קוד ה-HTML למסובך ובלתי קריא, ושינויים עיצוביים באתר שלם דרשו מעבר דף אחר דף. באמצעות CSS ניתן למקם הגדרות עיצוב בקובץ יחיד, ששינוי בו ישתקף בבת אחת בכל הדפים העושים בו שימוש.
גליונות הסגנון נקראים "מדורגים" (באנגלית: Cascading) משום שהגדרות סגנון שונות נבנות זו על גבי זו. לדוגמה, יהיו הגדרות סגנון מסוימות החלות על כל האלמנטים מסוג "פסקה" (<p>), והגדרות אחרות התקפות רק לסוגים מסוימים של פיסקאות. במקרה של סתירה לגבי תכונת עיצוב (property) מסוימת, אחד הכללים הוא שההגדרה המתייחסת לסוג מסוים של פיסקאות תגבר על הגדרה המתייחסת לכל הפיסקאות משום שהיא ספציפית יותר, וישנם כללים נוספים. במקרה שאין עדיפות אחרת, ההגדרה המופיעה אחרונה תגבר.
הפרדה זו יוצרת מספר יתרונות:
באמצעות ה-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">
ישנן ארבע צורות בוררים להגדיר עיצוב אלמנטים:
התחביר של גיליון העיצוב פשוט למדי וכולל רשימת כללים. כל כלל כולל בורר ובלוק הצהרתי. כל בלוק הממוקף בתוי סוגריים מסולסלים ({}) כולל רשימה של מאפיינים המופרדים אחד מהשני בנקודה-פסיק (;). כל מאפיין מורכב משמו, נקודתיים (:) וערך.
דוגמה של הגדרות בקובץ 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 לאסוף רעיונות לעיצוב לוגו חדש.[1] ב-12 בנובמבר 2024 נבחר העיצוב של חאבי אגילר כלוגו הרשמי של CSS.[2] הלוגו החדש ממוקם על רקע בצבע הקס #663399[3] הידוע גם בשם Rebecca Purple. הצבע נקרא על שם בתו של המפיץ הגדול ביותר של CSS אריק א. מאייר, רֶבֶּקָה,[4] שנפטרה מגידול במוח זמן קצר לאחר יום הולדתה השישי.
Seamless Wikipedia browsing. On steroids.