מבוא לבוררים
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 10 מתוך 76.
ב-CSS, בוררים הם תבניות המשמשות לבחירת רכיבי ה-HTML שברצונך לעצב. הם חלק חיוני מכללי CSS, משום שהם קובעים על אילו רכיבים יחולו הסגנונות.
יש סוגים שונים של בוררים, וכל אחד מהם מכוון לרכיבים בדרכים שונות. הבנת הבוררים היא בסיסית לשליטה ב-CSS וליצירת דפי אינטרנט מעוצבים היטב.
הנה כלל CSS בסיסי עם בורר:
selector {
property: value;
}selector: בוחר את רכיבי ה-HTML שיוגדר להם עיצוב.property: מאפיין העיצוב שברצונך לשנות (למשל, color, font-size).value: הערך שברצונך להגדיר למאפיין (למשל, blue, 16px).
לדוגמה:
p {
color: blue;
font-size: 16px;
}בדוגמה זו, p הוא הבורר, והוא בוחר את כל רכיבי הפסקה. ההצהרות קובעות את צבע הטקסט לכחול ואת גודל הגופן ל־16 פיקסלים עבור כל הפסקאות.
אתגר
קלניתן לך מסמך HTML. השתמש ב-CSS פנימי כדי לעצב את המסמך עם המאפיינים הבאים:
- הגדר את צבע הרקע של כל הכותרות מסוג
h1ל-green. - הגדר את צבע הטקסט של כל הכותרות מסוג
h1ל-white. - הגדר את גודל הגופן של כל הפסקאות (
p) ל-18px.
ניתן לך קוד CSS התחלתי לשימוש.
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
h1 {
}
p {
}
</style>
</head>
<body>
<h1>John Doe</h1>
<p>Web Developer</p>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה עיצוב באמצעות CSS
3בוררים בסיסיים
מבוא לבורריםבורר סוגבורר מחלקהבורר מזההבוררים קבוצתייםבורר אוניברסליאתגר בחירת רכיבים12יסודות העיצוב הרספונסיבי
מהו עיצוב רספונסיבי?תגית Meta של Viewportפריסות גמישותיחידות Viewportיסודות Media Queriesתמונות גמישותתרגלו בעצמכם: Web אונליין