Abychom mohli pokračovat s HTML, musíme si říci i něco málo o CSS kvůli formátování a struktuře těla stránky.
CSS – Cascading Style Sheets
CSS styly použijeme v podstatě kdekoliv, kde potřebujeme nějak ovlivnit vzhled webu. Ať už umístění jednotlivých prvků, jejich barvu či typ písma.
Napojení
externí soubor – Použití externího souboru pro CSS styly je nejpřehlednější a nejlepší způsob. Styly se Vám pak nemotají nikde v kódu a snadno je použijete kdekoliv na webu. Soubor se připojuje v hlavičce webu pomocí jednoduchého příkazu
<link rel=”stylesheet” type=”text/css” href=”styly.css”>
v hlavičce – Tyto styly se zapisují do hlavičky webu mezi tagy <style></style>
<style>
a { color:blue; }
</style>
přímý zápis – Slouží pouze k ovlivnění prvku, u kterého jsou zapsány. Nepíše se zde, co má ovlivnit pouze, jak to má ovlivnit. V našem případě barvu textu, který je v tagu <span> nastaví na modrou.
<span style=”color:blue;”>text</span>
class, id, tag
tagy – Styly můžeme napojit přímo na HTML tagy. V takovém případě nám daný styl ovlivní všechny takové tagy na stránce.
a { color:red;}
Takto zapsaný styl nám u všech odkazů na webu nastaví červené písmo.
class – Použijeme-li class, tak vytvoříme třídu, kterou následně můžeme přiřadit HTML prvkům, které chceme ovlivnit.
.podrtzeni { text-decoration:underline; }
<span class=”podtrzeni”>nějaký ten text</span>
<span>nějaký ten text</span>
<span class=”podtrzeni”>nějaký ten text</span>
id – Používá se velmi podobně class. Class definuje celou třídu prvků, “id” se používá pro nastylování jednoho prvku (například konkrétní container pro menu).
#tucne { font-weight:bold; }
<span class=”tucne”>nějaký ten text</span>
<span>nějaký ten text</span>
<span class=”tucne”>nějaký ten text</span>
Kombinace
Při používání můžeme zápisy libovolně skládat a kombinovat.
p a { color:red } -> všechny odkazy uvnitř odstavce obarví na červeno, ale ty, které v odstavci nejsou, zůstanou v původní barvě
.blok .cervene { color:red } -> Najde prvky které mají třídu blok a v nich najde prvky, které mají třídu cervene a obarví je na červeno
Příště si povíme něco nejpoužívanějších stylech a co znamenají.
