| CSS-Deklaration mit Klasse <a class="mystyle"> |
|
|
| 1. Vereinzelte Links |
| Sollen vereinzelte Links anders als sonst auf der Seite dargestellt werden, so wird für diese speziellen Links |
| im HTML-Quelltext eine Klasse vergeben: |
|
| <a class="meinstyle" href="http://example.com/">Beispiellink</a> |
|
| Im Stylesheet werden nun den Links mit dieser Klassenbezeichnung die gewünschten CSS-Deklarationen |
| zugewiesen: |
|
| a.meinstyle:link { |
| background-color: #FFCC66; |
| color: #0000CC; |
| } |
|
| a.meinstyle:visited { |
| background-color: #FFCC66; |
| color: #660066; |
| } |
|
| a.meinstyle:hover { |
| background-color: #0000CC; |
| color: #FFCC66; |
| } |
|
| a.meinstyle:active { |
| background-color: #CCCCFF; |
| color: #CC0000; |
| } |
|
|
| 2. Mehrere Links in zusammenhängenden Bereichen |
| Sollen mehrere Links, welche sich in einem zusammenhängenden Bereich befinden, anders dargestellt |
| werden, so weist man einem übergeordneten HTML-Element eine Klasse zu. Nun ändert sich die |
| Schreibweise der CSS-Regeln dahingehend, daß die Klasse vor dem a:link (und so weiter) steht. |
|
| Zum Beispiel soll ein Navigationsbereich eine andere Hintergrundfarbe erhalten und damit auch die |
| Hyperlinks in ihm. Der HTML-Code: |
|
| <ul class="navigation"> |
| <li><a href="http://example.com/produkte/">Produkte</a></li> |
| <li><a href="http://example.com/ueber/">Über uns</a></li> |
| <li><a href="http://example.com/kontakt/">Kontakt</a></li> |
| </ul> |
|
| Im CSS wird für den Navigationsbereich eine andere Farbkombination festgelegt und anschließend auch |
| die Darstellung der enthaltenen Links geändert: |
|
| .navigation { |
| background-color: #FFCC66; |
| color: #000000; |
| } |
|
| .navigation a:link { |
| background-color: #FFCC66; |
| color: #0000CC; |
| } |
|
| .navigation a:visited { |
| background-color: #FFCC66; |
| color: #660066; |
| } |
|
| .navigation a:hover { |
| background-color: #0000CC; |
| color: #FFCC66; |
| } |
|
| .navigation a:active { |
| background-color: #CCCCFF; |
| color: #CC0000; |
| } |
|
| Bei der Festlegung einer Vordergrundfarbe sollte immer auch die Hintergrundfarbe angegeben werden |
| (und umgekehrt). Es könnte sonst passieren, daß bei der Vererbung von CSS-Eigenschaften eine |
| unlesbare Farbkombination herauskommt. |
|
zurück