Obsah

Opakování z minula

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

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

Následuje ChatGPT, rozšířeno a upraveno

Úvod do CSS (Cascading Style Sheets)

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.

Co je CSS?

vlastností CSS:

Příklad CSS pravidla

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ů.

CSS Selektory

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:

CSS Vlastnosti

Tady jsou ty nejpoužívanější: