Kaskádové styly – pseudotřídy se představují

15. března 2000

•

V minulém díle seriálu jsem naznačil, že dnes bude řeč o pseudotřídách, takže plním slib. Nebudu tady uvádět žádné právnicky přesné vysvětlení, co jsou to pseudotřídy, protože jejich význam snadno pochopíte z příkladů. Kromě tohomi vysvětlení, že „pseudotřídy jsou třídy, která nejsou zapsány přímo v HTML“ nepřipadá příliš názorné. Proto se budu věnovat přímo konkrétním pseudotřídám.

Určitě už jste viděli odkazy, které změní barvu pozadí, pokud na ně najedete myší. Tento trik lze snadno zařídit pomocí stylů třeba takto:

A:hover { background-color: aqua; }

Třída hover je pseudotřída, která se použije, pokud přes odkaz přejedeme myší. Pokud se myš posune mimo odkaz, vše se vrátí tak, jak to bylo předtím. Snadno si odvodíte i to, že nejste omezeni jenom na změnu barvy pozadí, ale můžete používat veškeré možnosti kaskádových stylů CSS. Třeba následující zápis při přejetí odkazu myší změní barvu pozadí, nastaví tučné písmo a kurzívu:

A:hover {
  background-color: aqua;
  font-weight: bold;
  font-style: italic;
}

S pseutřídou hover se dají dělat slušné efekty, záleží na vašem grafickém cítění. Je to velmi jednoduché, a můžete tak alespoň trochu rozpohybovat vaše stránky.

Další pseudotřídy, které se váží k odkazům, jsou pseudotřídy link a visited. Link představuje odkaz, který ještě váš čtenář nenavštívil a visited zase platí pro čtenářem již navštívený odkaz. Například můžeme vytvořit styl, který bude navštívené odkazy zobrazovat červeně, a nenavštívené zeleně:

A:link { color: red; }
A:visited: { color: lime; }

Další pseudotřídou pro odkazy je pseudotřída active, která znamená odkaz, na který je právě kliknuto myší.

Všechny zmiňované pseudotřídy se váží především k odkazům, tedy ke značce <a>. Další zmiňované pseudotřídy se naopak týkají spíše odstavců. Jedná se o pseudotřídy first-line a first-letter.

Pseudotřída first-letter by se měla týkat prvního písmene,a zobrazit toto první písmeno odlišně. Pro názornost ukáži jeden zápis a jeho výsledek:

p:first-letter { font-size:300%; color:blue; }

A výsledek může vypadat nějak takto:

Odstavec s iniciálou.

Podobně by měla pracovat i pseudotřída first-line. Jediný rozdíl je ten, že first-line by měla odlišně zobrazit celý první řádek. O tom, jaký kus textu bude na prvním řádku rozhoduje třeba šířka okna prohlížeče, takže je to pokaždé jiný kus textu.

Bohužel musím napsat, že pseudotřídu first-letter a first-line se mi nepodařilo rozchodit ani na Internet Exploreru verze 4.0 (u verze 5 nevím, musel jsem ji kvůli chybovosti z počítače odinstalovat), ani na Netscape Navigatoru verze 4.51. Takže je to spíše hudba budoucnosti. Ostatní pseudotřídy, které se týkají odkazů pracují v IE 4.0 celkem spolehlivě, ale v NN 4.51 se mi je nepodařilo rozchodit.