בדוק בוררים
בוררי CSS משמשים לבחירת הרכיבים להחלת סגנון. בוררים מציעים גמישות ועוצמה רבה. בוררים מאפשרים לך להחיל סגנון על כל הרכיבים או על רכיב ספציפי אחד, ואפילו אות ספציפית אחת.
קיימים שלושה סוגי ליבה של בוררים:
- רכיבי
- שיעורי
- מזהי
באמצעות בוררים אלה, באפשרותך להחיל סגנונות על רכיבים רבים או על כמה מהם.
בוררי רכיבים
בורר רכיבים חל על כל הרכיבים עם תגית זו. כל רכיב HTML יכול לשמש כל בורר רכיבים. השימוש h1 מאפשר לך לשנות את h1 כל הרכיבים בדף.
h1 {
/* style */
}
בוררי מחלקות
כל רכיבי ה- HTML מאפשרים לך להוסיף class אישית.
class משמש לקיבוץ רכיבים יחד ולאפשר לך לסמן אותם להחלת הגדרות CSS.
בעת יצירת קורות חיים, יש לך סעיפים להיסטוריית ההשכלה והתעסוקה שלך. השימוש בכיתה יאפשר לך לעצב רכיבים אלה באותו סגנון.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
בדוגמה הקודמת, ייתכן שתרצה שהעיצוב של div יהיה זהה לזה של הצגת סוגי מידע דומים. על-ידי סימון div הרכיבים בעלי אותה מחלקה, באפשרותך להחיל את אותו סגנון CSS על כל אחד מהם.
כדי לזהות מחלקה ב- CSS, עליך . קידומת לפני השם. בדוגמה שלנו, תוכל להשתמש ב- .history.
.history {
/* your styles */
}
אם אתה משתמש בקובץ CSS, עליך לכתוב את הגדרת סגנון המחלקה בקובץ ה- CSS. תכונת המחלקה ב- HTML מפנה להגדרה מקובץ ה- CSS.
כיתות מדומה
כיתות מדומה מאפשרות לך לזהות רכיבים בהתבסס על המיקום שלהם בדף או על האופן שבו המשתמש מקיים איתם אינטראקציה.
כאשר משתמש מקיים אינטראקציה עם דף אינטרנט, מצבם של רכיבים שונים משתנה. ייתכן שמשתמש מרחף עם העכבר מעל פריט וברצונך שהצבע ישתנה בעת ריחוף. או אם המשתמש בחר קישור. לאחר שהם יבקרו בקישור זה, תוכל להודיע להם על כך על ידי שינוי הסגנון. CSS תומך מחלקות מדומה, אשר מוחלות באופן דינאמי בהתבסס על מה שהמשתמש עושה או עשה. מחלקות מדומה מסומנות בקידומת על-ידי :, ומוצבות אחרי בורר אחר.
לדוגמה, כדי להגדיר את צבע הרקע של קישור בצהוב כאשר משתמש מרחף מעל הסמן שלו, באפשרותך להשתמש ב- CSS הבא:
a:hover {
background-color: yellow;
}
כמה מהכיתות המדומה הנפוצות ביותר מפורטות בטבלה הבאה:
| מחלקה מדומה | תיאור |
|---|---|
hover |
המשתמש מרחף עם הסמן מעל פריט |
visited |
קישור שעליו נלחץ בעבר |
link |
קישור ללא השגחה |
first-child |
הצאצא הראשון התואם את בורר בהירארכיה |
last-child |
הצאצא האחרון התואם את בורר בהירארכיה |
חשוב
באמצעות רכיבים מדומה ו- CSS, באפשרותך להסיר את קו המשנה מהיפר-קישורים. ככלל, מומלץ להשאיר את קו תחתון למטרות נגישות. הטקסט המסומן בקו תחתון מאפשר למשתמש לזהות במהירות קישורים בדף.
בוררי מזהים
בדומה לכיתות, מזהה מאפשר לך להחיל סגנון על רכיב. עם זאת, למרות שניתן להחיל מחלקה על רכיבים מרובים, מזהה חייב להיות ייחודי ולהפנות לרכיב אחד בלבד.
על קורות חיים, ייתכן שיש לך מקטע עבור מדיה חברתית, כגון X, GitHub או הבלוג שלך. אם רצית סגנון מותאם אישית עבור מקטע זה, באפשרותך להגדיר מזהה:
<div id="social-media">
<!-- list of links -->
</div>
מזהה משויך לקידומת עם # ב- CSS:
#social-media {
/* style */
}
הערה
מוסכמה סטנדרטית למתן שמות עבור כיתות ומ זהות היא שימוש ב"מכסת השלד". כל מילה היא באותיות קטנות, והן מופרדות באמצעות -. מקרה השלד של השם מגיע מהאופן שבו המילים מופיעות כאילו הן נמצאות על השלד.