HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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="http://informatika.gtportal.eu/"> 
      Informatika tananyag</a><br>
  <a href="http://webfejlesztes.gtportal.eu/"> 
      Webfejlesztés tananyag</a><br>
  <a href="http://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="http://informatika.gtportal.eu/"> 
      Informatika tananyag</a><br>
  <a href="http://webfejlesztes.gtportal.eu/"> 
      Webfejlesztés tananyag</a><br>
  <a href="http://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