Třídy a identifikátory

Třídy a identifikátory v CSS slouží k tomu, abychom mohli různé elementy formátovat různě. Například odkazy na stránce. Každý z nás asi chce mít na stránce různé druhy odkazů, ne jen jeden. Jinak seobvykle dělají odkazy v menu, jinak odkazy v textu.

Třída class v CSS

Třídy vytvoříme snadno tak, že k elementu v HTML přidáme atribut class. Jeho hodnotou bude nějaký řetězec písmen, stejný pak budeme používat v CSS stylu jako selektor.

<p class="poznamka">Nějaký text</p>

Tímto říkáme, že tento odstavec bude formátován podle pravidel třídy poznamka, na formátování ostatních odstavců se tato pravidla neprojeví. Teď musíme ještě ta pravidla určit v CSS stylu.

.poznamka {font-size: x-small; color: black}

Teď tedy budeme mít všechny odstavce stejné, jen odstavec s třídou poznamka bude vypadat jinak (malým černým písmem). Resp. jinak budou vypadat všechny odstavce s třídou poznamka, protože stejnou třídu můžeme použít u libovolného množství elementů. Dokonce i u různých elementů.

<p class="poznamka">Nějaký odstavec</p>
<li class="poznamka">Položka seznamu</li>

.poznamka {color: black}  styl se aplikuje na všechny elementy s třídou poznamka
li.poznamka {color: blue}  styl se aplikuje jen na elementy li s třídou poznamka

Dědičnost

Třída každého elementu bude dědit všechny vlastnosti daného elementu a navíc bude mít své vlastní, tedy např.:

Tímto zápisem je řečeno, že všechny odstavce budou zarovnány na střed a jejich text bude mít modrou barvu (první deklarace). Toto obecně platí pro všechny odstavce stránky. Odstavec s třídou poznamka bude mít navíc ještě menší písmo (druhá deklarace). Barva je určená v obou deklarací, v takovém případě ma vyšší prioritu deklarace zadaná později, tedy odstavec s třídou poznamka bude mít černý text. Všechny odstavce tedy budou modré, zarovnané na střed, kromě odstavce s třídou poznamka, ten bude černý, s malým písmem, zarovnaný bude také na střed.

Kontextová deklarace s třídou

Možnost kontextové deklarace platí i pro třídu. Tento zápis říká, že odkazy v odstavci třídy poznamka budou červené.

Identifikátor id v CSS

Identifikátor se od třídy liší tím, že se jedná vždy o jednoznačný identifikátor. To znamená, že ho na každé stránce můžeme použít jen jednou. Tím myslím opravdu na každé stránce, tedy v každém souboru.html jen jednou, v rámci celého webu můžeme stejný identifikátor použít libovolněkrát. Oproti tomu třídu jsme mohli použít libovolněkrát na každé stránce webu.

Identifikátory se tedy používají právě tam, kde je jisté, že se daný element objeví ve stránce jen jednou. Ideálně se tedy hodí pro věci jako je box celé stránky, menu, záhlaví nebo zápatí. Identifikátory se označují dvojkřížkem (#). Jinak je jejich zápis stejný jako zápis třídy.

<div id="menu"> … </div>

#menu {width:14em; background-color:black}
#menu a {color: white}