Übung: Verwenden von CSS-Konzepten

  • 7 Minuten

Sie möchten mit dem Formatieren Ihrer Lebenslaufwebseite beginnen. Beginnen Sie mit der Auswahl der Schriftart und der Einstellung der Größen für die verschiedenen Elemente, die Sie auf der Seite verwenden.

In diesem Modul wird vscode.dev verwendet, eine webbasierte Version von Visual Studio Code und CodeSwing. Diese Tools tragen dazu bei, den Entwicklungsprozess zu optimieren. Für die Durchführung der folgenden Übungen ist keine lokale Installation erforderlich.

Erstellen eines Projekts

Sie beginnen mit dem Erstellen eines Ordners, dem Einrichten Ihrer Tools und dem Erstellen eines "Swings" mit CodeSwing in vscode.dev. Ein Swing zeigt automatisch die Ergebnisse Ihres Codes in „vscode.dev“ an. Die Verwendung von Microsoft Visual Studio Code mit CodeSwing ermöglicht es Ihnen, schnell Änderungen vorzunehmen, mit einer Vorschau der Updates, die in Echtzeit erfolgen.

  1. Erstellen Sie auf Ihrem Desktop einen Ordner namens resume.
  2. Öffnen Sie vscode.dev.
  3. Wählen Sie Ordner öffnen aus.
  4. Navigieren Sie zum Ordner resume, den Sie zuvor erstellt haben, und klicken Sie auf Ordner auswählen.
  5. Wenn Sie die Aufforderung Anzeige von Dateien durch Website zulassen? erhalten, wählen Sie Dateien anzeigen aus.
  6. Klicken Sie auf die Schaltfläche Erweiterungen.

    Screenshot der Visual Studio-Erweiterungsschaltfläche

  7. Geben Sie im Textfeld Nach Extensions in Marketplace suchen den Suchbegriff CodeSwing ein.
  8. Wählen Sie Installieren aus, um CodeSwing zu installieren.
  9. Öffnen Sie die Befehlspalette über die Tastenkombination STRG+UMSCHALT+P bzw. CMD+UMSCHALT+P auf einem Mac.
  10. Geben Sie in der Befehlspalette CodeSwing ein, und wählen Sie CodeSwing: New Swing in Directory (Neuer Swing in Verzeichnis) aus.
  11. Wählen Sie Select Folder (Ordner auswählen) aus, um das aktuelle Verzeichnis zu verwenden (das Verzeichnis, das Sie in einem vorherigen Schritt erstellt haben).
  12. Wählen Sie Basic: HTML/CSS/JavaScript aus.
  13. Wenn Sie aufgefordert werden, Änderungen am Ordner resume zu speichern, wählen Sie Save changes (Änderungen speichern) aus.
  14. Wählen Sie das x neben script.js in vscode.dev aus, um die JavaScript-Datei zu schließen, da Sie diese Datei während der Übung nicht verwenden.

Visual Studio Code erstellt zwei Abschnitte nebeneinander. Auf der linken Seite befindet sich Ihr Editor, in dem Sie Ihren HTML- und CSS-Code eingeben können. Die rechte Seite verhält sich wie ein Browser und zeigt die Ergebnisse Ihres Codes an.

Erstellen des HTML-Codes

Sie verwenden vorhandenes HTML, damit wir uns ausschließlich auf das CSS konzentrieren können. Der HTML-Code enthält das link-Element, das auf die CSS-Datei verweist.

  • Kopieren Sie den folgenden HTML-Code in das Fenster mit dem Titel 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>

Festlegen von Schriftart und -größe

Standardmäßig verwenden die meisten Browser eine Serifenschriftart wie Times New Roman. Sie möchten eine beliebtere Schriftart für den Seitenstandard festlegen. Darüber hinaus möchten Sie die Größe der Schriftart für die Seite und verschiedene Kopfzeilen festlegen.

  1. Fügen Sie in der Datei style.css den folgenden CSS-Code hinzu, um die Schriftfamilie auf Verdana mit Ausweichoptionen und den Schriftgrad auf 12 Pixel für das html-Element festzulegen:

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

    Sie verwenden das html-Element, um die Stammschriftart und die Größe zu aktualisieren. Mit dem html Element können Sie die Größe verwenden rem .

  2. Beachten Sie, dass die Seite automatisch mit den Änderungen aktualisiert wird.

  3. Fügen Sie den folgenden CSS-Code am Ende von style.css hinzu, um die Größen für h1 über h4 festzulegen.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem basiert auf der Stammgröße, die 14 Pixel beträgt. Als Beispiel legt dieses CSS die Größe von h1 auf 22,4 Pixel fest.

  4. Die Seite wird in „vscode.dev“ automatisch aktualisiert.

  5. Lassen Sie das Fenster geöffnet, da Sie es in der nächsten Übung verwenden werden.

Ergebnis und nächste Schritte

Der folgende Screenshot ist das Ergebnis des CSS, das Sie in dieser Übung angewendet haben. Wenn Sie mit verschiedenen Schriftarten und Größen experimentieren möchten, können Sie die CSS-Datei wie gewünscht ändern.

Screenshot der letzten Seite wie im Browser gerendert.