Links formatieren mit CSS - Artikel von www.it-academy.cc

- - - - Links formatieren mit CSS

Links formatieren mit CSS

Ein Tutorial über Links mit CSS.

Autor:	Patrick Faes (dreamer)
Datum:	29-12-2003, 23:04:32
Referenzen:	keine
Schwierigkeit:	Anfänger
Ansichten:	17344x
Rating:	8 (2x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]

Einleitung

Das Anpassen von Linkfarben ist nicht nur nützlich um die Farbe der Links anzupassen am Hintergrund (für die Lesbarkeit), sondern auch zum Einteilen der Links. So kann man zum Beispiel E-Mail-Links eine andere Farbe geben als die Navigationslinks, und diese wiederum eine andere Farbe als externe Links.

Dies ist mit CSS relativ einfach zu bewerkstelligen:

Hier wird für Links eine Klasse namens Test deklariert. Es gibt hierbei 5 verschiedene Deklarationen:

Link: gibt die normale Farbe an
visited: gibt die Farbe an die ein Link bekommt wenn er schon besucht wurde
hover: gibt die Farbe an die ein Link bekommt wenn man mit dem Mauszeiger drüber fährt
active: gibt die Farbe an die ein Link bekommt wenn er aktiv ist (will sagen: wenn der Link in ein andere Fenster geöffnet ist)
focus: gibt die Farbe an die ein Link bekommt wenn er gefocust wird (dies macht man mit dem TAB-Button; man kann so durch die einzelnen Links gehen per Knopfdruck)

Hierbei kann man alle Definitionen gebrauchen wie auch bei normalen Text, z.B.: color, text-decoration, background-color, usw. Es ist erforderlich Links eine Klasse zu zuweisen:

<a href="http://" class="test">

Einige Beispiele:

Test1
Test2
Test3
Test4

Anmerkung: wenn den Links keine Klasse zugewiesen werden, dann bekomme alle Links die allgemeine Definition. Hierbei wird in der CSS-Datei kein Klassenname angegeben.
Anschließend sollte man die CSS-Definitionen in einer separaten Datei anlegen, so dass man nachher nur eine Datei ändern muss:

<head>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

Die Datei nennt sich hier formate.css.

Und zuletzt noch ein kleiner Tip: wenn ein Link aus mehreren Wörtern besteht, könnte es sein dass diese nicht auf der selben Linie stehen. Daher sollte man die Leerzeichen ersetzen durch & nbsp; (ohne Leerzeichen zwischen & und nbsp;). Das steht für Non Breaking SPace und sorgt dafür, dass Wörter die hierdurch verbunden sind, immer zusammen bleiben.

[back to top]

User nicht eingeloggt

Autoren:04650
Artikel:00815
Glossar:04116
News:13564
Userbeiträge:16557
Queueeinträge:06274

Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?