תרגיל - סגנון ה- HTML שלך עם CSS

10 דקות

גליונות סגנונות מדורגים (CSS) מאפשרים לך לציין כיצד הדף שלך אמור להיראות. הרעיון הבסיסי הוא להגדיר את הסגנון עבור הרכיבים שבהם אתה משתמש בתוך דפי ה- HTML שלך. בעוד שרכיבי HTML מגדירים את התוכן שלך, סגנונות CSS מגדירים כיצד תוכן זה נראה.

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

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

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

CSS חיצוני

ביחידה הקודמת לגבי HTML, קישרת לקובץ CSS חיצוני מ- HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

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

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

כללי CSS

כללי CSS הם האופן שבו אתה מחיל סגנונות על רכיבי HTML. כללי CSS כוללים בורר, המשמש כדי לבטא את הרכיב (או הרכיבים) שעליו יש להחיל את הסגנונות.

ב- Visual Studio Code, פתח את main.css הקובץ והזן את הטקסט הבא:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

מקטע קוד זה מכיל שני כללים. לכל כלל יש:

בורר יכול. body ו- ul הם בוררים של שני הכללים, ומשמשים לבחירת הרכיבים החלים על הסגנונות.
סוגר מסולסל פותח ({).
רשימה של סגנון הקובעות כיצד ייראו הרכיבים שנבחרו.
סוגר מסולסל סוגר (}).

לדוגמה, ul בוחר את <ul> HTML בדף כדי להחיל עליו סגנונות. ההצהרה font-family: helvetica, וקובעת מהו הסגנון. שם המאפיין הוא font-family, הערך הוא helvetica.

כפי שתראה בשלב הבא, תוכל להגדיר שמות מותאמים אישית משלך עבור רכיבים.

בוררי

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

העתק את הקוד הבא והוסף אותו לקובץ CSS. הדבק אותו לאחר הסוגר המסולסל הסוגר ul בורר המקשים שהוספת קודם לכן.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
הקוד הקודם מכיל שלושה כללי CSS, עם שני הכללים האחרונים המשתמשים בתכונות מותאמות אישית כדי לבחור רכיבים: .list ו- #msg.
- .list הוא מחלקה. כל רכיב HTML המכיל class מוגדרת כרכיב list מקבלת את הסגנונות המוגדרים בתוך בורר זה.
- #msg הוא בורר מזהה. רכיב ה- HTML שהתכונה id שלו מוגדרת msg מקבל את הסגנונות המוגדרים בתוך בורר זה.
השמות שבהם אתה משתמש עבור הבוררים שלך יכולים להיות שרירותיים, כל עוד הם תואמים לפריטים שאתה מגדיר ב- HTML.
שמור את עבודתך על-ידי Control+S ב- Windows או Command+S ב- macOS.

הצג בדפדפן

כדי להציג תצוגה מקדימה באמצעות Visual Studio Code, לחץ באמצעות לחצן העכבר הימני על index.html בסייר ולאחר מכן בחר פתח בדפדפן ברירת.

חשוב

למרות שערכת זה עתה את main.css, כדי להציג את השינויים בתצוגה מקדימה, עליך לבחור את index.html הקובץ.

דף האינטרנט נפתח בדפדפן ברירת המחדל שלך.

האם סגנונות הגופן הם הסגנונות הצפויים? מעניין כיצד סגנונות המוחלים על הפריט <body> בירושה ברכיב <h1> הבא. לא הגדרנו דבר עבור <h1>, אך עדיין יש לו את הגופן שהוגדר ב- <body>. מנגנון ירושה זה, החל מרכיבים אב לצאצאים שלהם, הוא אחד ההיבטים המרכזיים של CSS. עם זאת, <li> הרכיבים הבאים כוללים גופן שונה. הסגנון עבור רכיבי <li> עוקף את ערכת הסגנון עבור <body> מכיוון שרכיב <li> הוא צאצא של רכיב <ul> שעבורו הגדרת סגנון.

בעת שימוש פתח בדפדפן ברירת ב- Visual Studio Code, הוא פותח כרטיסיה חדשה בדפדפן בכל פעם. כדי להימנע מפתיחת כרטיסיה חדשה, באפשרותך לטעון מחדש את הכרטיסיה שכבר מכילה את אתר האינטרנט שלך במקום זאת.

כדי לטעון מחדש את הכרטיסיה, הקש F5, שהוא קיצור המקשים לרענון, או הקש Ctrl+R ב- Windows או ב- Linux ולאחר מכן Command+R ב- Mac.

הוספת ערכת נושא בהירה

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

בקובץ CSS (main.css), הוסף את הקוד הבא בסוף הקובץ.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
בדוגמה זו, #000000 שחור עבור צבע הגופן, #00FF00 מציין ירוק עבור צבע הרקע.
בקובץ ה- HTML שלך (index.html), עדכן <body> הרכיב עם שם המחלקה light-theme. כעת, בורר הכיתה עבור ערכת נושא בהירה מחיל את הסגנונות כראוי.
```
<body class="light-theme">
```

