Cvičení – použití konceptů CSS

  • 7 min

Chcete začít stylovat webovou stránku životopisu. Začnete výběrem písma a nastavením velikostí pro různé elementy, které na stránce používáte.

Tento modul používá vscode.dev – webovou verzi editoru Visual Studio Code a CodeSwing. Tyto nástroje pomáhají zjednodušit proces vývoje. K dokončení následujících cvičení není nutná žádná místní instalace.

Vytvoření projektu

Začnete vytvořením složky, nastavením nástrojů a vytvořením "swing" pomocí CodeSwing v vscode.dev. Swing automaticky zobrazí výsledky kódu v vscode.dev. Použití nástroje Microsoft Visual Studio Code s CodeSwing umožňuje rychle provádět změny s náhledem aktualizací probíhajících v reálném čase.

  1. Vytvořte složku na ploše s názvem resume.
  2. Otevřete vscode.dev.
  3. Vyberte Otevřít složku.
  4. Přejděte do složky životopisu , kterou jste vytvořili dříve, a vyberte Vybrat složku.
  5. Po zobrazení výzvy k zobrazení souborů webu vyberte Zobrazit soubory.
  6. Vyberte tlačítko Rozšíření .

    Snímek obrazovky s tlačítkem rozšíření sady Visual Studio

  7. Do textového pole Rozšíření vyhledávání na Marketplace zadejte CodeSwing.
  8. Vyberte Nainstalovat a nainstalujte CodeSwing.
  9. Otevřete paletu příkazů tak, že na Macu vyberete Kombinaci kláves Ctrl+Shift+P nebo Cmd-Shift-P .
  10. Do palety příkazů zadejte CodeSwing a vyberte CodeSwing: New Swing in Directory.
  11. Vyberte vybrat složku , pokud chcete použít aktuální adresář (což je adresář, který jste vytvořili v předchozím kroku).
  12. Vyberte Základní: HTML/CSS/JavaScript.
  13. Pokud se zobrazí výzva k uložení změn k obnovení, vyberte Uložit změny.
  14. Výběrem tlačítka x vedle script.js uvnitř vscode.dev zavřete soubor JavaScript, protože tento soubor během cvičení nepoužíváte.

Visual Studio Code vytvoří dva oddíly vedle sebe. Vlevo budou vaše editory, kde můžete zadat kód HTML a CSS. Pravice se chová jako prohlížeč a zobrazuje výsledky vašeho kódu.

Vytvoření KÓDU HTML

Používáte existující kód HTML, abychom se mohli soustředit pouze na CSS. Html obsahuje link element odkaz na soubor CSS.

  • Zkopírujte následující kód HTML do okna s názvem 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>

Nastavení typu a velikosti písma

Ve výchozím nastavení většina prohlížečů používá patkové písmo, například Times New Roman. Chcete nastavit výchozí stránku na oblíbenější písmo. Kromě toho chcete nastavit velikost písma pro stránku a různá záhlaví.

  1. Do souboru s názvem style.css přidejte následující šablony stylů CSS a nastavte rodinu písem na Verdana s možnostmi pro použití náhradních položek a velikost písma na 12 pixelů prvku html :

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

    K aktualizaci kořenového html písma a velikosti používáte element. S prvkem html umožňuje použít rem změnu velikosti.

  2. Všimněte si, že se stránka automaticky aktualizuje o změny.

  3. Na konec style.css přidejte následující kód CSS, který nastaví velikosti pro h1h4

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem je založená na velikosti kořene, což je 14 pixelů. Jako příklad lze uvést tento soubor CSS nastavení velikosti na h1 22,4 pixelů.

  4. Stránka se automaticky aktualizuje v vscode.dev.

  5. Okno nechte otevřené, protože ho použijete v dalším cvičení.

Výsledek a další kroky

Následující snímek obrazovky je výsledkem šablon stylů CSS, které jste použili v tomto cvičení. Pokud chcete experimentovat s různými písmy a velikostmi, můžete podle potřeby upravit šablony stylů CSS.

Snímek obrazovky s poslední stránkou vykreslenou v prohlížeči