בורר מחלקה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 12 מתוך 76.

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

כדי לבחור ב-CSS רכיבים בעלי מחלקה מסוימת, משתמשים בנקודה (.) ואחריה שם המחלקה. כך נראית התחביר הבסיסי לשימוש בבורר מחלקה:

.classname {
    property: value;
}

לדוגמה:

.highlight {
    background-color: yellow;
    color: black;
}

בדוגמה זו, בורר המחלקה .highlight בוחר את כל הרכיבים עם המחלקה "highlight". ההצהרות מגדירות את צבע הרקע לצהוב ואת צבע הטקסט לשחור עבור רכיבים אלה.

אתגר

קל

ניתן לך מסמך HTML עם רכיבים שונים, כולל כותרות (<h1>, <h2>), פסקאות (<p>) ורכיבי חלוקה (<div>). עדיין אין לאף אחד מהם class: תחילה תוסיף את מאפייני המחלקה, ואז תעצב את הרכיבים באמצעות בוררי מחלקה. בצע את השלבים הבאים:

הוסף מאפיין class עם הערך "blue-text" לרכיב <h1> ולרכיב <p> הראשון.
הוסף מאפיין class עם הערך "large-text" לרכיב <h2> ולרכיב <p> השני.
כתוב כלל CSS באמצעות בורר מחלקה שמכוון לכל הרכיבים בעלי המחלקה "blue-text". הגדר את צבע הטקסט של הרכיבים האלה לכחול.
כתוב כלל CSS באמצעות בורר מחלקה שמכוון לכל הרכיבים בעלי המחלקה "large-text". הגדר את גודל הגופן של הרכיבים האלה ל-24 פיקסלים.

נסו בעצמכם

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>