Ćwiczenie — używanie pojęć związanych z arkuszem CSS

  • 7 min

Chcesz zacząć stylizować stronę sieci Web wznawiania. Zaczynasz od wybrania czcionki i ustawienia rozmiarów dla różnych elementów, których używasz na stronie.

W tym module jest używana vscode.dev — internetowa wersja programu Visual Studio Code i CodeSwing. Te narzędzia pomagają usprawnić proces programowania. Do wykonania kolejnych ćwiczeń nie jest wymagana instalacja lokalna.

Tworzenie projektu

Zacznij od utworzenia folderu, skonfigurowania narzędzi i utworzenia "swing" przy użyciu funkcji CodeSwing w vscode.dev. Huśtawka automatycznie wyświetli wyniki kodu w vscode.dev. Korzystanie z programu Microsoft Visual Studio Code z rozwiązaniem CodeSwing umożliwia szybkie wprowadzanie modyfikacji za pomocą podglądu aktualizacji w czasie rzeczywistym.

  1. Utwórz folder na pulpicie o nazwie resume.
  2. Otwórz vscode.dev.
  3. Wybierz pozycję Otwórz folder.
  4. Przejdź do utworzonego wcześniej folderu resume i wybierz pozycję Wybierz folder.
  5. Po wyświetleniu monitu o zezwolenie witrynie na wyświetlanie plików, wybierz Wyświetl pliki.
  6. Wybierz przycisk Rozszerzenia .

    Zrzut ekranu przedstawiający przycisk rozszerzeń programu Visual Studio.

  7. W polu tekstowym Wyszukaj rozszerzenia w witrynie Marketplace wpisz CodeSwing.
  8. Wybierz pozycję Zainstaluj , aby zainstalować kodSwing.
  9. Otwórz paletę poleceń, wybierając Ctrl+Shift+P lub Cmd-Shift-P na komputerze Mac.
  10. Wpisz CodeSwing w palecie poleceń i wybierz pozycję CodeSwing: New Swing in Directory (KodSwing: nowy swing w katalogu).
  11. Wybierz Wybierz folder, aby użyć bieżącego katalogu (czyli tego, który został utworzony w poprzednim kroku).
  12. Wybierz pozycję Podstawowa: HTML/CSS/JavaScript.
  13. Jeśli zostanie wyświetlony monit o wznowienie zapisywania zmian, wybierz pozycję Zapisz zmiany.
  14. Zaznacz znak x obok script.js wewnątrz vscode.dev, aby zamknąć plik JavaScript, ponieważ nie używasz tego pliku podczas ćwiczenia.

Visual Studio Code tworzy dwie sekcje obok siebie. Po lewej stronie będą edytory, w których można wprowadzić kod HTML i CSS. Prawa strona zachowuje się jak przeglądarka, wyświetlając wyniki kodu.

Tworzenie kodu HTML

Używasz istniejącego kodu HTML, aby umożliwić nam skupienie się wyłącznie na CSS. Kod HTML zawiera link element do odwołowania się do pliku CSS.

  • Skopiuj następujący kod HTML do okna o nazwie 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>

Ustawianie typu i rozmiaru czcionki

Domyślnie większość przeglądarek używa czcionki szeryfowej, takiej jak Times New Roman. Chcesz ustawić domyślną stronę na bardziej popularną czcionkę. Ponadto chcesz ustawić rozmiar czcionki dla strony i różnych nagłówków.

  1. Wewnątrz pliku o nazwie style.css dodaj następujący arkusz CSS, aby ustawić rodzinę czcionek na Verdana z opcjami rezerwowymi, a rozmiar czcionki na 12 pikseli na elemecie html :

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

    Używasz html elementu do aktualizowania czcionki głównej i określania rozmiaru. Z elementem można korzystać html z rem rozmiarów.

  2. Zwróć uwagę, że strona zostanie automatycznie zaktualizowana wraz ze zmianami.

  3. Dodaj następujący kod CSS na końcu style.css , aby ustawić rozmiary dla elementu h1 za pomocą h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem jest oparty na rozmiarze głównym, który jest 14 pikseli. Na przykład ten kod CSS ustawia rozmiar na h1 22,4 piksela.

  4. Strona zostanie automatycznie zaktualizowana w vscode.dev.

  5. Pozostaw otwarte okno, ponieważ będzie ono używane w następnym ćwiczeniu.

Wynik i dalsze kroki

Poniższy zrzut ekranu jest wynikiem kodu CSS zastosowanego w tym ćwiczeniu. Jeśli chcesz eksperymentować z różnymi czcionkami i rozmiarami, możesz zmodyfikować kod CSS zgodnie z oczekiwaniami.

Zrzut ekranu przedstawiający ostatnią stronę renderowaną w przeglądarce.