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.

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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!