• 26.08.2025, 17:17
  • Registrieren
  • Anmelden
  • Sie sind nicht angemeldet.

 

Cricket

God

HTML/CSS Linkfarben

Samstag, 10. April 2004, 03:35

Ich möchte in einer HTML Datei 4 verschiedene Arten von Links haben.

Beispiel:

Link1: normal: blau - over: hellblau
Link2: normal: rot - over: hellrot
Link3: normal: grün - over: hellgrün
Link4: normal: gelb - over: hellgelb

Jetzt dacht ich mir, weil das mit CSS und Text so schön funktioniert, müsste es doch auch eine Möglichkeit geben, per CSS zentral 4 verschiedene Links zu bestimmen.

Doch lässt sich die Linkfarbe in CSS leider global nur einmal definieren - zumindest weiß ich nicht, wie ichs anders machen könnte.
Normalerweise macht mans ja so:

<style type="text/css">{ }
<!--
a:link { text-decoration:none; color:red;}
a:visited { text-decoration:none; color:lightred; }
-->
</style>

Wie kann ich dann jetzt 4 verschiedene Arten von Links definieren ?
Bitte helft mir, das ist echt wichtig :'(

Ciao,
Cricket

derJoe

Senior Member

Re: HTML/CSS Linkfarben

Samstag, 10. April 2004, 04:04

Hi,

a.irgendwas:link { ... }
a.irgendwas:visited { ... }
usw.

und dann im HTML:

<a class="irgendwas" href=" ... ">

derJoe

Y0Gi

God

Re: HTML/CSS Linkfarben

Samstag, 10. April 2004, 14:06

das wäre die eine gute möglichkeit. soll keine kritik werden.

NOCH besser kann sich aber erweisen, wenn du die klasse um die links herum definierst und sie damit nicht zu jedem link hinzufügen musst.
beispiel:

Quellcode

1
2
3
4
5
6
7
8
9
<div id="navigation">
  <a href="1.php">Seite 1</a>
  <a href="2.php">Seite 2</a>
  <a href="3.php">Seite 3</a>
</div>

<div id="content">
  hier kommt der hauptteil/sich dyn. ändernde text hin etc. blabla. hastenichgesehen und söhne.
</div>


das kannst du dann passend mit css so machen:

Quellcode

1
2
3
4
5
#navigation a { color: #ff0000; }

#content a:link { color: #0000ff; }
#content a:visited { color: #0000bb; }
#content a:hover, #content a:active { color: #00ff00; }

hier wird also verschachtelt. die regel wird nur angewendet, wenn das tag (in diesem falle a allgemein oder a:link etc. im speziellen) innerhalb des elternelements mit der id vorkommen.

dabei habe ich absichtlich id (in css: #bla) anstelle von class (in css: .bla) gewählt, weil content und navigation nur einmal auf einer seite vorkommen (sollten), was für die vergabe von ids verbindlich ist.

im vergleich zu obiger lösung ist es etwa genau so viel css (welches aber in einer style.css abgelegt eh nur einmal heruntergeladen werden muss), aber deutlich weniger html. SOLLTE man die namen der ids/klassen ändern wollen, geht das auch ohne textersetzung schnell. weiterhin ist der text nun logisch gut strukturiert. zusätzlich zu den links können nun auch andere tags je nach umgebenden container angepasst werden.

es erleichtert insgesamt die arbeit mit webseiten ungemein.
viel spaß :)

Cricket

God

Re: HTML/CSS Linkfarben

Samstag, 10. April 2004, 15:08

Danke! Ihr seid wie immer SPITZENKLASSE :-* ;) :D

Ciao,
Cricket