עובי הגופן
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 20 מתוך 76.
ב־CSS, המאפיין font-weight משמש לשליטה בדרגת ההדגשה או בעובי הטקסט בתוך רכיב HTML.
ערכים מספריים נפוצים עבור font-weight כוללים:
100: דק200: דק במיוחד300: קל
400: רגיל500: בינוני600: מודגש למחצה
700: מודגש800: מודגש מאוד900: שחור
ערכי מילות מפתח נפוצים עבור font-weight כוללים:
normal: שווה ערך ל־400bold: שווה ערך ל־700
lighter: מציין משקל קל יותר מזה של רכיב האבbolder: מציין משקל כבד יותר מזה של רכיב האב
לדוגמה:
p {
font-weight: normal;
}
h1 {
font-weight: 700;
}
.highlight {
font-weight: bold;
}
אתגר
קלניתן לך מסמך HTML עם כותרת (<h1>), פסקה (<p>) וחלוקה (<div>). המשימה שלך היא להשתמש במאפיין font-weight כדי לעצב את הרכיבים האלה. פעל לפי השלבים הבאים:
- כתוב כלל CSS שמכוון לרכיב
<h1>. הגדר אתfont-weightל-900. - כתוב כלל CSS שמכוון לרכיב
<p>. הגדר אתfont-weightל-lighter. - כתוב כלל CSS שמכוון לרכיב
<div>. הגדר אתfont-weightל-600.
נסו בעצמכם
<html>
<head>
<title>Font Weight</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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה עיצוב באמצעות CSS
4יסודות הטקסט
צבע הטקסטמשפחת גופניםגודל הגופןעובי הגופןיישור הטקסטעיטור הטקסטאתגר סיכום #1אתגר סיכום #2
תרגלו בעצמכם: Web אונליין