Pseudoklasa :target
Transkrypt
Pseudoklasa :target
Pseudoklasa :target Jak zapewne pamiętasz, odnośnik w dokumencie XHTML/HTML może odnosić się do strony zewnętrznej lub do wybranego elementu bieżącej strony. Odnośnik wewnętrzny wykorzystuje symbol # i bywa nazywany również kotwicą. Przyjrzyjmy się prostemu listingowi kodu XHTML/HTML, w którym wykorzystałem dwa rodzaje odnośników — zewnętrzny do innej strony oraz wewnętrzny do wybranego nagłówka witryny. <ul> <li><a href="http://helion.pl">Przykładowy odnośnik do helion.pl</a></li> <li><a href="#pierwszy">Przykładowy odnośnik wewnętrzny - pierwszy</a></li> <li><a href="#drugi">Przykładowy odnośnik wewnętrzny - drugi</a></li> </ul> <h1><a name="pierwszy">Pierwszy nagłówek</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p> <h1><a name="drugi">Drugi nagłówek</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p> Kliknięcie pierwszego odnośnika spowoduje otwarcie strony Wydawnictwa Helion. Wybór drugiego odnośnika z listy przeniesie nas do pierwszego nagłówka na stronie. Natomiast wybór trzeciego odnośnika przeniesie nas do drugiego nagłówka umieszczonego na przykładowej stronie. Stosując pseudoklasę :target, możemy wymusić formatowanie elementów będących kotwicami na stronie. Mówiąc prościej, w naszym przykładzie po kliknięciu drugiego lub trzeciego odnośnika formatowaniu zostanie poddany pierwszy lub drugi nagłówek na stronie. Odpowiedni arkusz stylów może mieć następującą postać: *:target { text-decoration:none; color:green; } Natomiast poniżej zamieszczam przykład działania. Klikając poszczególne odnośniki, sprawdź, jak zachowują się nagłówki widoczne na stronie. <<przykład>> <html> 1/3 Pseudoklasa :target <head> <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2"> <title>Tytuł Strony WWW</title> <style type="text/css"> *:target { text-decoration:none; color:green; } } </style> </head> <body> <div> <ul> <li><a href="http://helion.pl">Przykładowy odnośnik do helion.pl</a></li> <li><a href="#pierwszy">Przykładowy odnośnik wewnętrzny - pierwszy</a></li> <li><a href="#drugi">Przykładowy odnośnik wewnętrzny - drugi</a></li> </ul> <h1><a name="pierwszy">Lorem ipsum dolor sit amet</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p> <h1><a name="drugi">Lorem ipsum dolor sit amet</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p> </div> </body> </html> <</przykład>> 2/3 Pseudoklasa :target Pseudoklasa :target nie działa w przeglądarce Internet Explorer. Natomiast pozostałe przeglądarki biorące udział w porównaniu dostępnym na końcu niniejszego kursu radzą sobie poprawnie z obsługą tego nowego elementu. 3/3