Strict Standards: Non-static method Advanced_Permalinks::get() should not be called statically in /blog/wp-content/plugins/advanced-permalinks/advanced-permalinks.php on line 825

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /blog/wp-includes/plugin.php on line 123

Warning: call_user_func_array() expects parameter 2 to be array, null given in /blog/wp-includes/plugin.php on line 123
[HTML-CSS] Podświetlane, zmieniające się linki, odsyłacze » Porady HTML, Porady CSS » egrafik.pl
BAZA WIEDZY
KURSY
Bazy danych w PHP
Kurs AdvancedAJAX
Kurs ASP
Kurs ASP.NET
Kurs C++
Kurs CSS
Kurs HTML
Kurs HTML drugi
Kurs JavaScript
Kurs MySQL
Kurs PHP
Kurs RSS
Kurs XHTML
Obiekty DOM
MANUALE
CSS1 - W3C
DOM - w budowie
PHP 2005
PHP 2006
Wyrażenia regularne
SHOUTBOX
STAT
Online: 36 | UU: 783

Strict Standards: Resource ID#196 used as offset, casting to integer (196) in /forum2/db/mysql4.php on line 223

Strict Standards: Resource ID#196 used as offset, casting to integer (196) in /forum2/db/mysql4.php on line 224
[HTML-CSS] Podświetlane, zmieniające się linki, odsyłacze
Porady HTML, Porady CSS | 27 maj 2008 | Wizyt: 117992

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
nowe Porady HTML » zobacz wszystkie
Dodaj komentarz









 
| | | |
Copyright © 2006-2013 egrafik.pl | Kontakt | Reklama | Projekty domów
jocker