CSS Linkovi
Šta CSS može sa Linkovima?
CSS može da mijenja izgled linkova na razne načine, kao npr. boja, prikaz oblik itd.
Po default-u svi linkovi izgledaju ovako:
Možemo vidjeti da je link plave boje i podvučen. Nakon što se posjeti, link promijenit će boju u ljubičastu.
Međutim pomoću CSS-a možemo mijenjati estetski izgled linkova na razne načine, po našoj želji ili potrebi.
Sada ćemo prikazati nekliko primjera kako bi link iznad mogao izgledati kada mu dodamo CSS.
Ned School Ned School Ned School Ned School
Linkovi mogu biti stilizovani sa bilo kojim CSS parametrom (npr. color, font-family, background-color, itd.).
Stanje linkova:
Pored stnadardnih CSS stilova, linkovi mogu biti i u nekoliko različitih stanja.
Postoje četiri stanja u kojima linkovi mogu biti, a to su:
active: predstavlja link u trenutku kada je kliknut
hover: predstavlja link u trenutku kada korisnik postavi miš preko linka (ali ga ne klikne)
visited: predstavlja link kojeg je korisnik već posjetio ranije
link: predstavlja normalan link, neposjećen link
Stanje linkova se dodaje tako što se ispred linka stavi dvotačka, a nakon toga stanje ( a:hover )
Primjer:
a:active {
background-color: blue;
}
a:hover {
background-color: green;
}
a:link {
background-color: tomato;
}
a:visited {
background-color: purple;
}
Text decoration:
Parametar text-decoration se najčešće koristi za uklanjanje podvučene crte linka, koja je postavljena po defaul-u.
Da bi uklonili podvučenu crtu linka, u parametru text-decoration moramo postaviti vrijednost none.
a {
text-decoration: none;
}
Primjer Stilizovanog linka:
U nastavku možete vidjeti jedan link, a ispod njega sav kod koji je odredio njegov izgled.
a {
text-decoration: none;
color: white;
background-color: red;
text-align: center;
padding: 10px 20px;;
display: Inline-block;
}
a:hover {
background-color: blue;
}
Stilizovanje linkova ima skoro neograničene mogućnosti. Naša preporuka je da upotrijebite maštu i vježbate sami sa raznim opcijama. U ovoj lekciji naučili ste sve što je potrebno da možete sami uređivati linkove.