LinkBack URL
About LinkBacks
Grundwissen / FAQ - Häufige Fragen und die dazugehörigen Lösungen
aber denk bitte daran, dass standards immer vom w3c erstellt werden, und von niemand anderem (weil ich erst vor kurzem eine diskussion darüber geführt habe!)!ich gehe hier jetzt nicht auf die generellen möglichkeiten ein, wie man css in (x)html einbinden kann - dazu siehe z.b. hier auf selfhtml!
ich verwende in meinen beispielen hier nur css-definitionen im head-bereich des html-dokumentes! dies ist jedoch nicht immer die beste variante - ich ziehe sie hier nur zu erklärungszwecken vor.
------------- pseudo-elemente definieren -------------
css an sich kennt folgende "pseudo-elemente" für linkdefinitionen, welche in genau dieser reihenfolge vorkommen müssen:
- a
- a:link
- a:visited
- a:active
- a:hover
- a:focus
(sind optional)
------------- beispiel 1 -------------
will man jetzt für das gesamte dokument ein und dieselben linkdefinitionen verwenden, so kann das wie folgt definiert werden (live-beispiel nr. 1):
in diesem beispiel bewirken die definitionen für das gesamte dokument (den gesamten body bereich) kurz gefasst folgendes:Code:a:link { color: Blue; text-decoration: underline; } a:visited { color: Gray; text-decoration: line-through; } a:hover { color: Red; text-decoration: none; } a:active { color: Maroon; text-decoration: none; }
- ein noch nicht geklickter link ist blau und unterstrichen (a:link)
- ein bereits besuchter link ist grau und durchgestrichen (a:visited)
- ein link beim überfahren mit der maus ist rot und ohne unterstreichung (a:hover)
- ein aktiver link (gerade geklickt) ist kastanienbraun und ohne unterstreichung (a:active)
------------- beispiel 2 -------------
um jetzt verschieden definierte hyperlinks in einem dokument verwenden zu können, müssen wir klassen definieren. eine klasse beginnt immer mit einem punkt!
eine klasse ermöglicht es uns auch, verschiedene css-definitionen auf bestimmte bereiche im html-dokument anzuwenden. hier erstellen wir jetzt 2 klassen:
- .linkformat1
- .linkformat2
und ab geht die post, hier seht ihr das live-beispiel nr. 2!
hier mal der xhtml-code mit den css-definitionen im head des dokuments:
hier sehen wir, im unterschied zu beispiel 1, dass 2 klassen definiert wurden und diese dann dem p-tag im body zugewiesen wurden.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* definitionen für die klasse .linkformat1 */ .linkformat1 { font-family: Arial, Helvetica, sans-serif; font-size: .9em; color: red; } .linkformat1 a:link { color: blue; text-decoration: underline; } .linkformat1 a:visited { color: Black; text-decoration: line-through; } .linkformat1 a:hover { color: red; text-decoration: none; } .linkformat1 a:active { color: Aqua; text-decoration: none; } /* definitionen für die klasse .linkformat2 */ .linkformat2 { font-family: Arial, Helvetica, sans-serif; font-size: .9em; color: Fuchsia; } .linkformat2 a:link { color: yellow; font-weight: bold; text-decoration: none; } .linkformat2 a:visited { color: Black; font-weight: bold; text-decoration: none; } .linkformat2 a:hover { color: Green; font-weight: bold; text-decoration: underline overline; } .linkformat2 a:active { color: Olive; font-weight: bold; text-decoration: line-through; } </style> </head> <body> <p class="linkformat1"><a href="#"> ich bin ein link, dem die klasse "linkformat1" zugewiesen wurde </a></p> <p class="linkformat2"><a href="#"> ich bin ein link der klasse "linkformat2" und verhalte mich anders als der obige link </a></p> </body> </html>
diese klassen kann man auch noch vielen anderen elementen wie td usw. zuweisen.
an sich war es das, ihr könnt soviele klassen mit unterschiedlichen definitionen erstellen, wie ihr wollt :-)
--------------- edit 01.07.2003 - 19.40 uhr ---------------
dank an deck16, der mich auf eine schwachstelle hier aufmerksam gemacht hat - ich geben seine anmerkung zu meiner beschreibung hier wieder:
----------------------------------------------------------------in Deinem Tutorial weist Du dem p tag die Klasse zu und schreibst weiter, sie könne auch anderen tags zugewiesen werden.
Stimmt auch, ausser dem a tag selber (mit deiner css definition).
Es fehlt da ein Hinweis zur Verschachtelung der Klassen finde ich.
Was nun, wenn man zwei links in einem p tag hat und diese verschieden aussehen lassen möchte.
Der Vollständigkeit halber müsste die direkte Zuweisung auch dargestellt werden:
a.linkformat1:link { }
a.linkformat1:visited { }
a.linkformat1:hover { }
a.linkformat1:active { }
So kann man jeden link einzeln formatieren ohne ein parent haben zu müssen.
zum eben behandelten thema gibt es auch noch eine sehr informative beschreibung von LANtastic!
