style.css - Links formatieren
Links müssen so gestaltet werden, dass sie vom Besucher als Links erkannt werden.
Hier können Sie Farbtabellen oder Colorpicker oder Adobe-Colorpicker aufrufen.
Wenn kein Corporate-Farbsystem vorgeschrieben ist, achten Sie darauf, dass
- die Farben zueinander passen
- Texte mit einer Hintergrundfarbe noch gut lesbar sind
- Farbenblinde (Rot-Grün) die Seite noch gut lessen können
Farbnamen
Link-Texte erhalten die Farbe schwarz und Texte werden unterstrichen
/* color: #000000 färbt die Schrift schwarz / text-decoration: underline Der Text wird unterstrichen */
a {
color: #000000;
text-decoration: underline;
}
Überschriften sind Links, jedoch werden sie nicht unterstrichen
/* Der Überschrift-Link besteht danach nur noch aus reinem Text */
h1 a { text-decoration: none; }
Link erhält andere Farbe, wenn man mit der Maus über den Link fährt a:hover
/* Maus über den Link ziehen, färbt sich orange */
a:hover { color: orange; }
Link erhält andere Farbe, wenn man ihn anklickt oder antippt a:active
/* Der Link soll kurz in einer anderen Farbe aufleuchten, wenn ihn der Besucher anklickt oder antippt */
a:active { color: green; }
Der Code hierzu für die style.css
#site-title {
font-size: 2em;
font-weight: bold;
}
/* Links */
/* color: #000000 färbt die Schrift schwarz / text-decoration: underline Der Text wird unterstrichen *
/a {
color: #000000;
text-decoration: underline;
}
/* Der Überschrift-Link besteht danach nur noch aus reinem Text */
h1 a { text-decoration: none; }
/* Maus über den Link ziehen, färbt sich orange */
a:hover { color: orange; }
/* Der Link soll kurz in einer anderen Farbe aufleuchten, wenn ihn der Besucher anklickt oder antippt */
a:active { color: green; }
Screen der Home-Seite