Kaskádové styly po IV. a naposledy

Jiří Kosek ml.

Dnes ukončíme naše povídání o kaskádových stylech. Jelikož jsme již vše potřebné probrali, bude dnešní pokračování obsahovat pouze další ukázku použití stylů. Dnes si ukážeme, jak v praxi použít styl, jehož definice je uložena v separátním souboru. Tento způsob práce se styly je výhodný tehdy, když chceme, aby více dokumentů mělo stejný vzhled. Svůj styl si tak může vytvořit třeba firma pro firemní Web a používat ho ve všech stránkách.

Teď již k naší ukázce. Styl uložíme do souboru music.css:

BODY { background: silver url(noty.gif) } 

.logo { 
    color: pink;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 21pt;
    text-align: center;
    width: 100px;
    float: right;
    margin-right: 20px;
    border: 5px ridge red }

.amp { font-size: 45pt }

.pop { letter-spacing: 5pt }

.logo HR { 
    color: white;
    width: 90% }

.disco { 
    color: white;
    font-size: 8pt;
    text-transform: uppercase;
    margin: 0px;
    border-width: 0px;
    padding: 0px }

.verse { 
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif }

.author { 
    font: bold 20pt Script, Zapf-Chancery, cursive }

H1 { 
    text-transform: lowercase;
    font-family: Arial Black, sans-serif;
    font-weight: 900 }

Styl ke stránce připojíme pomocí elementu LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Použití stylů</TITLE>
<LINK REL=StyleSheet TYPE="text/css"
      HREF="music.css">
</HEAD>

<BODY>

<DIV CLASS=logo>
ROCK<BR>
<SPAN CLASS=amp>&amp;</SPAN><BR>
<SPAN CLASS=pop>POP</SPAN>
<HR>
<SPAN CLASS=disco>Diskografie</SPAN>
</DIV>

<H1>Living In The Past</H1>

<SPAN CLASS=author>by Ian Anderson</SPAN>

<PRE CLASS=verse>
Happy and I'm smiling,
walk a mile to drink your water.
        ....
Oh, we won't give in,
we'll keep living in the past.
</PRE>

</BODY>
</HTML>

Na obrázku 1 je zobrazen výsledek v prohlížeči. Vidíme, že pomocí jednoduchého stylu, lze dosáhnout zajímavých grafických efektů. Na druhém obrázku si můžeme prohlédnout, jak dopadne zobrazení v prohlížeči, který styly nepodporuje. Stránka již sice není tak pěkná, ale i tak obsahuje všechny informace.

Samotný zápis stránky je poměrně přehledný, protože nevyužívá velké množství atributů a elementů, kterými je možno ovlivňovat výsledné formátování stránky. Použití těchto atributů a elementů vede k tomu, že se nevyznačuje logická struktura stránky, ale spíše její vizuální podoba. Použití stylů přesouvá definici vzhledu stranou do stylu a umožňuje se při tvorbě stránek soustředit na správné strukturování informací.

Se styly se sice dnes rozloučíme, ale ne na dlouho. V příštím ročníku Computerworldu se můžete těšit na Téma týdne věnované dynamickému HTML. Dynamické HTML umožňuje vytvářet vysoce interaktivní stránky právě použitím stylů v kombinaci se skripty.

Obr. 1: Stránka je zobrazena podle stylu

Obr. 2: Zobrazení stránky bez použití stylu