Kaskádové styly – kouzelné třídy

1. března 2000

•

Pokud jste alespoň zběžně přečetli minulé díly o CSS, jste již dostatečně schopní používat kaskádové styly CSS v praxi. Proto se dnes budu zabývat třídami a v příštím díle pseudotřídami, což je věc, která vámpřidá hodně elegance do vytváření stylů.

Kromě toho lze pseudotřídami částečně rozhýbat vaše stránky, byť sice jenom v omezené míře, ale velice jednoduše lze získat "za málo peněz hodně muziky". Třídy v kaskádových stylech představují nástroj, který vám umožní lépe mířit ve vašich stránkách. Začněme příkladem, řekněme, že budete chtít mít stránku, kde písmo v některých zvolených odstavcích bude psáno kurzívou, zatímco v ostatních ho nechcete ovlivňovat. Nastavit odstavce na kurzívu je velice jednoduché, můžeme to udělat třeba takto:

p { font-style: italic; }

Problém ale je, že nechcete nastavovat všechny odstavce na kurzívu, ale jenom nekteré. A právě k tomuto slouží třídy. Musíme tedy náš styl přepsat třeba takto:

p.kurz { font-style: italic; }

Zápis p.kurz znamená, že všechny odstavce, které budou mít třídu kurz, budou psány kurzívou. Už nám tedy zbývá jenom ukázat, jak říci v HTML, že odstavec má třídu kurz:

<p class="kurz">První odstavec chci vypsat kurzívou.</p>
<p>Druhý odstavec nebude kurzívou.</p>

A výsledek:

První odstavec chci vypsat kurzívou.

Druhý odstavec nebude kurzívou.

Většina značek v HTML má možnost přidání atributu class, která určuje třídu pro kaskádové styly CSS. Můžeme atribut class přidat k jakékoli značce, u které je možné ovlivňuje vzhled. Což jsou prakticky všechny značky s výjimkou několika málo značek: <html>, <head>, <meta>, <style>, <basefont>, <title>, <base> a <param>. Jak jistě uznáte, u těchto několika málo značek to nemá moc velký smysl. Kdybych chtěl napsat jinak, kde všude se smí značka použít, napsal bych, že u všech značek v těle HTML stránky. To znamená v oblasti mezi značkami <body> a </body>, a dokonce i u značky <body> samotné. Pomocí stylů pak můžeme přesněji cílit naše úpravy vzhledu dokumentu. Ukážeme si několik příkladů, které ukáží, jak dobře lze třídy využít.

První příklad nám obarví všechno, co má třídu zelen na zeleno. Styl, který to dokáže, je velmi jednoduchý:

.zelen { color: lime; }

A nyní výpis pokusného HTML:

<html>
<head>
<title>titulek</title>
<style type="text/css"><!–
.zelen { color: lime; }
–></style>
</head>
<body>
<h2 class="zelen">Nadpis</h2>
<p>Toto je odstavec a toto <span class="zelen">slovo</span>
chci zeleně.</p>
</body>
</html>

A výsledek:

Nadpis

Toto je odstavec a toto slovo chci zeleně.

V příkladu jste si mohli všimnout značky <span>, která je přidána do HTML zejména pro účely kaskádových stylů. Používá se tehdy, jestliže potřebuji část textu, a nebo prostě pro nějaký větší kus HTML kódu zavést nějakou třídu, a té přiřadit určitý vzhled. Samotná značka <span> vůbec nic neovlivňuje, a pokud nepoužijete styly, tak se chová jako by tam vůbec nebyla. Pro lepší pochopení uvedu jiný kus HTML stránky, který používá značku <span>. Zde je celá tabulka a ještě jeden odstavec uzavřen mezi <span> a </span> a proto bude obojí zobrazeno pomocí stylů pro třídu copyright:

<span class=copyright>
<hr>
<table width="100%">
<tr>
<td align="left">Autor: Miloslav Ponkrác</td>
<td align="right">Poslední změna: 1.3.2000</td>
</tr>
</table>
<p>Za vydání článku děkuji serveru Interval</p>
</span>

Pro podobný účel jako značka <span> je určena i značka <div>. Používá se úplně stejně, ale samotná značka <div> ovlivňuje vzhled i bez použití stylů. Jak uvádí norma pro HTML, značka <div> je bloková značka. Při jejím použití v HTML stránce vám odřádkuje a začne psát na novou řádku. To je jediný rozdíl mezi <div> a <span>.

Ještě krátce bych se měl zmínit o tom, že názvy tříd je dobré volit pečlivě tak, aby obsahovaly pokud možno pouze písmena anglické abecedy, číslice a případně pomlčku. Velice vám to zjednoduší případnou práci s třídami. Pro přesnost bych měl uvést, že prohlížeče v názvech tříd nerozlišují malá a velká písmena, takže napíšete-li jednou název třídy jako "tucne" a podruhé ji použijete pod názvem "TuCNe", mělo by se vše zobrazit bez problémů. Na druhé straně takovéto střídání velkých a malých písmen není dobré a svědčí o neprofesionalitě autora stránky.

V tomto díle jsem se zabýval třídami podle kaskádových stylů tak, jak je to uvedeno v normě CSS I. Novější norma CSS II má práci s třídami dost rozšířenou, a kromě toho umožňuje i další triky. Vzhledem k tomu, že zatím prohlížeče jsou vůči této normě CSS II dost pozadu, rozhodl jsem se neuvádět čtenáře do zmatku. Jinak řečeno, dnes těžko naleznete prohlížeč, který by vám styly podle normy CSS II zobrazil, a veškeré povídání by bylo na čistě teoretické úrovni bez možnosti si jej vyzkoušet. Proto budu psát více podrobněji o možnostech tříd v normě CSS II až později.

Protože jsou ale možnosti tříd v normě CSS II velice zajímavé a užitečné, letmo se o nich zmíním. Těžko si je ale někde vyzkoušíte. Tato norma umožňuje použít u jedné značky více tříd, které jsou oddělené jednou mezerou:

V našem případě má odstavec, který v HTML představuje značka <p> hned tři třídy. A odstavec bude zobrazen podle všech tří stylů, pokud si vzájemně nenařizují něco protichůdného.

O dalších možnostech tříd v normě CSS II někdy příště.

Takže to je pro tento díl vše.