[HTML-CSS] Podświetlane, zmieniające się linki, odsyłacze

Porady HTML, Porady CSS | 27 maj 2008 | Wizyt: 118154

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Deprecated: Function eregi() is deprecated in /blog/wp-content/plugins/tpbc.php on line 96

W tej poradzie przedstawię kilka sposobów na zmianę wyglądu odnośników. Standardowo linki na stronach bez dodatkowych stylów wygladają niezbyt efektownie. Po najechaniu na url nic się z nimi nie dzieje co nadaje stronie małą atrakcyjność.

W przykładach zastosuję kilka stylów zmieniających na różne sposoby wygląd linków na stronie.

Link podświetlony:

Kod: html4strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <title>Tytuł strony</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<style type="text/css">

/* poniżej nadajemy ogólny krój i rozmiar */

.link_podswietlony {

 font-family:Verdana, Arial, Helvetica, sans-serif;

 font-size:12px;

}

/* poniżej nadajemy styl linka oraz linka odwiedzonego */

.link_podswietlony a, .link_podswietlony a:visited {

 color:#FF0099;

 text-decoration:none;

}

/* poniżej nadajemy styl linka najechanego i wciśniętego */

.link_podswietlony a:hover, .link_podswietlony a:activ {

 color:#3366FF;

 text-decoration:line-through;

}

</style>

</head>

  <body>

     <div class="link_podswietlony"><a href="index.php">Jakiś link</a></div>

  </body>

</html>

Aby wyświetlić link na stronie i przypisać mu odpowiedni styl, stworzona została sekcja DIV o klasie link_podwietlony. Warto zaznaczyć, że powyższy przykład to tylko propozycja. Np. dla text-decoration: można zastosować również takie zapisy jak: blink (miganie), inherit, overline (linia górna), underline (podkreślenie).

Podświetlone tło linka:

Kod: html4strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <title>Tytuł strony</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<style type="text/css">

/* poniżej nadajemy ogólny krój i rozmiar */

.link_tlo {

 font-family:Verdana, Arial, Helvetica, sans-serif;

 font-size:12px;

 color:#0000CC;

 text-decoration:none;

 display:block;

}

/* poniżej nadajemy styl linka oraz linka odwiedzonego */

.link_tlo a, .link_tlo a:visited {

 background-color:#FF0000;

 border:1px solid black;

 padding:10px;

}

/* poniżej nadajemy styl linka najechanego i wciśniętego */

.link_tlo a:hover, .link_tlo a:activ {

 background-color:#FFFF00;

 border:1px solid red;

}

</style>

</head>

  <body>

     <div class="link_tlo"><a href="index.php">Jakiś link</a></div>

  </body>

</html>

Aby wyświetlić link na stronie i przypisać mu odpowiedni styl, stworzona została sekcja DIV o klasie link_tlo. W przykładzie zmienia się tło pod linkiem po najechaniu na niego kursorem myszy. Zmienia się również obramowanie. Na uwagę zasługuje zapis (display:block;) którego zadaniem jest traktowanie linka oraz zastosowanych wokół niego odstępów (padding:10px;) jako jednej powierzchni, w którą można kliknąć. Jest to przydatne rozwiązanie w przypadku tworzenia buttonów. Można również zamiast zwykłego koloru tła (background-color:#FF0000;) zastosować tło składające się z obrazka. Zapis wyglądać mógłby np. tak: background-image:url("ścieżka-do-obrazu-tła") repeat-x;

Arkusze styli css dają niezwykle duże możliwości w kreowaniu wyglądu strony i nadawaniu jej atrakcyjności. Polecam poeksperymentowanie z nadawaniem styli obrazom będącym odnośnikami. Można np. po najechaniu zmieniać wygląd obramaowania zdjęcia.

Autor: Adam Suchowski

nowe Porady CSS » zobacz wszystkie