Efekt podświetlana linków (np. jak na naszej stronie), można uzyskać korzystając z tzw. pseudoklas odsyłaczowych. Określa się cztery stany odsyłaczy: wygląd odsyłacza na stronie, wygląd odsyłacza odwiedzonego, wygląd odsyłacza po najechaniu myszką.
… oraz wygląd linku aktywnego (po kliknięciu). Wygląd definiuje się w ten sposób:
| a:link {cecha: wartość; cecha: wartość} – wygląd odsyłacza na stronie a:visited {cecha: wartość; cecha: wartość} – wygląd odwiedzonego hiperłącza a:hover {cecha: wartość; cecha: wartość} – link po najechaniu myszką a:active {cecha: wartość; cecha: wartość} – link aktywny |
Uwaga: należy przestrzegać tej kolejności! Najpierw link, potem visited, hover i na końcu active. Poza tym selektor (a) NIE MOŻE być oddzielony od pseudoklasy (np. hover). Jeżeli napiszemy:
| a:link |
wszystko zadziała bez zarzutu, ale jeżeli wpisalibyśmy
| a: link |
Styl nie zadziała. Skoro teraz już wszystko wiemy, nie pozostaje nam nic innego, jak tylko wypróbować nasz odsyłacz:
| <style type=”text/css”> <!– a:link {color: green; text-decoration:none} a:visited {color: green; text-decoration: none} a:hover {color:red; text-decoration: line-through} a:active {color:blue; text-decoration: none} –> </style> |
