Úvod do CSS (Cascading Style Sheets)

Toto je starší verze dokumentu!

S použitím předchozích znalostí o HTML:

Najděte svoji html stránku z minula
Vytvořte druhý html soubor s jiným obsahem
Propojte oba soubory navzájem prostřednictvím odkazů <a href="druha.htm">Druhá stránka</a>

Pokud by to byly dvě stránky webové prezentace školy, například „O nás“ a „Kontakt“, akorát bychom odkazy dali pěkně k sobě, barevně je odlišili - a vzniklo by menu, na které jste asi zvyklí z webů a aplikací. Čistě s html si tedy můžete vytvořit a publikovat vlastní web! Jaké je ale omezení samostatných html souborů? Co když potřebujete změnit něco „společného“, například přidat položku do menu?

CSS

Jeho syntaxe se výrazně liší od HTML. Slouží také k jinému účelu. Zatímco HTML se snaží zachytit význam, CSS se soustředí na vzhled. Když CSS vepíšete jen tak do stránky, udělá z něj prohlížeč čistě text.

CSS se zapisuje

Dovnitř tagu style, mezi <style> a </style>. Ten se musí nacházet v hlavičce (<head>) stránky
Do atributu style= libovolného tagu
Do externího souboru (třeba vzhled.css), který se dá do stránky připojit v hlavičce tagem <link href="vzhled.css" rel="stylesheet" />

Následuje ChatGPT, upraveno

CSS (Cascading Style Sheets) je jazyk, který slouží k definování vizuálního stylu a formátování webových stránek. Tento nástroj umožňuje oddělit obsah stránky (použitím HTML) od jeho vizuální prezentace. V této úvodní lekci se zaměříme na základní koncepty CSS, jeho syntaxi a způsoby, jak můžete používat CSS k úpravě vzhledu vašich webových stránek.

vlastností CSS:

Selektory: CSS vám umožňuje vybrat konkrétní části HTML dokumentu, na které chcete aplikovat styly. Selektory jsou způsoby, jak definovat, které elementy budou ovlivněny CSS pravidly.
Vlastnosti: CSS definuje různé vlastnosti, jako je barva textu, velikost písma, pozadí, odsazení a mnoho dalších, které mohou být upraveny.
Hodnoty: K vlastnostem přiřazujete hodnoty. Například barvu textu můžete nastavit na „červenou“ nebo pozadí na „#FFFFFF“ (bílou).
Pravidla: CSS pravidla spojují selektory s vlastnostmi a hodnotami. Tato pravidla určují, jak se vybrané elementy budou zobrazovat.
Kaskáda: Termín „cascading“ ve jméně „Cascading Style Sheets“ znamená, že CSS pravidla mohou být děděna a přepsána. To umožňuje vytvořit hierarchii stylů a věnovat se obecným a specifickým pravidlům.

Nyní si představme jednoduchý příklad CSS pravidla:

/* Selektor - vybere všechny nadpisy <h1> na stránce */
h1 {
    /* Vlastnost - nastaví barvu textu na modrou */
    color: blue;
    /* Vlastnost - nastaví velikost písma na 24px */
    font-size: 24px;
}

Toto pravidlo vybere všechny nadpisy první úrovně (<h1>) na stránce a nastaví jejich textovou barvu na modrou a velikost písma na 24 pixelů.

Typový selektor

Aplikuje se na typy tagů - může třeba ovlivnit všechny odstavce, všechny odkazy <a>, všechny obrázky v dokumentu.

CSS uvnitř <style>, nebo v externím souboru:

p {
    color: blue;
}

HTML v <body> stránky:

<p>Toto je odstavec s modrým textem.</p>

ID selektor

Každý HTML tag může mít atribut id= obsahující jeho identifikátor. Ten by měl být na stránce unikátní.

CSS pravidlo

#header {
    background-color: lightgray;
}

HTML kód

<div id="header">Toto je záhlaví s pozadím v barvě lightgray.</div>

Třídní selektor

Každý tag může mít atribut class ve kterém je jedna či více názvů tříd, oddělené mezerami. Můžete si tak vytvořit třídu na nějak související prvky - například všechny externí odkazy (vedoucí na jiné weby) chcete ukázat jinou barvou. Nebo v knížce vysvětlující rámeček - může jich být víc, ale vzhled je třeba nastavit pouze jednou.

CSS pravidlo

.button {
    background-color: green;
    color: white;
}

HTML kód

<button class="button">Klikněte zde</button>

Selektor potomka (Descendant Selector)

Využívá se hierarchie HTML - každý tag (krom kořenového <html>) má svého jednoho rodiče (parent). Některé tagy mají potomky (children). HTML tedy tvoří datovou strukturu strom.

CSS pravidlo

ul li {
    list-style-type: square;
}

HTML kód

<ul>
    <li>První položka seznamu</li>
    <li>Druhá položka seznamu</li>
</ul>

To jsou nejdůležitější druhy selektorů v CSS. Dají se i kombinovat, například:

p.pink cílí všechny odstavce s třídou pink
table#infotabulka td ovlivní všechny buňky v tabulce s id infotabulka

Opakování z minula

CSS

Úvod do CSS (Cascading Style Sheets)

Co je CSS?

Příklad CSS pravidla

CSS Selektory

Typový selektor

ID selektor

Třídní selektor

Selektor potomka (Descendant Selector)

Kroužek Javascriptu