1. Einleitung
Der CSS Code für die Link Effekte kann z.B. in eine eigene .css Datei gespeichert, und dann mit einer .html Datei verbunden werden, oder kann z.B. direkt in eine .html Datei geschrieben werden.
Wenn du eine externe .css Datei mit einer HTML Datei verbinden willst, musst du folgendes in den <head></head> Bereich deiner HTML Datei einfügen:
(datei.css anpassen!)
Ansonsten kannst du z.B. den Code direkt in den Head Bereich der HTML Datei einfügen:
Nun zum eigentlichen Teil des Tutorials.
2. Grundlegendes
Zuerst möchte ich Grundlegendes erklären:
color = bestimmt die Vordergrundfarbe, in unserem Fall also die Textfarbe des Links
background = bestimmt die Hintergrundfarbe (des Links)
font-weight = bestimmt wie fett eine Schrift dargestellt werden soll, am öftesten wird »bold« für fett verwendet, wenn die Schrift normal sein soll wird »normal« eingefügt
font-family = bestimmt die Schriftart (z.B. Arial), es werden immer mehrere Schriftarten angegeben, der Browser probiert alle angegebenen Arten durch und verwendet bzw. zeigt die erste, die am Computer installiert ist
font-size = bestimmt die Größe der Schrift
text-decoration = bestimmt ob eine Schrift einen Unter- oder Oberstrich hat, oder auch ob sie durchgestrichen ist oder blinkt; wenn sie nichts von all dem haben soll wird »none« eingefügt
border = ein Rahmen, border legt Breite, Art und Farbe des Rahmens fest
link = bestimmt das Aussehen von Links im „Normalzustand“ (normaler Link)
visited = bestimmt das Aussehen von bereits besuchten Links
hover = bestimmt das Aussehen von Links beim Mouseover
active = bestimmt das Aussehen von aktiven Links, ein Link ist, so lange die Maustaste gedrückt ist, aktiv
Info: font-family und font-size werden nicht so häufig bei Links angegeben, da Links meist an die Standardschrift und –größe angepasst sein sollen.
Das ist das ungefähre Fundament, nun zu verschiedenen Möglichkeiten, das Aussehen eines Links zu verändern...
3. Links gestalten...
(Farben, Größen, usw. können nach belieben verändert werden)
(In diesem Beispiel sind normaler und bereits besuchter Link gleich, es gibt also keinen Unterschied. Hover und active sind ebenfalls gleich.)
In diesem Fall ist die Schriftart höchstwahrscheinlich Arial, die Schriftgröße beträgt 10pt. Die Farbe des Links ist schwarz, der Link hat keinen Unterstrich oder dergleichen. Wenn man mit der Maus über den Link fährt bleibt die Linkfarbe schwarz, es kommt aber ein Unterstrich dazu.
a:link, a:visited und a:hover, a:active können auch anders geschrieben werden, wenn unterschiedliche Effekte erwünscht sind:
Bei »link« hat sich nichts geändert. Wenn man jetzt allerdings den Link geklickt hat, hat er von nun an die Farbe grau (durch »visited«). Durch »hover« kommt ein Unterstrich dazu und durch »active« wird der Link, während dem klicken, ebenfalls grau.
Damit kann man jetzt natürlich viele Effekte erzeugen. Man kann z.B. auch den Hintergrund des Links beim Mouseover ändern:
Nun sind der normale und der bereits besuchte Link schwarz und beide haben einen Unterstrich. Beim Mouseover verfärbt sich der Hintergrund des Links schwarz und die Schrift wird weiß, der Unterstrich verschwindet.
Das ganze kann noch ausgebaut werden, in dem man z.B. einen Rahmen dazu macht:
(Es haben sich nur der »hover« und der »active« Effekt verändert.)
Die Schriftfarbe ist schwarz, der Hintergrund grau, der Unterstrich verschwindet und es kommt ein schwarzer Rahmen dazu.
Anmerkung: Man kann den Rahmen natürlich auch anders gestalten. »solid« erzeugt eine normale Linie, »dashed« erzeugt z.B. eine gestrichelte Linie. Die Rahmenstärke bzw. –dicke lässt sich durch »1px« ändern, die Zahl »1« kann durch jede beliebige ersetzt werden.
4. Hinweis
An dieser Stelle beende ich das Tutorial, da ich denke dass das nun einigermaßen klar sein sollte. Man kann diese Effekte beliebig aus- bzw. einbauen. Zum Beispiel kann man die Schriftfarbe nur beim Mouseover ändern, oder die Schrift fett, und beim Mouseover normal machen etc....
Es gibt viele Möglichkeiten, wer sich jetzt noch weiter damit beschäftigen will, kann hier viel nachlesen: http://css4you.de
Sollten noch Fragen aufkommen, entweder bei css4you nachlesen, oder eine PN an mich senden.