[CSS] Hyperlinks formatieren

[Zerogiven]

Also, in diesem Tut wollen wir euch erklären, wie man mit CSS einen Link schön formatieren kann.

Man kann auch alle Ebenen eines Links individuell gestalten. Also wie er aussehen soll wenn man drüber fährt, wenn man draufgeklickt hat, etc.

Es gibt diese 4 Ebenen:
a:link
a:active
a:visited
a:hover

Diese Ebenen kann man nun mit Formatierungen hinterlegen, z.B. Schriftfarbe,-grösse, etc.

Schaun wir uns doch einmal eine fertige Formatierung an:

Code:

A:link {
font:12px/16px "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-weight: bold;
font-style: none;
color: #8D8D8D;
text-decoration: none;
}

A:hover {
font:12px/16px "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-weight: none;
font-style: underline;
color: #8D8D8D;
text-decoration: none;
}

A:visited {
font:12px/16px "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-weight: bold;
font-style: none;
color: #8D8D8D;
text-decoration: none;
}

A:active {
font:12px/16px "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-weight: bold;
font-style: none;
color: #8D8D8D;
text-decoration: none;
}

So, nun ein paar Erklärungen.
Wie ihr seht, haben wir ein paar Font Sachen auch dabei, das ihr vielleicht kennt. Es dient zur Textformatierung für die Schriftgrösse und die Schriftart.

Bei font-weight Könnt ihr das Gewicht des Textes festlegen (Dick, Dünn,...)

font-style z.B. Kursiv.

color dient für die Schriftfarbe

text-decoration dient dazu um dem Text eine Dekoration zuzuweisen. Wie z.B. Unterstrichen oder durchgestrichen.

Es gibt noch viele, viele Befehle mehr, aber die werden in anderen Tutorials vorkommen

Ich hoffe es hat euch weitergeholfen

mfg
Zerogiven