תרגיל - בוררים

הושלם

בתרגיל המוקדם, החלת סגנון על רכיבים כגון html ו- h1. לעתים קרובות אתה צריך להיות קצת יותר צר ביישום הסגנון.

בתרגיל זה, אתה קובע את הסגנון עבור מדורי המדיה החברתית והחוויה והקישורים בדף.

החלת סגנון על כיתות ותעודות זהות

אתה מתחיל בקביעת הסגנון עבור מדורי המדיה החברתית והחוויה.

1. חזור לחלון vscode.dev שבו השתמשת בתרגיל הקודם.

2. בתוך index.html, שימו לב לאלמנט עם המזהה של section בשורה 10; אתם מחילים סגנון על חלק זה כדי להגדיר את הצבע לכחול.

3. בסוף style.css, הוסף את ה- CSS הבא כדי להגדיר את הצבע עבור הרכיב חברתית- הבא:

   #social-media {
       color: blue;
   }
   

4. העמוד מתעדכן, ומגדיר את התוכן במדור המדיה החברתית לכחול.

5. בתוך index.html, שימו לב לשני החלקים בשורות 28 ו-32 עם חווית השיעור; ניתן להחיל סגנון על מקטעים אלה כדי להטות את הגופן.

6. בסוף style.css, הוסף את ה- CSS הבא כדי לשנות את הגופן עבור הרכיבים עם חוויית השימוש החוויה הכיתה:

   .experience {
       font-style: italic;
   }
   

7. הדף מתעדכן, ומגדיר את הגופן בתוך החוויה לנטוי.

שימוש בפסאודו-מחלקות להגדרת סגנון קישור

מפתחי אינטרנט רבים משנה את הצבע והסגנון של היפר-קישורים בדף. אתה מגדיר את הצבע של קישורים לירוק ומסמן קישורים כאשר משתמש מרחף מעליהם.

1. בסוף style.css, הוסף את ה- CSS הבא כדי להגדיר קישורים לירוק תמיד:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. הדף מעדכן כדי להציג קישורים בירוק.

3. הוסף את ה- CSS הבא לסוף style.css כדי לסמן קישורים בעת ריחוף מעלם:

   a:hover {
       background-color: yellow;
   }
   

4. רחף מעל הקישורים בדף ותבחין שהקישורים מסומנים.

סקירה

צילום המסך הבא מציג את תוצאות ה- CSS שהחלת. השתמשת בכיתות, במ זהות ובכיתות מדומה כדי להחיל סגנונות על רכיבים ספציפיים ועל קבוצות לוגיות של רכיבים.