CSS hivatkozások, linkek formázása (HTML a elem formázása CSS segítségével)
A HTML-ben létrehozott a elemet, ami tulajdonképpen egy hivatkozás, link lehetőségünk van formázni CSS-en keresztül. Olyan alapvető formázási lehetőségektől kezdve, mint a szövegszín módosítás, olyan bonyolult formázásokig, mint az egér ráhúzásra változó szín, nagyon sok lehetőség áll a rendelkezésünkre.
Nézzük a legfontosabb formázási lehetőségeket:
- link
- visited
- hover
- active
Természetesen ezeken felül ugyanazok a formázások érvényesek rá, mint bármelyik szövegre.
a:link formázása CSS-el
Az a:link segítségével a még meg nem látogatott linkeket színezhetjük át, azaz azoknak a hivatkozásoknak a színét állíthatjuk be, amelyeket még a felhasználó nem látogatott meg.
Szintaxis
a:link {
color: SZÍN(KÓD);
}
Code language: CSS (css)Példa
CSS kód
a:link {
color: red;
}
Code language: CSS (css)Eredmény
a:link>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
a:visited formázása CSS-el
Az a:visited segítségével pedig a már meglátogatott oldalakra vonatkozó hivatkozások színét változtathatjuk meg. Tehát ha van egy link, amire a felhasználó már egyszer rákattintott, akkor annak más lesz a színe, mint a többi linknek, amire még nem kattintott.
Szintaxis
a:visited {
background-color: SZÍN(KÓD);
}
Code language: CSS (css)a:hover formázása CSS-el
Az a:hover segítségével beállíthatjuk, hogy amikor a link fölé húzzuk az egeret, akkor történjen valami. Jelen esetben egy színváltoztatás.
Szintaxis
a:hover {
color: SZÍN(KÓD);
}
Code language: CSS (css)Példa
CSS kód
a:hover {
hover: pink;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
a:active formázása CSS-el
Az a:active az éppen kiválasztott hivatkozás formázására szolgál.
Szintaxis
a:active {
color: SZÍN(KÓD);
}
Code language: CSS (css)Plusz információk
Van még néhány információ, amivel érdemes lehet tisztában lenni.
- Az a:hover-nek az a:link után kell következnie.
- Az a:active-nek az a:hover után kell következnie.
- Nem csak színt lehet módosítani, bármilyen más dekorációt, animációt használhatunk.
