Úvod do HTML a CSS - lekce 6

Podklady ke stažení

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

Členění obsahu na oddíly

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.

Obecný oddíl - div

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.

<div>
<h2>Kontakt</h2>
   <img src="obrazky/pohoda.jpg" alt="Adéla relaxuje">
   <p>Ráda si povídám. O horách, hudbě, prostě o životě.</p>
</div>

Sémantické značky pro členění obsahu - header, footer, section

HTML5 zavedlo nové sémantické značky pro členění obsahu. Jedná se hlavně o značky:

• header - hlavička stránky / dokumentu
• footer - patička stránky / dokumentu
• section - sekce stránky / dokumentu
• main - hlavní obsahová část stránky
• article - článek
• nav - navigace, menu
• aside - doplňkový text k hlavnímu obsahu, někdy také boční pruh (sidebar)
• atd.

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

<header>
   <h1>Adéla na cestách</h1>
</header>

<section>
   <h2>O mně</h2>
   <p>Jmenuji se Adéla, ale všichni mi říkají Áďo...</p>
</section>

<section>
   <h2>Turistický průvodce</h2>
   <p>Pracuji jako turistický průvodce...</p>
</section>    

<section>
   <h2>Kontakt</h2>
   <p>Ráda si povídám. O horách, hudbě, prostě o životě...</p>
</section>

<footer>
   <p>© 2018, Adéla Maříková</p>
</footer>

CSS třídy

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

Atribut class

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.

<h1 class="nazevknihy">
   Honzíkova cesta
</h1>

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:

• nemůže obsahovat české znaky s diakritikou (ěščřž...)
• nemůže obsahovat speciální znaky (@#$%?!...)
• nemůže začínat číslem (ale uprostřed nebo na konci názvu čísla být mohou)
• nemůže obsahovat mezery
• pokud chceme víceslovný název, musíme pro oddělení slov použít buď pomlčku (-) nebo podtržítko (_), což jsou povolené speciální znaky

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.

Selektor typu třída

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.

.nazevknihy {
   font-size: 60px;
   color: gold;
}

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:

<h1 class="nazevknihy">
   Honzíkova cesta
</h1>

.nazevknihy {
   color: gold;
}

h1 {
   color: red;
}

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.

Kontrolní otázky

• K čemu slouží značka <div>?
• Jaké hlavní sémantické elementy pro členění obsahu znáš?
• Kdy se hodí použít <div> a kdy sémantické elementy?
• Jak se jmenuje atribut, kterým se v HTML k elementu přidává CSS třída?
• Jak se zapisuje selektor typu třída v CSS?
• Lze danou CSS třídu použít pouze pro jeden element, nebo ji na stránce můžu použít, kolikrát chci?
• Má vyšší prioritu CSS selektor typu element nebo typu třída?

‍