Linkek állapottól függő megjelenítése

Változtathatjuk egy-egy hivatkozás megjelenítési formáját annak megfelelően, hogy
1. a felhasználó már meglátogatta a cél URL-t ( :visited )
2. a felhasználó még nem látogatta meg a cél URL-t ( :link )
3. az égérkurzor a hivatkozás fölött áll ( :hover )
4. az égérkurzor a hivatkozás fölött áll és a felhasználó megnyomta a bal egér gombot ( :active )

A linkek állapottól függő megjelenítése:

álosztály-kijelölő

{

tulajdonság

érték;

}

1. Példa:

Forráskód


<style>
  a:link {color:#000066;} /* nem látogatott link */
  a:visited {color:#006600;} /* meglátogatott link */
  a:hover {color:#006666;} /* egérkurzor a link felett */
  a:active {color:#660000;} /* egérgom lenyomva */ 
</style>     
...
<body>            
  <a href="https://informatika.gtportal.eu/"> 
      Informatika tananyag</a><br>
  <a href="https://webfejlesztes.gtportal.eu/"> 
      Webfejlesztés tananyag</a><br>
  <a href="https://www.matracfutar.hu/"> 
      Matrac webáruház</a> 
</body>

Eredmény*

2. Példa:

Forráskód


<style>
  a:link {background-color:silver;} 
  a:visited {background-color:aqua;}
  a:hover {background-color:yellow;} 
  a:active {background-color:red;} 
</style>     
...
<body>            
  <a href="https://informatika.gtportal.eu/"> 
      Informatika tananyag</a><br>
  <a href="https://webfejlesztes.gtportal.eu/"> 
      Webfejlesztés tananyag</a><br>
  <a href="https://www.matracfutar.hu/"> 
      Matrac webáruház</a> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_link_1.html