Home אינטרנט מדריך למתחילים: CSS

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

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

במידה ולא קראתם את רשימת הקיצורים והיעברותים שלי (כי עם כל הכבוד, זה ממש מעיק כל פעם לעבור בין שפות כדי לכתוב css או html או משהו בסגנון הזה) אני מציע לקפוץ לרגע לקרוא את הפוסט הזה, טוב – את ההתחלה שלו לפחות, כדי לא להסתכל על המסך ולהגיד ווטפ?! (שזה WTF בעברית).

נתחיל.

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

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

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

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

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

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

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

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

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

ID ו-Class

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

ID
תגית ID נועדה להגדיר אלמנט יחיד וספציפי, והסימון שלו הוא סולמית (#). והנה הדוגמא:

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

Class
תגית Class, להבדיל מתגית ID מגדירה עיצוב לקבוצה של אלמנטים, אפשר להשתמש בתגית הזו למספר רב של אלמנטים שונים הדורשים את אותה הגדרה. גם לתגית זו יש סימן ייחודי – נקודה (.), והנה דוגמא:

אפשר להתחכם עוד יותר ולהגדיר תגיות שם שיושפעו מ-Class. בדוגמא הזו ניתן לראות איך כל פסקה עם Class="right" תתיישר לימין:

עכשיו, זוכרים את השטויות שפיירפוקס עושה עם מספרים ב-ID? אז אקספלורר עושה את אותו הדבר, רק עם Class. ז'תומרת – אל תתנו שמות Class שמתחילים בספרות כי זה לא יעבוד באקספלורר.

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

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

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

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

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

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

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

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

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

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

כמו תמיד, היה נפלא. נתראה 🙂

Leave a Reply

Your email address will not be published.