Linkek formázása CSS-ben
Demo: kattints rá, hogy lásd, mi történik, de a link nem mutat sehova
A linkek az egyszerű szöveghez hasonlóan bármilyen CSS tulajdonságot kaphatnak (pl. betűtípuss, -méret, -szín, háttér, stb). A linkek különleges tulajdonsága, hogy különböző stílusokat kaphatnak attól függően, hogy milyen állapotban vannak. A linkeknek négyféle állapota lehet:
- a:link - egszerű link, ez az alapállapot
- a:visited - olyan link, amire a látogató már rákattintott, már meglátogatta
- a:hover - amikor az egér fölötte van
- a:active - a link kinézete abban a pillanatban, amikor rákattintanak
Fontos: a négy állapotot ebben a sorrendben kell írni a CSS kódban ahhoz, hogy működjön!
Itt egy példa:
a:link {color:#99FF00;}
a:visited {color:#FFCC00;}
a:hover {color:#0099FF;}
a:active {color:#FF0033;}
A leggyakrabban használt formázások linkeknél:
- színváltás
- háttér színének változtatása
- aláhúzás eltűntetése (olyan, mint egy gportalos link alapból, aminek csak akkor lesz aláhúzása, ha fölé viszed az egeret)
A formázásoknál ügyelj rá, hogy egy linken látszódjon, hogy az link. Tehát ha nincs aláhúzás, de fölé viszem az egeret, történjen valami.
Vannak akik szeretik váltogatni a linkek méretét/betűtípusát, ez önmagában nem probléma, de érdemes megnézni, hogy nem csúszik-e odébb az összes többi szöveg/kép, ha a link fölé viszem az egeret, mert ez néha zavaró tud lenni.
<< vissza a CSS kódokhoz! |