Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoklasa :target

Email Drukuj PDF

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>

<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>>

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.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464201