Toto je starší verze dokumentu!
Opakování z minula
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
Ú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 <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ů.