תרגיל - שימוש במושפטים של CSS

  • 7 דקות

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

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

יצירת פרוייקט

התחל ביצירת תיקיה, הגדרת הכלי ויצירת "הנפה" באמצעות CodeSwing ב- vscode.dev. הנפה תציג באופן אוטומטי את תוצאות הקוד שלך ב- vscode.dev. השימוש בקוד של Microsoft Visual Studio עם CodeSwing מאפשר לך לבצע שינויים במהירות באמצעות תצוגה מקדימה של עדכונים המתרחשים בזמן אמת.

  1. צור תיקיה בשולחן העבודה שלך בשם קורות.
  2. פתח את vscode.dev.
  3. בחר פתח תיקיה.
  4. נווט אל חדש שיצרת קודם לכן ובחר בחר תיקיה.
  5. כאשר תתבקש לעשות זאתאפשר לאתר להציג קבצים, בחר הצג קבצים.
  6. בחר בלחצן הרחבות הרחבות.

    מסך של לחצן ההרחבות של Visual Studio.

  7. בתיבת הטקסט חיפוש ב- Marketplace, את CodeSwing.
  8. בחר התקן כדי להתקין CodeSwing.
  9. פתח את לוח הפקודות על-ידי הקש Ctrl+Shift+P או Cmd-Shift-P ב- Mac.
  10. הקלד CodeSwing בלוח הפקודות ובחר באפשרות CodeSwing: new Swing in Directory.
  11. בחר בחר כדי להשתמש בספריה הנוכחית (שהיא הספריה שיצרת בשלב קודם).
  12. בחר בסיסי: HTML/CSS/JavaScript.
  13. אם תתבקש לשמור כדי לחדש את, בחר שמור שינויים.
  14. בחר את ה - x לצד script.js בתוך vscode.dev כדי לסגור את קובץ ה- JavaScript מכיוון שאינך משתמש בקובץ זה במהלך התרגיל.

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

יצירת ה- HTML

אתה משתמש ב-HTML קיים כדי לאפשר לנו להתמקד אך ורק ב-CSS. ה- HTML כולל את link כדי להפנות לקובץ ה- CSS.

  • העתק את ה- HTML הבא לתוך החלון index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

הגדרת סוג וגודל גופן

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

  1. בתוך הקובץ שנקרא style.css, הוסף את ה- CSS הבא כדי להגדיר את משפחת הגופנים ל- Verdana עם אפשרויות החזרה, ואת גודל הגופן ל- 12 פיקסלים ברכיב html הבא:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    אתה משתמש ברכיב html כדי לעדכן את גופן הבסיס ואת גודלו. עם האלמנט html מאפשר לך להשתמש בגודל rem .

  2. שים לב שהדף מעדכן באופן אוטומטי את השינויים.

  3. הוסף את קוד ה- CSS הבא לסוף style.css כדי להגדיר את הגדלים עבור h1 עד h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem מבוסס על גודל הבסיס, שהוא 14 פיקסלים. לדוגמה, CSS זה מגדיר את הגודל של h1 22.4 פיקסלים.

  4. הדף מתעדכן באופן אוטומטי ב- vscode.dev.

  5. השאר את החלון פתוח כפי שתשתמש בו בתרגיל הבא.

התוצאה והשלבים הבאים

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

צילום מסך של הדף הסופי כפי שעובד בדפדפן.