CSS / מדריך למתחילים

באמצעות שימוש ב-CSS ניתן לייצר אחידות לעיצוב בכל האתר וניתן גם לשנות תצוגה של אלמנט בצורה גורפת על ידי שינוי של קובץ אחד. מדריך CSS למתחילים

צילום: flickr, cc-by, geirarne

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

נתחיל.

כמה עובדות שתמיד (!) החסירו שינה מעינכם על CSS:

1. CSS אלו ראשי תיבות של Cascading Style Sheets (שזה “גליונות סגנון מדורגים” על פי גוגל טרנסלייט)
2. סגנונות התווספו ל-HTML4 כדי לפתור בעיות.
3. הסגנונות השונים מגדירים איך להציג אלמנטים ב-HTML
4. גליונות עיצוב חיצוניים יכולים לחסוך ים עבודה.
5. גליונות עיצוב חיצוניים מאוחסנים בקבצי CSS
6. כל הדפדפנים תומכים ב-CSS.

למעשה, תגיות וגליונות עיצוב פתרו הרבה בעיות (או אחת ממש גדולה). HTML מעולם לא נועד להכיל תגיות עיצוב, הוא נועד להגדיר ולהציג את התוכן של המסמך. ברגע שנכנסו לפעולה תגיות עיצוב כמו <פונט> או הגדרות צבעים (החל מ-HTML3.2 ניתן היה לזהות עליה משמעותית בהתאבדויות בקרב מפתחי אתרי אינטרנט. כאשר היו בונים אתר אינטרנט גדול היה צורך להגדיר בכל עמוד תגיות עיצוב שונות, דבר שהפך את התהליך לסיזיפי, ארוך מאוד, יקר מאוד וארוך (כבר אמרתי שזה לקח מלא זמן?).

ואז, קונסורציום הרשת הכלל עולמית (W3C, ויש כזה אפילו בישראל) יצר את קובץ ה-CSS (*מוזיקת מלאכים עם הללויה מרגש ברקע*). החל מ-HTML4 כל תגיות ואלמנטים עיצוביים הוסרו מעמוד ה-HTML והועברו לקובץ עיצוב חיצוני.

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

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

כדי לנסות ולהסביר בצורה ברורה יותר, אשתמש בדוגמא:
h1 {color:red; text-align:center; font-size:12px;}

אז מה יש לנו כאן?
h1 – שם תג
{color:red; text-align:center; font-size:12px;} – ההגדרות, בתוך סוגריים מסולסלים, כי ככה זה.

אגב, אני בדרך כלל מסדר את קבצי ה-CSS שלי בצורה שתהיה יותר נוחה וקריאה:
h1 {
color:red;
text-align:center;
font-size:12px;
}

בנוסף להגדרות של אלמנטים ב-HTML, רכיב ה-CSS מאפשר התאמה אישית של תגיות ID ותגיות Class.

ID
תגית ID נועדה להגדיר אלמנט יחיד וספציפי, והסימון שלו הוא סולמית (#). והנה הדוגמא:
#radiogaga1 {
color:pink;
text-align:right;
font-size:24px;
}

אגב, לא מומלץ לתת שמות ID שמתחילים עם מספרים, פיירפוקס לא יודע איך להתמודד עם זה.

Class
תגית Class, להבדיל מתגית ID מגדירה עיצוב לקבוצה של אלמנטים, אפשר להשתמש בתגית הזו למספר רב של אלמנטים שונים הדורשים את אותה הגדרה. גם לתגית זו יש סימן ייחודי – נקודה (.), והנה דוגמא:
.right {text-align:right;}
אפשר להתחכם עוד יותר ולהגדיר תגיות שם שיושפעו מ-Class. בדוגמא הזו ניתן לראות איך כל פסקה עם תתיישר לימין:
p.right {text-align:right;}
עכשיו, זוכרים את השטויות שפיירפוקס עושה עם מספרים ב-ID? אז אקספלורר עושה את אותו הדבר, רק עם Class. ז’תומרת – אל תתנו שמות Class שמתחילים בספרות כי זה לא יעבוד באקספלורר.

איך מטמיעים CSS?

קיימות שלוש דרכים להכניס גליון עיצוב:
1. גליון עיצוב חיצוני (כן!)
2. גליון עיצוב פנימי (רק אם חייבים)
3. הגדרה בכל שורה (לא, למען השם, לא!)

אבל ברצינות, לכל צורת הטמעה יש סיבה והיא מתאימה לדברים שונים.

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

דוגמא לקובץ כזה אפשר לראות ממש כאן:
hr {color:pink;}
p {margin-right:20px;}
body {background-image:url("images/background.png");}

גם כאן יש לנו חוסר תאימות: אם תשאירו רווחים בערכים שלכם (כלומר תכתבו 20 px במקום 20px) תוכלו לראות את זה נפלא באקספלורר אבל פיירפוקס יתעלם מזה. כרום ואקספלורר מתעלמים לחלוטין אם לא מגדירים את סוג היחידה (כלומר מוותרים על ה-px או ה-em וכו’).

במידה ויש לנו עמוד שלו צריך להיות סגנון ייחודי נשתמש בגליון עיצוב פנימי. הנה דוגמא:

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

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

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

פורסם לראשונה בבלוג Gaga Designs

Avatar

אוראל אסיה

ילד 1983 וירושלמי בלב ובנפש. מעצב גרפי, חי ונושם רשת (ולעיתים קרובות גם קולה). מגדל שתי חתולות (שפרה [ע"ש] ורוקסי [ללא סיבה מיוחדת], יבדל"א), קצין במיל' ותותח על. כותב בעיקר דברים מתישים על אינטרנט, תקשורת ועיצוב וכמובן אוהב שמגיבים לפוסטים, שנרשמים לעדכונים ויאללה בלאגן.

הגב

7 תגובות על "CSS / מדריך למתחילים"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
תומר כהן
Guest
ברצוני לעשות קצת סדר לגבי הבעיות של חוסר התאימות בין דפדפנים, כהגדרתך. יחידות יופיעו תמיד עם סוג היחידה צמוד אליה. כלומר לא כותבים ‪20 px‬ אלא 20px,‏ 2em,‏ 75% וכו’. יוצאות מן הכלל הן יחידות שמהוות שבר (למשל opacity), וגם המספר אפס שניתן להשמיט את סוג היחידה כי 0em=0px=0mm=0. למידע נוסף: http://www.w3.org/TR/CSS21/syndata.html#values שמות של מזהים (id) ומחלקות (class) אינם יכולים להתחיל בספרה. ישנם מספר חוקים נוספים, כגון איסור על שימוש במספר תווים שעשויים לבלבל את הדפדפן, והם מצויינים כאן: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier לסיכום, כפי שניתן לראות, ההתנהגות הבעיתית שתיארת מתוארת כראוי במפרט של CSS על פיו נבנתה התמיכה ב־CSS בדפדפנים השונים. כדי… Read more »
שושו השועל
Guest

תודה. אהבתי במיוחד.
שאלה האם ע”מ לעצב ערכת נושא ב-WordPress משתמשים ב CSS?

שושו השועל
Guest

תודה. אהבתי במיוחד.
שאלה: האם ע”מ לעצב ערכת נושא ב-WordPress משתמשים ב CSS?

אוראל
Guest

אהלן שושו!

אפשר ומומלץ לעצב ערכות עיצוב ב-wordpress באמצעות CSS.
התחלתי לכתב מדריך לכתיבת תבנית בוורדפרס בבלוג שלי, תציץ – תראה :)

חי
Guest

הצחיק אותי ההסבר שלך על איך הוא נולד ומה היה לפני
ולמעשה אני חייב להגיד זה נכון!!!!
תנסו אתם ליבנות בניין עם 258 מעצבים שונים (אחד לכל חדר) ולשמור על קו עיצוב אחיד

גלעד
Guest

“אגב, לא מומלץ לתת שמות ID שמתחילים עם מספרים, פיירפוקס לא יודע איך להתמודד עם זה”, לא מומלץ כי זה לא התקן (הערך של class דווקא יכול להתחיל עם מספר):
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id
http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name

אבישי בר
Member

מדריך מעולה!

wpDiscuz

תגיות לכתבה: