Třídy a identifikátory

Třídy

Mějme 3 odstavce z nichž jeden chceme mít červený:

CSS

.vyrazny {color: red;}

Třída začíná tečkou a poté následuje název třídy (mezi tečkou a názvem není mezera!).
Název píšeme bez diakritiky a mezer. Název může být libovolný, avšak neměl by obsahovat znaky jako otazník, vykřičník, … a neměl by začínat číslicí, nebo nám to nepojede.

Možná teď někoho napadne, proč jsem zvolil slovo vyrazny a ne třeba cerveny. S barvami to je totiž trochu ošidnější. Co když se mi červený odstavec přestane líbit a předělám ho třeba na oranžový nebo nějak jinak zvýrazněný? Potom bych musel přepsat i třídu, aby mě to nemátlo. Proto jsem volil univerzálnější název třídy, který je výstižný i po případné změně vlastnosti odstavce.

V HTML pak odstavci přiřadíme danou třídu následovně:

HTML

<p>První odstavec…</p>
<p class=“vyrazny“>Druhý a červený odstavec…</p>
<p>Třetí odstavec…</p>

Zápis je podobný, jako když tagům přiřazujeme vlastnosti. Zkrátka slovo class (z anglického třída), za ním rovnítko a uvozovky. Mezi uvozovky potom napíšeme název třídy (bez tečky!). Tečka se píše pouze do CSS, aby bylo poznat, že se jedná o třídu, HTML třídu rozliší podle slova class. Danou třídu pak můžeme použít vícekrát a na různé tagy.

Vícenásobné třídy

Užitená pomůcka, abychom nemuseli definovat další třídy a zbyteně si tak nezařádili CSS soubor. Mějme v CSS definovány dvě třídy. Jedna bude barvit písmo na červeno a druhá bude udávat zvětšený rozestup mezi písmeny:

.vyrazny {color: red;}
.prostrkani {letter-spacing: 2px;}

Na stránce pak například máme nějaké odstavce červené a nějaké s prostrkanými písmeny. Najednou si však usmyslíme, že chceme mít jeden dostavec červený a zároveň s prostrknanými písmeny. Definovat další třídu, do které bychom nacpali obě vlastnosti by bylo neefektivní, proto použijeme vícenásobnou třídu. V HTML to pak vypadá takto:

<p class=“vyrazny prostrkani“>Červený odstavec s prostrkanými písmeny…</p>

Mezi uvozovky napíšeme název další třídy, oddělený mezerou (mezi názvy je pouze mezera, ne čárka). Jednotlivé třídy pak jsou dále aplikovat i na jiné tagy.

Identifikátory

Zapisují se podobně jako třídy, jediný rozdíl je, že v CSS se na začátak identifikátoru píše místo tečky # a v HTML se místo slova class píše id. Identifikátor má také vyšší prioritu než-li třída (přebije třídu) i když je třída v CSS zapsaná později. Pro lepší pochopení je tu příklad.
Identifikátor by se pak na stránce měl vyskytovat (na rozdíl od třídy) pouze jednou.

Co se týká vykreslení v prohlížeči, není mezi třídou a identifikátorem rozdíl. Na snadě je tedy otázka, proč používat identifikátory, když se vykreslí stejně jako třídy a mají navíc omezení. Identifikátory se totiž uplatní ve skriptech se kterými můžeme naše stránky provázat. Pokud ale nepracujete na svém webu se skripty, kde byste identifikátory použili, a ani to nemáte v plánu, můžete klidně používat pouze třídy.

CSS

#vyrazny {color: red;}

HTML

<p id=“vyrazny“>Červený odstavec…</p>

Pokud třída a identifikátor nebudou obsahovat stejné vlastnosti, které by se hádaly, můžeme u tagu klidně třídu a identifikátor použít současně.

Je tu i hvězdička

Pokud do CSS napíšeme tento zápis:

* {color: green;}

bude na stránce vše (to co půjde) obarveno na zeleno.

Následující dva zápisy potom znamenají to samé – všechny odstavce na stránce budou zelené.

* p {color: green;}
p {color: green;}

V tomto případě tedy není hvězdička nutná. O to větší využití pak má v zápise:

CSS

p * {color: green;}

Ano, pouze jsme ji přehodili na druhou stranu. Tento zápis říká, že všechny tagy, které jsou v odstavci obsažené budou zelené (respektive zelený budem obsah, který je do nich zabalen).

HTML

<p>Všechny tagy obsažené v tomto odstavci se budou vykreslovat
<em>zelenou</em> barvou. Přesněji řečeno, obsah, který je do tagů uzavřen, bude vykreslen <strong>zelenou</strong> barvou. Tagy si však ponechávají i svoje vlastnosti.</p>

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Zápis CSS Div a span Připojení CSS k HTML Co je CSS