Kaskádové štýly (Cascading Style Sheets CSS)

Ak váš web začne naberať na mohutnosti, počet stránok sa vyjadruje v desiatkach či stovkách zistíte, že html začina byť dosť nepraktické. A to nehovoríme o tom, keď sa rozhodnete zmeniť "vizáž" vašich stránok. Nekonečné prepisovanie formátu odsekov, zoznamov a nadpisov vám dá poriadne zabrať. Ale naľakajte sa, na pomoc prichádzajú kaskádové štýly.

Pôvodná verzia HTML predpokladala formátovanie textu až pri zobrazení stránky pomocou HTML značiek ako napr.: H1, P, FONT atď. Pomocou CSS si v úvode stránky, alebo v externom súbore vieme vytvoriť niekoľko štýlov, definujeme ich atribúty a v ďalšom texte sa na ne odkazujeme. Celý dizajn webu, (formátovanie, zarovnanie, farby, ..) môže byť uložený v jednom externom súbore.

Štýly vznikli niekedy koncom roku 1996 (CSS1) a rozšírenia v podobe CSS2 sa dočkali v máji 1998, takže dnešné prehliadače by nemali mať žiaden problém s ich interpretáciou. Momentálne (apríl 2004) je vo vývoji verzia CSS3. Kompletnú špecifikáciu CSS2 podľa W3C nájdete na serveri rayman.

Poďme sa bližšie pozrieť na praktické použitie štýlov. Štýly sa dajú v zásade použiť dvoma spôsobmi. Je možné modifikovať už existujúce vlastnosti štýlov (napr. P, H1 ...) alebo vytvárať štýly úplne nové. Pri tvorbe úplne nového štýlu, je potrebné definovať všetky vlastnosti, čo môže byť dosť náročné. V praxi sa preto častejšie používa spôsob, keď "dodefinujeme" nové vlastnosti už existujúcim štýlom.

 

Štýl môžeme definovať niekoľkými spôsobmi.

Predstavme si napr., že chceme definovať štýl nadpisu úrovne 3 (teda zmeniť vlastnosť H3). Urobíme to troma spôsobmi:

Definícia priamo pri značke v dokumente. Definujeme štýl nadpisu H3 tak, aby bol nadpis modrou farbou.

časť zdrojového kódu stránky výsledok v prehliadači
 <H3 style="color: #0000FF">Nadpis 3</H3>

Nadpis 3

 

Definícia v štylopise v hlavičke dokumentu. Definujme štýl nadpisu H3 nasledovne: veľkosť 20 pixelov, farba zelená.

časť zdrojového kódu stránky výsledok v prehliadači
...
<head>
<style type="text/css">
H3 {color: "#00FF00"; font-size: 20px}
</style>
</head>
<body>
...
<H3>Nadpis 3</H3>
...
</body>
...

Nadpis 3

 

Definícia v štýlopise v externom súbore. Definujme štýl nadpisu H3 nasledovne: veľkosť 30 pixelov, farba červená, zarovnanie do stredu.

časť zdrojového kódu stránky/externého súboru výsledok v prehliadači
obsah súboru styl.css:

h3 { color: #FF0000;
        font-size: 30px;
        text-align: Center }
  
obsah html dokumentu:

<head>
<style type="text/css">
@import "styl.css"
</style>
</head>
<body>
...
<H3>Nadpis 3</H3>
...
</body>
...

Nadpis 3

alebo

<head>
<link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body>
...
<H3>Nadpis 3</H3>
...
</body>
...

Nadpis 3

 

No, a čo by sa stalo, keby sme všetky tri definície zlúčil dohromady?

časť zdrojového kódu stránky/externého súboru výsledok v prehliadači
obsah súboru styl.css:

h3 { color: #FF0000;
        font-size: 30px;
        text-align: Center }
  
obsah html dokumentu:

<head>
<style type="text/css">
@import "styl.css";
H3 {color: "#00FF00"; font-size: 20px}
</style>
</head>
<body>
...
<H3 style="color: #0000FF">Nadpis 3</H3>
...
</body>
...

Nadpis 3

Takže nadpis je zarovnaný v strede (podľa styl.css), má veľkosť 20 (podľa definície v hlavičke) a je modrý (podľa defínície pri značke H3). Inak povedané, ak dôjde ku "kolízii" štýlov, aplikuje sa ten, ktorý bol implementovaný ako posledný (alebo ten, ktorý je najbližšie k textu).

 

Pri definovaní vlastností štýlov môžeme postupovať aj spôsobom, kedy vytvoríme novú triedu (class). Trieda je v podstate pomenovanie vlastnosti, alebo súhrnu vlastností, na ktoré sa môžeme potom odkazovať v značke v html dokumente.

 

Ak by sme potrebovali v našom webe používať konkrétnu farbu pri viacerých objektoch, môžeme to spraviť nasledovne:

časť zdrojového kódu stránky výsledok v prehliadači
obsah html dokumentu:

<head>
<style type="text/css">
.farba1 {color: #FF0000}
.farba2 {color: #00FF00}
.farba3 {background-color: #0000FF}
</style>
</head>
<body>
...
<H3 class="farba2">Nadpis 3</H3>
<p class="farba1">text odseku</p>
<TABLE>
<TR>
<TD CLASS="farba3"><p class="farba1">ahoj</p></TD>
</TR>
</TABLE>

...
</body>
...

Nadpis 3

text odseku

ahoj

 

Ukážme si ešte niektoré vlastnosti štýlov:

Relatívne jednotky:
Absolútne jednotky:
Vlastnosti písma:
Farby textu a pozadia:
Formátovanie textu:

Rámčeky (neviditeľný rámček obklopujúci text/objekt, jeho oddelenie od okolitej časti)

Určenie pozície:

Existujú dva odlišné spôsoby určovanie pozície objektu na obrazovke. Absolútny a relatívny. Absolútna pozícia umiestni objekt na do stránku na určené súradnice, bez ohľadu na text okolo neho. Relatívna pozícia určuje, o koľko a má objekt posunúť oproti svojej normálnej pozícii. 

Odkazy:

Štýly môžeme priradiť aj odkazom. Dokonca aj v závislosti od toho, či je aktívny alebo navštívený, príp. ak sa naň nastavíme myškou.

A na koniec, "čerešnička na torte", zmena užívateľského prostredia

Posuvné lišty okna. Nasledujúce informácie nie sú súčasťou štandardu W3C, preto uvedené vlastnosti nebude podporovať každý prehliadač (IE ich podporuje, Netscape nie).

                             
                                 
    <