Strict Standards: Redefining already defined constructor for class wpdb in /blog/wp-includes/wp-db.php on line 49

Deprecated: Assigning the return value of new by reference is deprecated in /blog/wp-includes/cache.php on line 35

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /blog/wp-includes/cache.php on line 400

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl($output) in /blog/wp-includes/classes.php on line 534

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl($output) in /blog/wp-includes/classes.php on line 534

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el($output) in /blog/wp-includes/classes.php on line 534

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el($output) in /blog/wp-includes/classes.php on line 534

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el($output) in /blog/wp-includes/classes.php on line 553

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl($output) in /blog/wp-includes/classes.php on line 649

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl($output) in /blog/wp-includes/classes.php on line 649

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el($output) in /blog/wp-includes/classes.php on line 649

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el($output) in /blog/wp-includes/classes.php on line 649

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el($output) in /blog/wp-includes/classes.php on line 674

Deprecated: Assigning the return value of new by reference is deprecated in /blog/wp-includes/query.php on line 15

Deprecated: Assigning the return value of new by reference is deprecated in /blog/wp-includes/theme.php on line 505

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
Grafika Webmaster
Aktualności Porady dla Webmastera
Porady CSS Porady HTML Porady MySQL Porady PHP Porady Smarty Pozycjonowanie
Kursy Dokumentacje Skrypty PHP Skrypty JAVA
Windows Hardware Software Download Książki Projekty domów Katalog firm, stron Reklama
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: 23 | UU: 1092

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

Strict Standards: Resource ID#251 used as offset, casting to integer (251) 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: 121703

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

WordPress database error: [Incorrect file format 'wp_comments']
SELECT * FROM wp_comments WHERE comment_post_ID = '1001' AND comment_approved = '1' ORDER BY comment_date desc

Dodaj komentarz









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