Øvelse – brug CSS-begreber

  • 7 minutter

Du vil starte formateringen af din CV-webside. Du starter med at vælge skrifttype og indstillingsstørrelser for de forskellige elementer, du bruger på siden.

I dette modul bruges vscode.dev – en webbaseret version af Visual Studio Code og CodeSwing. Disse værktøjer hjælper med at strømline udviklingsprocessen. Der kræves ingen lokal installation for at gennemføre de efterfølgende øvelser.

Opret et projekt

Du starter med at oprette en mappe, konfigurere dit værktøj og oprette et "sving" ved hjælp af CodeSwing i vscode.dev. Et sving viser automatisk resultaterne af din kode i vscode.dev. Brug af Microsoft Visual Studio Code med CodeSwing giver dig mulighed for hurtigt at foretage ændringer med en prøveversion af opdateringer, der sker i realtid.

  1. Opret en mappe på skrivebordet med navnet genoptage.
  2. Åbn vscode.dev.
  3. Vælg Åbn mappe.
  4. Gå til den genoptage mappe, du oprettede tidligere, og vælg Vælg mappe.
  5. Når du bliver bedt om at Lad webstedsvisningsfiler, skal du vælge Vis filer.
  6. Vælg knappen udvidelser.

    Skærmbillede af knappen Visual Studio-udvidelser.

  7. Skriv CodeSwingi tekstfeltet Søgeudvidelser på Marketplace .
  8. Vælg Installér for at installere CodeSwing-.
  9. Åbn kommandopaletten ved at vælge Ctrl+Skift+P eller Cmd-Shift-P- på en Mac.
  10. Skriv CodeSwing- i kommandopaletten, og vælg CodeSwing: New Swing in Directory.
  11. Vælg Vælg mappe for at bruge den aktuelle mappe (som er den, du oprettede i et tidligere trin).
  12. Vælg Basic: HTML/CSS/JavaScript.
  13. Hvis du bliver bedt om at Gem ændringer for at fortsætte, skal du vælge Gem ændringer.
  14. Vælg x ud for script.js inde i vscode.dev for at lukke JavaScript-filen, da du ikke bruger denne fil under øvelsen.

Visual Studio Code opretter to sektioner side om side. Til venstre er det dine redaktører, hvor du kan angive html og CSS. Den højre opfører sig som en browser og viser resultaterne af din kode.

Opret HTML-koden

Du bruger eksisterende HTML til at give os mulighed for udelukkende at fokusere på CSS. HTML-koden indeholder det link element, der refererer til CSS-filen.

  • Kopiér følgende HTML-kode til det vindue, der kaldes 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>

Indstil skrifttype og -størrelse

Som standard bruger de fleste browsere en serif-skrifttype såsom Times New Roman. Du vil angive sidens standard til en mere populær skrifttype. Derudover skal du angive skriftstørrelsen for siden og forskellige overskrifter.

  1. I filen med titlen style.cssskal du tilføje følgende CSS for at angive skrifttypefamilien til Verdana med reserveindstillinger og skriftstørrelsen til 12 pixel på elementet html:

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

    Du bruger elementet html til at opdatere rodskrifttypen og størrelsen. Med html elementet giver dig mulighed for at bruge rem størrelse.

  2. Bemærk, at siden automatisk opdateres med ændringerne.

  3. Føj følgende CSS-kode til slutningen af style.css for at angive størrelserne for h1 via h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem er baseret på rodstørrelsen, som er 14 pixel. Som et eksempel indstiller denne CSS størrelsen h1 til 22,4 pixels.

  4. Siden opdateres automatisk i vscode.dev.

  5. Lad vinduet være åbent, som du vil bruge det i den næste øvelse.

Resultat og næste skridt

Følgende skærmbillede er resultatet af den CSS, du anvendte i denne øvelse. Hvis du vil eksperimentere med forskellige skrifttyper og størrelser, kan du ændre CSS efter eget ønske.

Skærmbillede af den sidste side, der gengives i browseren.