הצג בדפדפן

כדי להציג תצוגה מקדימה באמצעות Visual Studio Code, לחץ באמצעות לחצן העכבר הימני על index.htmlולאחר מכן בחר פתח בדפדפן ברירת המחדל או טען מחדש את הכרטיסיה הקודמת על-ידי הקשה על F5.

שים לב שערכת הנושא הקלה המשתמשת ברקע ירוק מופיעה.

הצג CSS שהוחל

בתצוגת הדפדפן, פתח את כלי פיתוח.

לחץ באמצעות לחצן העכבר הימני על העמוד ובחר בדוק, או בחר את קיצור F12 או Ctrl+Shift+I.
בחר את הכרטיסיה רכיבי ובחר את הכרטיסיה סגנונות בתוך הכרטיסיה רכיבי (היא אמורה להיות כבר נבחרת כברירת מחדל).
רחף מעל רכיבי ה- HTML השונים, ו כשאתה בוחר כמה רכיבים, שים לב כיצד כלי הפיתוח מציגים אילו סגנונות מוחלים עליהם בכרטיסיה סגנונות הכרטיסיה.
בחר את <body> הרכיב. שים לב light-theme המוחל.
בחר את הרשימה הלא מסודרת <ul> הרכיב. שים לב לסגנון המותאם font-family: helvetica;, אשר עוקף את הסגנון של <body> הרכיב.

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

הוספת ערכת נושא כהה

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

כדי להוסיף תמיכה עבור ערכת נושא כהה ל- CSS שלך, בצע את השלבים הבאים.

בקובץ CSS (main.css), הוסף כמה קבועים לבסיס הדף בתחילת הקובץ.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
בורר :root מייצג את הרכיב <html> בדף ה- HTML. עבור סוג זה של משימה, מומלץ להגדיר ערכה של משתני CSS כלליים בכלל CSS עם בורר :root הכללי. בדוגמה זו, הגדרת שלושה משתני צבע. כעת, באפשרותך להשתמש במשתנים אלה בכללי CSS אחרים.
בסוף קובץ ה- CSS, החלף את light-theme הבא בקוד הבא כדי לעדכן אותו ולהוסיף את dark-theme המקשים.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
בקוד הקודם, הגדרת שני משתנים חדשים, bg ו- fontColor, המציינים רקע וצבע גופן. משתנים אלה משתמשים במילת המפתח var כדי להגדיר את ערכי המאפיין שלהם למשתנים שצוינו קודם לכן ב- :root שלך.
לאחר מכן, בקובץ ה- CSS, החלף את body בורר המקשים הנוכחי בקוד הבא.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
בדוגמה זו, עליך להשתמש ב- body כדי להגדיר את המאפיינים background ו- color, ומ מכיוון שהרכיבים הגלויים בדף האינטרנט נמצאים כולם בתוך הרכיב <body>, הם מקבלים בירושה את הצבעים המוגדרים ב- <body>.
בקובץ ה- CSS, הסר את הכללים באמצעות #msg ו- ul בוררים כך שהם יורשים גם את אותו גופן מ- <body>.

זכור לשמור את הקובץ על-ידי הקש Control+S או Command+S.

קובץ ה- CSS שלך (main.css) אמור כעת להיראות כך:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

כדי להציג את ערכת הנושא הכהה, פתח את ערכת index.html וערוך באופן ידני את ערכת הנושא המהווה ברירת מחדל <body> מחלקה כהה לערכת נושא כהה (dark-theme). שמור את הקובץ וטען מחדש את הדף בדפדפן.
ערוך את <body> המחלקה כברירת מחדל כדי לחזור לערכת נושא בהירה המהווה ברירת מחדל.

ביחידה הבאה, תשתמש ב- JavaScript כדי לספק אינטראקטיביות ולתמוך במעבר בין ערכות נושא.

שימוש ב- GitHub Copilot כדי להוסיף ערכת נושא

באפשרותך להשתמש ב- GitHub Copilot ב- IDE שלך כדי ליצור CSS כדי להוסיף ערכת נושא חדשה. באפשרותך להתאים אישית את הבקשה כדי לציין מאפיינים להגדרת הסגנונות עבור רכיבי HTML לפי הדרישות שלך.

הטקסט הבא מציג בקשה לדוגמה עבור צ'אט Copilot:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot מופעל באמצעות בינה מלאכותית, כך שהפתעות וטעויות אפשריות. לקבלת מידע נוסף, ראה שאלות נפוצות בנושא.

קבל מידע נוסף על GitHub Copilot ב- Visual Studio Code.

משוב

האם עמוד זה היה מועיל?