==== Opakování z minula ==== S použitím předchozích znalostí o [[krouzek:html|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ů ''%%Druhá stránka%%'' 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 ''%%%%''. Ten se musí nacházet v hlavičce (''%%%%'') 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 ''%%%%'' //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: * **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. ==== Příklad CSS pravidla ==== Nyní si představme jednoduchý příklad CSS pravidla: /* Selektor - vybere všechny nadpisy

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ě (''%%

%%'') 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 ''%%%%'', všechny obrázky v dokumentu. CSS uvnitř