CSS למתחילים: הסבר על השפה

CSS למתחילים: הסבר על השפה

  • פרסומת

מה זה CSS?

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

תפקידה של שפת CSS היא להגדיר את המראה של האלמנטים הכתובים בשפת HTML. להלן כמה עובדות על השפה:

  • CSS הן ראשי תיבות של Cascading Style Sheets.
  • CSS נוצר כדי לשלוט במראה האתר.
  • ניתן לשמור CSS בקובץ חיצוני, ובכך לחסוך הרבה עבודה ושטח אחסון.
  • קבצי CSS נשמרים בסיומת *.css

איך משתמשים ב-CSS?

ישנן שלוש דרכים בהן ניתן להשתמש ב-CSS

  • על ידי קובץ חיצוני
  • על ידי הוספה בראש העמוד, בין תגיות ה- <head>.
  • על ידי הוספה בגוף העמוד, בסמוך לאותו אלמנט אותו אנו מעוניינים לעצב.

אם נרצה להגדיר את אלמנט הכותרת <h1> לדוגמה, ולתת לו צבע אדום, נוכל לעשות זאת כך:

<!doctype html>
<html>
    <head>
        <style type="text/css">
          h1 {color:black}
          h1.red {color:red}
        </style>
    </head>
    <body>
        <h1>זוהי כותרת רגילה</h1>
        <h1 class="red">זוהי כותרת אדומה</h1>
    </body>
</html>

כמו שאתם רואים, כל מה שנכתב בין תגיות ה- <style> נכתב בשפת CSS. שם הגדרנו שתי כותרות: שחורה ואדומה. כל כותרת שתכתב עם הקלאס class="red" תקבל צבע אדום. כל כותרת שתכתב ללא קלאס תהיה בצבע שחור. בשפת CSS המאפיין color אחראי על צבע האותיות. הנקודה שאתם רואים בשורה h1.red אומרת בשפת CSS שזהו קלאס (class). כל מה שנמצע בין הסוגריים המסולסלות {} הינם המאפיינים של אותו אלמנט.
להלן התוצאה של הקוד הנ"ל:
עיצוב כותרות בשפת CSS

הוספת CSS כקובץ חיצוני

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

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

הגדרת CSS באלמנט עצמו (Inline CSS)

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

<body>
    <h1 style="color:red">זוהי כותרת אדומה</h1>
</body>

התנגשויות ברמות שונות של CSS

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

  • בגוף העמוד (inline css)
  • בראש העמוד (embedded css)
  • בקובץ חיצוני (external css)
  • ברירת מחדל של הדפדפן (browser default css)