Prozkoumání konceptů šablon stylů CSS

  • 4 min

Css – struktura

Pokud chcete, aby stránka HTML zobrazovala veškerý text mezi značkami s h1 barvou oranžovou, můžete použít následující kód CSS.

h1 {
    color: orange;
}

Výše uvedený kód CSS začíná textem (h1), který vybere kód HTML, který chcete stylovat. V h1 ukázce se nazývá selektor.

Všimněte si kódu uvnitř složených závorek, t deklaruje, color: orange;jak má být vybraná h1 značka stylována. Kód CSS ve složených závorkách { }, například color: orange; se nazývá deklarace.

Vaše ukázková deklarace obsahuje vlastnost, colorkterá je oddělena od hodnoty, oranges dvojtečka (:) a konec nastavení je označen středníkem (;).

Poznámka:

Není třeba si pamatovat všechny dostupné vlastnosti a hodnoty v CSS. Existuje mnoho webových stránek, na které můžete odkazovat. Nástroje, jako je vscode.dev nebo Visual Studio Code , také nabízejí možnosti automatického dokončování, které vám mohou pomoci při vytváření CSS.

Vložení souboru CSS

Rychlý způsob, jak přidat informace o stylu, je umístit je do head značek stránky HTML pomocí atributu style . Tato metoda se nepovažuje za osvědčený postup, ale je v pořádku používat pro výuku a testování.

Následující příklad přidá <style> značku s informacemi o stylu, které h1 se zobrazí šedě. Vzhledem k tomu, že se jedná o jediný styl, zbytek HTML se zobrazí s výchozími styly prohlížeče.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Při zobrazení v prohlížeči se text "Vítejte" ve <h1> značce zobrazí šedě.

Snímek obrazovky vykreslené stránky H T M L zobrazuje záhlaví 1 šedě.

Použití stylů ve formátu HTML pomocí šablon stylů CSS

Když přidáte styly do jazyka HTML (Hypertext Markup Language), je nejlepší udělat styly v samostatném souboru CSS. Když několik souborů HTML používá stejný CSS, mají konzistentní vzhled. Navíc je aktualizace jednoho souboru CSS jednodušší než aktualizace jednotlivých souborů HTML.

Pokud chcete odkazovat na soubor CSS, použijte link element.

link má dva atributy a relhref. rel slouží k identifikaci typu prostředku, na který odkazujete, šablony stylů pro šablony stylů. href slouží k identifikaci cesty k souboru CSS. Pokud byl soubor CSS ve stejné složce jako váš soubor HTML a měl název style.css, můžete na něj na stránku odkazovat pomocí následujícího postupu:

<link rel="stylesheet" href="style.css">

Nyní máte alespoň dva soubory, .html soubor a .css soubor. Předchozí příklad by měl soubor HTML, který odkazuje na šablony stylů CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>