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>
