Nebudeme zde hlouběji popisovat všechny vlastnosti CSS. Problematika je značně obsáhlá a vydala by na samostatnou knihu. Velmi kvalitně je vše zpracované např. v knize [Sta-03]. Popíšeme si zde však některé zajímavé a často využívané CSS konstrukce.
Layout webu
Layout webu, tedy jeho základní kostru často autoři specifikovali pomocí tabulky. Nyní si však ukážeme že to jde i bez nich a jaké nám to přináší výhody.
Dejme tomu, že chceme pro naše webové sídlo použít typické dvousloupcové rozložení se záhlavím a zápatím. Levý sloupec bude navigační menu, pravý bude obsahovat text stránky.
Kompletní kód pro definici tohoto beztabulkového layoutu je stručný:
<body> <div id="header">Moje webová stránka</div> <div id="menu">Navigační menu</div> <div id="content">Vítejte na mých stránkách</div> <div id="footer">© 2005</div> </body>
#header {
width: 560px;
height: 20px;
padding: 10px;
border: 1px solid black;
background-color: #ffffcc;
font-size: 120%;
font-weight: bold;
margin-bottom: 5px;
}
#menu {
width: 150px; height: 300px;
border: 1px solid black;
background-color: #ccffcc;
padding: 5px;
margin: 0 5px 5px 0;
float: left;
}
#content {
height: 300px;
float: left;
width: 403px;
padding: 5px;
border: 1px solid black;
}
#footer {
width: 580px;
height: 20px;
text-align: center;
clear: both;
border: 1px solid black;
background-color: #ccccff;
}
CSS styl je jednoduchý, přehledný a dělá přesně to, co bychom dříve vytvářeli tabulkovým layoutem.
Tento postup má také jednu obrovskou výhodu. Podívejme se na obrázek, který znázorňuje jak uvidí naši stránku uživatel s vypnutými kaskádovými styly (třeba v nějakém archaickém prohlížeči).
Vidíme, že i „nestandardní“ uživatel se bez problémů dostane k informacím na stránkách i když je vidí jinak zobrazené. Náš web je tedy přístupný. A přesně to přece je při tvorbě WWW stránek našim cílem..
Seznamy
Seznamy jsou jedním z nejčastěji využívaných konstrukcí na webových stránkách. Slouží nejen pro klasické výčty, ale můžeme je efektivně využít i pro navigační komponenty, např. menu. Výhodou použití seznamu pro navigaci je skutečnost, že i v prohlížeči bez CSS bude stránka přístupná.
Ukažme si, jak snadno lze s obyčejným seznamem pracovat.
<ul> <li>Jedna</li> <li>Dvě</li> <li>Tři</li> </ul>
ul { list-style-type: none; }
li {
width: 50px;
height: 20px;
font-weight: bold;
background-color: #ccffcc;
margin-bottom: 1px;
padding: 5px;
}
ul { list-style-type: none; }
li {
display: block;
float:left;
width: 50px;
height: 20px;
font-weight: bold;
background-color: #ccffcc;
border: 1px solid #00cc00;
text-align: center;}
Jak tyto CSS ovlivňují formátování seznamu nám ukazuje následující obrázek. Pokud bychom navigační menu na webu formátovali metodou B, tak by starší prohlížeče kterým bychom odřízli přístup k CSS menu formátovaly metodou A, což je jistě přípustné.
Je patrné, že seznamy můžeme formátovat libovolným způsobem a stále zachovávají svůj logický význam. Není problém definovat jim např. jiné odrážky (třeba obrázkové) a zanořovat je do sebe s různým stylem formátování na jednotlivých úrovních.
Odkazy
Odkazy tvoří nedílnou součást každého webu a i jim je třeba věnovat pozornost při jejich formátování. Při práci s odkazy máme k dispozici čtyři pseudotřídy:
:link- adresa v odkazu ještě nebyla navštívena:visited- adresa v odkazu již byla navštívena:hover- odkaz na který uživatel ukázal (kurzor myši je nad danou plochou):active- prvek, který byl aktivován (např. kliknutím myši)
Těmito pseudotřídami můžeme měnit vzhled a chování odkazů. Jakým způsobem to provedeme,
záleží již jen na našich potřebách. Je však vhodné z uživatelského hlediska vždy rozlišovat mezi
odkazem neaktivním (:link) a odkazem, na který uživatel ukáže myší
(:hover). Taktéž doporučujeme vždy dávat jiné formátování pro odkazy navštívené
(:visited) aby uživatel měl přehled, kde již byl.
<a href="http://www.pspad.com">Programátorský editor PSPad</a>
a { text-decoration: none; }
a:link { color: #ffffff; }
a:visited { color: #0000ff; }
a:hover { text-decoration: underline; }
a:active { color: #ff0000; }
Dalším zajímavým vylepšením odkazů je přidání atributu title s krátkým popiskem
odkazu. Když na odkaz pak uživatel najede myší, tento popisek se mu zobrazí v „bublinové
nápovědě“.
<a href="http://www.pspad.com" title="Freeware programátorský editor">PSPad</a>
Plovoucí objekty a obtékání textu
Do textu obvykle začleňujeme obrázky, tabulky a libovolné další obdélníkové elementy (tzv. boxy). Lze snadno zařídit, aby text naše vložené objekty efektivně obtékal.
<img class="left" src="pic1.jpg" width="150" height="112" alt="Obrázek" /> <p>Lorem ipsum dolor sit amet...</p> <img class="right" src="pic2.jpg" width="150" height="112" alt="Obrázek" /> <p>Sed vestibulum...</p> <p>Aliquam volutpat dui pharetra pede...</p>
p { text-align: justify; }
img.left {
float: left;
margin: 0 10px 0 0;
}
img.right {
float: right;
margin: 0 0 0 10px;
}
Tímto postupem nahradíme mimo jiné zastaralý atribut align,
který se v HTML hojně využíval.
Pokud vás zaujal nesmyslný „latinský“ text, který jsme v této ukázce použili, pak vězte že se jedná o tzv. Lorem Ipsum, neboli výplňový pseudo-text. Používá se všude tam, kde potřebujeme vidět jak bude sazba stránky vypadat ale nechceme tam umisťovat nějaký konkrétní text.
Lorem Ipsum nic nevyjadřuje, jen představuje typický tok textu. Na adrese http://www.lipsum.org si jej můžete vygenerovat libovolné množství.
Rychlá obrázková tlačítka
Často chceme mít obrázková tlačítka a po najetí kurzorem myší nad toto tlačítko změnit jeho vzhled (vyměnit obrázek). Nejčastějším řešením této situace býval JavaScript, který obrázky měnil. Ten však není vůbec potřeba. Vše se dá elegantně vyřešit v CSS.
Když chceme obrázek měnit, musí se do prohlížeče načíst dva obrázky - jeden „aktivní“ a jeden „neaktivní“. Když pak nad příslušné místo najedeme myší, prohlížeč obrázky zamění, avšak často způsobuje nehezké probliknutí. Řešení je snadné - stačí oba obrázky spojit do jednoho a změnit jen jeho umístění.
Připravíme si tedy obrázek, který v sobě bude slučovat „aktivní“ i „neaktivní“ stav.
Do XHTML dokumentu přidáme toto tlačítko jako běžný odkaz:
<a class="home" href="index.html"><span>Home</span></a>
A nadefinujeme příslušné CSS styly:
a.home {
background: url("home.png") 0 0 no-repeat;
display: block;
width: 50px;
height: 28px;
cursor: pointer;
}
a.home:hover {
background-position: -50px 0;
}
a.home span {
display: none;
}
Vidíme, že celá finta spočívá v posunutí zobrazení obrázku o -50px při akci
:hover.
Povšimněme si i toho, že v prvku <span>jsme ponechali textový nápis
„Home“, u kterého jsme jen vypnuli jeho zobrazení pravidlem display:none.
Tato drobnost přispívá k přístupnosti našeho webu - uživatelé, jejich
prohlížeč CSS nepodporuje uvidí prostý textový odkaz.
Tabulky
Nakonec se ještě zmíníme o tabulkách. Několikrát jsme již upozorňovali, že tabulky nejsou vhodné pro tvorbu layoutu webu. Avšak to v žádném případě neznamená, že bychom je neměli používat nikdy. Naopak - data, která patří do tabulky do ní umístíme. Ukažme si jak takovou tabulku naformátovat.
<table border="1" summary="Parallel bitonic sort algorhitm results table"> <caption>Bitonic sort benchmark result in microseconds.</caption> <tr> <th>Node - Array Size</th> <th>Cray T3E-900</th> <th>Alphaserver ES40</th> </tr> <tr> <td>4 - 1024</td> <td class="right">45,276</td> <td class="right">24,169</td> </tr> <tr> <td>8 - 1024</td> <td class="right">107,893</td> <td class="right">44,904</td> </tr> <tr> <td>16 - 1024</td> <td class="right">168,855</td> <td class="right">88,952</td> </tr> </table>
Standardně bez stylů bude tato tabulka zobrazena takto:
Pokud však přidáme několik CSS pravidel, můžeme její vzhled hodně vylepšit.
table {
border-top: 1px solid black;
border-left: 1px solid black;
border-collapse: collapse;
}
table caption {
font-size: 100%;
font-weight: bold;
padding-bottom: 5px;
}
th { background-color: #ffffcc; }
th, td {
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 5px;
}
td.right { text-align: right; }
Delší tabulky můžeme více strukturovat pomocí značek <thead>,
tbody a <tfoot>. Nejen že struktuře tabulky dávají další sémantický
význam, ale také představují prvky, kterých můžeme využít pro další formátování pomocí CSS.
Kaskádové styly jsou jediným vhodným způsobem, jak definovat vzhled a rozložení webového sídla. Jsou velice komplexní a nabízejí veškeré možnosti, které bychom mohli pro tento účel potřebovat. Problém je bohužel s jejich podporou ze strany prohlížečů.