NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








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:


Ned School


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:


Ned School



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.


Ned School

a {
     text-decoration: none;
}



Primjer Stilizovanog linka:


U nastavku možete vidjeti jedan link, a ispod njega sav kod koji je odredio njegov izgled.


Ned School

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.




<< >>



© Copyright 2018. nedschool.com