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

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

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

נתחיל.

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

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

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

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

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

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

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

[css] h1 {color:red; text-align:center; font-size:12px;}
[/css]

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

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

[css] h1 {
color:red;
text-align:center;
font-size:12px;
}
[/css]

ID ו-Class

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

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

[css] #radiogaga1 {
color:pink;
text-align:right;
font-size:24px;
}
[/css]

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

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

[css] .right {text-align:right;}
[/css]

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

[css] p.right {text-align:right;}
[/css]

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

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

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

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

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

[html] <head>
<link rel="stylesheet" type="text/css" href="radiogaga.css" />
</head>
[/html]

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

[css] hr {color:pink;}
p {margin-right:20px;}
body {background-image:url("images/background.png");}
[/css]

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

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

[html] <style type="text/css">
hr {color:pink;}
p {margin-left:28px;}
body {background-image:url("images/diffrentbackground.png");}
</style>
[/html]

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

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

[html] <p style="color:pink;margin-right:20px">פסקה מגניבה</p>
[/html]

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

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

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

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

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

    1. מה אתה מחמיא לעצמך? זה לא רק בשבילך! 🙂 חשבתי שאולי כדאי לכתוב כמה מילים על סיאסאס כדי לתת אפשרות גם למי שלא מכיר ויודע 🙂

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

  3. היי, אז מתי בעצם אתה מתחיל להסביר כיצד עושים CSS לתבנית וורדפרס? 🙂
    תודה על הכל דרך אגב…

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

  5. כתבה נהדרת! צחקתי, בכיתי במקומות הנכונים (הטמל 3.2 עליו השלום), ולמדתי ימבה דברים חדשים.

    איך לא קראתי את זה קודם??

    מחכה לכתבה הבאה..

  6. אהבתי את ההומור.. והבהירות.

    ברשותך אם אפשר שאלה.. איך הכי נכון להגדיר ב- css
    את תכונות האתר כאתר הכתוב בעברית?

    הכוונה שלי – האם אמורים להגדיר את הכיוון עבור כל אלמנט בנפרד?
    או שיש צורה מרכזית אחת לעשות זאת לגבי כל דפי האתר?

    תודה.
    (ויישר כוח! 😉

    1. תודה יוניקית!

      לשאלתך, בד”כ לאתרים שהשפה שלהם היא מימין לשמאל (כלומר – עברית וערבית 🙂 ) כדאי להכניס ממש בתחילת ה-CSS את השורה הבאה (מומלץ תחת הגדרת הhtml הראשית):
      direction: rtl;

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

      נתראה!

      1. מכיר את זה, שכשמתחילים ללמוד תחום חדש..
        מילים שנאמרות כבדרך אגב שולחות אותך לשעות של חקירה?

        ובכן.. “ממש בתחילת ה- CSS… מומלץ תחת הגדרת ה- html הראשית”

        אני מניחה ששמת לב ששאלתי היכן נכון “לתקוע” את הצהרת ה- rtl
        באופן שכ-ל (!) דפי האתר יושפעו ממנו

        (אפשר גם בכל ראש דף html – אבל אם יש אתר עם הרבה דפים, זה קצת מפספס את הפואנטה של ה- CSSׂ)

        ואני גם מניחה שאתה אכן מתכוון שיש הגדרת html ראשית
        בת-ו-ך מסמך ה- CSS.

        ועכשיו אני הולכת לבדוק מה זה בכלל הגדרת html ראשית
        בתוך מסמך CSS. כי עד הרגע לא ידעתי בכלל שיש דבר כזה
        🙂

        תודה!
        (שוב)

        1. אז ככה,

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

          html {

          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          }

          אגב, כדי לראות את זה בצורה טובה אני ממליץ להעתיק לכתבן או משהו וליישר לשמאל 🙂

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

          בתג הזה אפשר להכניס את ה-rtl.

          מקווה שעזרתי וחסכתי חיפושים 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

יש מצב שתאהבו גם את זה