Z předchozí části kapitoly vidíme, že styly jsou opravdu mocný a výkonný nástroj pro zlepšení grafického vzhledu našich stránek. Jedinou nevýhodou je, že zatím ne všechny prohlížeče podporují všechny vlastnosti, které jsme zde popsali. Netscape Communicator podporuje styly až od verze 4.0. Internet Explorer je podporuje již od verze 3.0. Bohužel ani jeden z prohlížečů nepodporuje všechny vlastnosti stylů. Naštěstí každá nová verze přináší výrazná zlepšení v podpoře stylů. Styly tedy může hojně používat, ale stránky musíme psát tak, aby svůj význam neztratily ani v prohlížečích, které styly nepodporují.
Nyní si na jednoduché stránce prakticky ukážeme použití stylů.
Nejprve si do souboru mujstyl.css uložíme definici
stylu:
BODY { text-align: justify;
background-color: white;
color: black }
A:link { color: blue }
A:visited { color: gray }
A:active { text-decoration: blink }
P { text-indent: 20pt;
margin-top: 0pt }
.nadpis { text-align: center }
H1 { text-transform: uppercase;
background-color: blue;
color: yellow;
padding: 4px }
H2 { font-family: Arial, sans-serif }
.autor { font-variant: small-caps }
Styl ke stránce připojíme s využitím elementu LINK.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Stylově stylová stránka</TITLE> <LINK REL=StyleSheet HREF="mujstyl.css" TYPE="text/css"> </HEAD> <BODY> <DIV CLASS=nadpis> <H1>Stylově stylová stránka</H1> Jiří Kosek </DIV> <H2>CSS</H2> Káskádové styly dokumentů umožňují standardizovaným způsobem kontrolovat grafický vzhled webovských stránek. Jejich popis nalezneme v dokumentu <A HREF="http://www.w3.org/pub/WWW/TR/REC-CSS1.html">Cascading Style Sheets, level 1</A> jehož autory jsou <SPAN CLASS=autor>Håkon Wium Lie</SPAN> a <SPAN CLASS=autor>Bert Bos</SPAN>. <P>Jedinou nevýhodou je zatím malá podpora prohlížečů. To se však rychle mění, takže brzy bude mít většina uživatelů webu k dispozici odpovídající prohlížeč. <P>Pomocí stylů můžeme ovlivňovat mnoho vlastností stránky. Použitý řez písma, barvu textu i pozadí, velikost okrajů, vzdálenost mezi odstavci, velikost odstavcové zarážky, způsob zarovnání a mnoho dalšího. </BODY> </HTML>
Výsledné zobrazení naší stránky v prohlížeči Internet Explorer 4.0 si můžeme prohlédnout na obrázku 38 – „Stránka využívající styly“.
