מבוא ל CSS

CSS היא שפה המשמשת לעיצוב התוכן במסמך HTML. באמצעותה ניתן לקבוע, למשל, צבעים, כיוון טקסט, סוג גופן וגודלו.

מבנה של כלל עיצוב

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

p {
    color: blue;
    font-size: 20px;
}

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

דרכים לשילוב CSS

עיצוב בתגית עצמה

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

<p style="color: blue; font-size: 20px;">
    Hello!
</p>

עיצוב בתגית style

ניתן לכתוב כללי עיצוב בתוך תגית style, הנמצאת בחלק head של מסמך ה־HTML. כל כלל חל על הרכיבים המתאימים לבורר באותו מסמך.

<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>

עיצוב בקובץ נפרד

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

לדוגמה, בקובץ העיצוב שנקרא style.css נכתוב:

p {
    color: blue;
    font-size: 20px;
}

במסמך ה־HTML נוסיף בתוך head את הקישור לקובץ:

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

הערך stylesheet מציין שזהו גיליון עיצוב. המאפיין href מציין את מיקום קובץ העיצוב. בדוגמה, שני הקבצים נמצאים באותה תיקייה.

מאפייני עיצוב

צבע הטקסט - color

המאפיין color קובע את צבע הטקסט. ניתן לציין צבע באמצעות שם צבע או באמצעות קוד צבע המתחיל בסימן סולמית.

p {
    color: blue;
}

h1 {
    color: #ff0000;
}

צבע רקע - background-color

המאפיין background-color קובע את צבע הרקע של הרכיב. לדוגמה, ניתן לקבוע צבע רקע לגוף המסמך או לפסקה מסוימת.

body {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

כיוון - direction

המאפיין direction קובע את כיוון הטקסט. הערך rtl מציין כיוון מימין לשמאל, והערך ltr מציין כיוון משמאל לימין.

body {
    direction: rtl;
}

גופן - font-family

המאפיין font-family קובע את סוג הגופן. ניתן לציין כמה גופנים לפי סדר עדיפות: אם הגופן הראשון אינו זמין, הדפדפן ינסה להשתמש בבא אחריו.

body {
    font-family: Arial, sans-serif;
}

גודל גופן - font-size

המאפיין font-size קובע את גודל הגופן. בדוגמה הגודל נמדד בפיקסלים, המסומנים באותיות px.

p {
    font-size: 18px;
}

דוגמה משולבת

בדוגמה הבאה מוגדר עיצוב לגוף המסמך ולפסקאות באמצעות תגית style:

<head>
    <style>
        body {
            background-color: lightblue;
            direction: rtl;
            font-family: Arial, sans-serif;
        }
        p {
            color: navy;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>Welcome!</p>
</body>