Gratulujeme! Máš za sebou první polovinu kurzu
Naučíme se používat CSS třídy a stylovat pomocí nich pouze vybrané prvky. Do našeho projektu "Adéla na cestách" přidáme sekce a obarvíme jim pozadí.
Pokračuj se svým kódem z minulé lekce.
Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: https://czchts.cz/htmlcss06
Obsah stránky často potřebujeme členit na oddíly, ať už za účelem stylování nebo z důvodů logického členění dokumentu. Dlouho se používala a stále používá značka <div>, pro jiné než stylovací účely se však dnes používají hlavně sémantické značky <header>, <footer>, <section>, apod.
Značka <div> má mezi ostatními HTML značkami zvláštní postavení. Je to totiž jedna ze dvou značek, která nemá žádný sémantický význam. Lze ji použít jako obecný kontejner, do kterého uzavřeme další HTML prvky, které chceme mít z nějakého důvodu pohromadě. Značka <div> jako taková nijak nevypadá. Když obalíme část kódu značkou <div>, "nic" se nestane (většinou).
Značka <div> se často používá právě a pouze za účelem stylování - např. chceme kolem něčeho udělat rámeček. Na moderních (složitějších) webech můžeme nalézt spoustu značek <div> vnořených do sebe - opět pouze a jen kvůli tomu, aby šel obsah v CSS nastylovat určitým způsobem a dosáhlo se požadovaného vzhledu stránky.
HTML5 zavedlo nové sémantické značky pro členění obsahu. Jedná se hlavně o značky:
Jednoduše popsaný seznam těchto elementů můžeš najít třeba na stránce W3Schools.
Podobně jako <div>, ani tyto sémantické značky "nijak nevypadají" a nemají žádný výchozí styl v prohlížeči. Když do nich zabalíme část obsahu, na pohled se nic nestane. Ale mají sémantický význam, což je důležité například pro vyhledávače a asistenční technologie (čtečky obsahu pro nevidomé, apod.).
Když jejich použití dává smysl, snažíme se upřednostnit použití sémantických elementů před nesémantickým <div>.
Doposud jsme při psaní spoléhali pouze na selektor typu element, tj. že stylujeme obecnou HTML značku. To se hodí pro vytvoření obecných výchozích stylů pro stránku, ale pro detailnější nastavení vzhledu už často ne. Při použití selektoru typu element se totiž styl aplikuje na všechny značky daného typu. My však často potřebujeme styl přidat pouze k jednomu konkrétnímu nadpisu nebo jednomu konkrétnímu stylu, někdy pouze k několika slovům ve větě.
CSS třídu přidáváme v HTML jako atribut class k jakékoliv HTML značce. Atribut přidáváme do otevírací poloviny značky.
Jako hodnota atributu class uvedeme název třídy (jméno, které jsme si pro danou třídu vymysleli). Název třídy musí splňovat následující pravidla:
Stejnou CSS třídu můžeme v HTML přidat k libovolnému počtu různých elementů. Všechny elementy s touto CSS třídou získají vlastnosti pro tuto třídu nastavené v CSS.
Chceme-li stylovat CSS třídu, musíme použít selektor typu třída. Selektor začíná tečkou, za kterou následuje název třídy.
Selektor typu třída má vyšší prioritu než selektor typu element, a to i v případě, kdyby byl selektor typu element zapsaný v CSS jako poslední. Má-li tedy nějaký prvek nastavenou stejnou vlastnost zároveň jako element i pomocí CSS třídy, zvítězí hodnota nastavená pro danou vlastnost pomocí třídy.
Máme-li například následující kód:
Náš nadpis je element h1 a zároveň má na sobě nastavenou třídu nazevknihy. Třída má v CSS nastavenou zlatou barvu, element h1 barvu červenou. Navíc je zápis s červenou barvou v CSS později. Mohlo by se tedy zdát, že minimálně podle pravidla "poslední zápis v CSS vyhrává" by mělo platit, že nadpis bude červený. Selektor typu třída má ale vyšší prioritu (přesný odborný termín v CSS je, že má vyšší specificitu).
Při moderním způsobu psaní CSS se snažíme obecné elementy stylovat co nejméně a na psaní většinu stylů aplikovat na HTML právě přes CSS třídy.
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.