CSS > 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.
Mějme 3 odstavce z nichž jeden chceme mít červený:
.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ě:
<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.
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.
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.
#vyrazny {color: red;}
<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ě.
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:
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).
<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>
Další kapitola:
Chronologický přehled novinek na tomto webu
Prohlédněte si strukturu webu pro snažší orientaci.
Stáhnout celý web (V budoucnu)
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)
Jak můžete podpořit tento web
Poslední aktualizace webu proběhla
24. 3. 2010.