גודל הגופן

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

ב-CSS, המאפיין font-size משמש לשליטה בגודל הטקסט בתוך רכיב HTML.

הנה כמה יחידות נפוצות המשמשות לציון גדלי גופנים:

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

Ems (em): יחידה יחסית המבוססת על גודל הגופן של רכיב האב. לדוגמה, אם גודל הגופן של רכיב האב הוא 16px, אז 1em שווה ל־16px, 2em שווה ל־32px, וכן הלאה.

יחידות rem (rem): יחידה יחסית המבוססת על גודל הגופן של רכיב השורש (<html>). יחידה זו מספקת עקביות רבה יותר לאורך המסמך, מכיוון שהיא אינה מושפעת מגודל הגופן של רכיבי האב.

אחוזים (%): יחידה יחסית המבוססת על גודל הגופן של רכיב האב, בדומה ל־em. לדוגמה, אם גודל הגופן של רכיב האב הוא 16px, אז 100% שווה ל־16px, 150% שווה ל־24px, וכן הלאה.

לדוגמה:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

בדוגמה הזו, גודל הגופן של כל רכיבי <p> (פסקה) מוגדר ל־16px, כל הכותרות מסוג <h1> מוגדרות ל־2.5em (שיהיה יחסי לגודל הגופן של רכיב האב שלהן), גודל הגופן הבסיסי של המסמך מוגדר ל־1.4rem, ולכל הרכיבים עם המחלקה small-text יש גודל גופן של 80% (שיהיה יחסי לגודל הגופן של רכיב האב שלהם).

אתגר

קל

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

כתוב כלל CSS שיחול על הרכיב <h1>. הגדר את font-size לערך 32px.
כתוב כלל CSS שיחול על הרכיב <p>. הגדר את font-size לערך 1.2em.
כתוב כלל CSS שיחול על הרכיב <div>. הגדר את font-size לערך 120%.

נסו בעצמכם

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>