בורר אוניברסלי
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 15 מתוך 76.
הבורר האוניברסלי הוא בורר רב־עוצמה ב-CSS שפונה לכל רכיבי ה-HTML בדף. הוא מיוצג באמצעות כוכבית (*).
כשמשתמשים בו, הבורר האוניברסלי מחיל את הסגנונות שצוינו על כל הרכיבים, ללא קשר לסוג שלהם, למחלקה שלהם או למזהה שלהם. דפדפנים מחילים סגנונות ברירת מחדל משלהם לפני הסגנונות שלך (לדוגמה, שוליים מסביב לכותרות ולפסקאות, וריפוד ברשימות), ולכן הבורר האוניברסלי שימושי להגדרת סגנונות גלובליים או לאיפוס ברירות המחדל האלה של הדפדפן בכל המסמך.
הנה התחביר הבסיסי לשימוש בבורר האוניברסלי:
* {
property: value;
}לדוגמה, נניח שברצונך להגדיר את צבע הטקסט וגודל הגופן המוגדרים כברירת מחדל עבור כל הרכיבים בדף. אפשר להשתמש בבורר האוניברסלי כך:
* {
color: black;
font-size: 14px;
}אתגר
קלניתן לך מסמך HTML עם רכיבים שונים, כולל כותרות (<h1>, <h2>), פסקאות (<p>) וחלוקה (<div>). המשימה שלך היא להשתמש בבורר האוניברסלי כדי לעצב את הרכיבים האלה. פעל לפי השלבים הבאים:
- כתוב כלל CSS באמצעות הבורר האוניברסלי, שמגדיר את צבע הטקסט של כל הרכיבים ל-darkgray ואת גודל הגופן ל-16 פיקסלים.
נסו בעצמכם
<html>
<head>
<title>Universal 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>
<div>This is a division.</div>
</body>
</html>השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה עיצוב באמצעות CSS
3בוררים בסיסיים
מבוא לבורריםבורר סוגבורר מחלקהבורר מזההבוררים קבוצתייםבורר אוניברסליאתגר בחירת רכיבים12יסודות העיצוב הרספונסיבי
מהו עיצוב רספונסיבי?תגית Meta של Viewportפריסות גמישותיחידות Viewportיסודות Media Queriesתמונות גמישותתרגלו בעצמכם: Web אונליין