גיליונות סגנון מדורגים – הבדלי גרסאות

מתוך ויקיפדיה, האנציקלופדיה החופשית
תוכן שנמחק תוכן שנוסף
MerlIwBot (שיחה | תרומות)
שורה 164: שורה 164:
* [http://w3schools.com/css לימוד CSS] באתר w3schools
* [http://w3schools.com/css לימוד CSS] באתר w3schools
* [http://www.bekaloot.co.il/%D7%A7%D7%98%D7%92%D7%95%D7%A8%D7%99%D7%94-503-CSS.aspx מדריכי CSS בעברית]
* [http://www.bekaloot.co.il/%D7%A7%D7%98%D7%92%D7%95%D7%A8%D7%99%D7%94-503-CSS.aspx מדריכי CSS בעברית]
* [http://xhtml.co.il/he/CSS3 CSS3, כל המאפיינים] בית הספר XHTML

[[קטגוריה:פיתוח יישומי ווב]]
[[קטגוריה:פיתוח יישומי ווב]]
[[קטגוריה:HTML]]
[[קטגוריה:HTML]]

גרסה מ־22:53, 29 בינואר 2013

המונח "CSS" מפנה לכאן. לערך העוסק בלהקת אינדי פופ-רוק ברזילאית, ראו Cansei de Ser Sexy.

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

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

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

יתרונות

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

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

גרסאות

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

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

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

  • p - פסקה
  • table - טבלה
  • a - לינקים
  • h1,h2,h3,h4 - כותרות
  • .שם - מחלקה
  • body - גוף המסמך
  • table a - לינק שבתוך טבלה
  • ul - רשימת נקודות
  • ol - רשימה ממוספרת
  • li - פריט ברשימה
  • img - תמונה
  • @media print, tv, projection - אמצעי תצוגה אחרים.

שמות לדוגמה של תכונות

  • background - צבע רקע
  • color - צבע
  • margin - שוליים
  • font-weight - רוחב גופן
  • scrollbar-face-color - צבע הלחיצים בסרגל הגלילה
  • list-Style-image - מאפיין התמונה של רשימה

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