Du bist nicht angemeldet. [Anmelden]
Übersicht der Foren        Kalender     Hilfe   Forumsknigge
Knuddels.de-Forum » Das Forum » Archive » Hilfe & Fragen zur Knuddels-HP »

Hyperlinks mit Farbe.
Optionen
Thema bewerten
Hyperlinks mit Farbe. - #2283830 - 08.07.2011, 23:19:05
wollendiemichveraschen
Nicht registriert


Hallo,

ich wollte mal nachfragen, wie ich auf meiner Homepage die Hyperlinks in verschiedenen Farbe hinbekomme?
Standert zb: Weis und wenn ich drüber gehe Blau oder so... :o


#Tino


Bearbeitet von wollendiemichveraschen (08.07.2011, 23:20:08)
[zum Seitenanfang]  
Re: Hyperlinks mit Farbe. [Re: ] - #2283873 - 09.07.2011, 01:02:03
Adam Lambert <3
Nicht registriert


Hey,

das Ganze wird per CSS gemacht.

Beispiel:
Html:
<style type="text/css">
<!-- 
a {text-decoration: none; color:#963264;}
a:link {text-decoration: none; color:#963264;} 
a:visited {text-decoration: none; color:#963264;}
a:hover {color:#326496;}
-->
</style>

Erklärung:
Warnung! Spoiler!
:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:hover = für Elemente, während der Anwender mit der Maus darüber fährt


Farben passt du mit color:#HEX-Code (immer sechsstellig) an. Du kannst auch Standardwebfarben wie zum Beispiel #blue verwenden. Mit text-decoration kann man Texte unter- oder überstreichen, aber auch durchstreichen oder blinken (vom Blinken lassen rate ich aber ab... %-)) lassen. Ebenso kann man die automatische Unterstreichung von Hyperlinks durch text-decoration:none aufheben. Mehr hierzu findest du hier. Weitere schöne Effekte kannst du auch per Text-Shading erzielen.

Beispiel:
Html:
text-shadow:#000000 4px 5px 9px;

#000000 beschreibt die Farbe des Textschattens - in diesem Fall schwarz. Mit den folgenden drei px-Werten kannst du die Ausrichtung des Schattens anpassen. Eine Erklärung hierzu ist hier zu finden.

Zu guter Letzt etwas zum Ausprobieren:
Html:
<style type="text/css">
<!-- 
a {text-decoration: none; color:#963264;}
a:link {text-decoration: none; color:#963264;} 
a:visited {text-decoration: none; color:#963264;}
a:hover {color:#326496; text-shadow:#000000 4px 5px 9px;}
-->
</style>

Beim Überfahren mit der Maus wird der Link nun schattiert dargestellt.

Viel Spaß beim Basteln! :-)


PS: Weitere Pseudoklassen und Pseudoelemente gibt es hier.
[zum Seitenanfang]  
Re: Hyperlinks mit Farbe. [Re: ] - #2284279 - 10.07.2011, 00:39:19
Scnappi
Nicht registriert


Ein Link ist immer :link oder :visited - somit kann man die Zuweisung auf das nackte Element theoretisch in diesem Fall auch weglassen. :-)
[zum Seitenanfang]  
Re: Hyperlinks mit Farbe. [Re: ] - #2288054 - 17.07.2011, 12:51:15
Truthähnchen
Nicht registriert


Wenn du verschiedene Linkfarben haben willst, also dass nicht jeder Link die gleiche Farbe hat, empfehle ich da auch eher Klassen


Diese definierst du in CSS genauso wie das a im Beispiel von Adam Lambert....
Allerdings mit einem Punkt davor....

Html:
.menulink { color:blue; text-decoration:none; }
.menulink :hover { color:red; }


Benutzen tust die Klasse dann in dem du dem Link das Klassenattribut übergibst.

Html:
<a href="meinlink" class="menulink">BSPLINK</a>
[zum Seitenanfang]  


Markiere alles als gelesen
Forums-Kontakt · Knuddels - Chat / Chatroom · [zum Seitenanfang]