HaTMatiLka
Lekce 3
Obsah
Bez rámečků
« »
Ten dělá to a ten zas tohle…

Dosud jsme definovali styly textu, ohraničeného různými tagy. Vlatně jsme měnili vlastnosti textu v závislosti na tom, jaký formátovací příkaz mu předchází.

Čas od času nastává situace, kdy je potřeba použít jiné písmo, jiný styl, a není k dispozici žádný volný tag, ke kterému by se dal „přilepit”. Nejčastěji se stane, že potřebuji psát odstavec jiným písmem, než ostatní, přičemž jsem vyčerpal jak <P>, tak <SPAN>. (V minulé lekci jsem se tomu vyhnul tvrzením, že běžné odstavce jsou odděleny pouze <br>.)

Naštěstí existuje možnost tvořit třídy, tedy styl, nezávislý na tagu. Princip je úplně jednoduchý: v definiční části, v místě, kde jsme dosud psali pouze formátovací příkazy, uvedeme jméno třídy, začínající tečkou. Do tagu, který má do příslušné třídy patřit, přidáme další parametr: class="jmeno" (jméno třídy bez tečky).

Příklad
                    
<style><!--
.male  { font-size : 9;  }
.velke { font-size : 32;  }
--></style>

<P class="male">
Text psaný malým písmem.
</P>
<P>
Obyčejný text.
</P>
<P class="velke">
Text psaný velkým písmem.
</P>

Text psaný malým písmem.

Obyčejný text.

Text psaný velkým písmem.

Oklikou jsem se dostal zpět k tagu <SPAN>. Ten má sloužit především k označení krátké části textu, pro nějž platí jiný styl. Obecně může jít o jediný znak, častěji však zvýrazněné slovo či větu. (Ostatně, modrý text poznámek v tomto kursu je dělán — hádejte jak?)

Změna stylu pro jediný znak též není samoúčelná. Například tímto způsobem můžeme udělat různobarevné odrážky v hodnocení (samozřejmě, nechceme-li použít obrázek) nebo textové logo. Další možností je „špeciální” kapitálka na začátku odstavce či kapitoly:

Příklad
                    
<style><!--
.kapitalka { font-size : 32;
           font-family : "Arial CE", "Arial"; }
.plus    {   font-size : 14;
           font-weight : bold;  
                 color : "DD0000"; }
.minus   {   font-size : 14;
           font-weight : bold;  
                 color : "0000EE"; }
--></style>

<span class="kapitalka">H</span>odnocení<br>
<span class="plus">+</span> Dobré a lepší<br>
<span class="minus">-</span> Špatné až blbé<br>

Hodnocení
+ Dobré a lepší
Špatné až blbé
Loga

Možná si řeknete: „Proč používat složitě textově definovaná loga, když přeci stačí vložit obrázek?”
rock
'n'
roll

It's music
for you…!
Na tuto otázku se dá odpovědět buď pokrčením ramen, nebo prostě připomenout, že na tiskárně vypadají obrázky poněkud jinak, než na obrazovce. Navíc „přitáhnout” obrázek chvíli trvá.

Na druhou stranu — obrázek bude vždy zobrazen stejně, zatímco textové logo prostě může záviset na verzi prohlížeče. Ale tam, kde jde pouze o text, a kde můžeme předpokládat stejné prohlížeče (intranet…), je toto řešení vhodné. Zdejší příklad ukazuje jednoduché heslo, ale samozřejmě si lze představit název firmy s adresou a telefonem… (Dovedete si představit změny telefonního čísla ve všech obrázcích?)

Domácí úkol:
Vytvořit jakousi vizitku, tabulku se jménem a adresou, vše za pomoci stylů a tagu <SPAN>.
» Ten dělá to a ten…
» příklad
» <span>
» jeden znak jinak
» příklad
» Loga
» Domácí úkol


Lekce 2

Lekce 4
© Robert R. Šimek, 1998