CSS > Třídy a identifikátory

Třídy a identifikátory

V kapitole o zápisu CSS jsem si ukazovali obecný zápis kaskádových stylů:

selektor {
  css-vlastnost1: hodnota-css-vlastnosti1;
  css-vlastnost2: hodnota-css-vlastnosti2;
  }

Následně jsme jako selektor psali tagy, a přiřazovali jim jednotlivé vlastnoti. Například pro modré odstavce na naší stránce:

p {color: blue;}

Co když však chceme mít první odstavec „modrej“, druhý „červenej“, třetí „takovej“ a čtvrtý „makovej“?

Řekneme si tedy něco o třídách a identifikátorech.

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>


Pseudotřídy a pseudoprvky

CSS a odkazy

Dědíme

A konečně ta kaskáda



Další kapitola:

Div a span

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Více…
 

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 
 TOPlist