NAZIV OBJEKTA ZNANJA *
CSS linkovi
PROLOG
Autor *
Klasifikacija *
Težina *
Ključne reči *
Ko sluša *
Trajanje *
Komentari autora
dr Katarina Kaplarski
osnovni nivo
SADRŽAJ
Apstrakt
Cilj *
Uvodne napomene
Naziv sekcije (1)
CSS linkovi
Sadržaj sekcije (1)
Linkovi mogu biti stilizovani na različite načine.
Stilizovanje linkova
Linkovi mogu biti stilizovani pomoću bilo kog CSS svojstva (npr. color, font-family, background-color).
Za linkove je specifično to što oni mogu biti stilizovani na različite načine u zavisnosti od stanja u kom
se nalaze.
Četiri stanja linkova su
•
•
•
•
a:link – normalan, neposećeni link
a:visited – link koga je korisnik posetio
a:hover – link preko koga je korisnik prešao mišom
a:active – link u momentu kada se klikne na njega
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
Pri postavljanju stila, za neke od stanja linkova postoji redosled pravila:
• a:hover MORA doći posle a:link i a:visited
• a:active MORA doći posle a:hover
Uobičajeni stilovi linkova
U gornjem primeru, link menja boju u zavisnosti od stanja u kom se nalazi.
Proćićemo kroz još neke od uobičajenih načina stilizovanja linkova.
Dekoracija teksta
Svojstvo text-decoration se najčešće koristi da bi se uklonile linije podvlačenja sa linkova:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_decoration
Boja pozadine
Svojstvo background-color određuje boju pozadine za linkove:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_background
PSEUDO KLASE
Link i visited se u CSS kategorišu kao pseudo klase dok se stanje hover i active nazivaju dinamičkim
pseudo klasama.
Ispred svih pseudo selektora se stavljaju dve tačke.
Prema tome selektori za linkove su :link, :visited, :hover i :active
Raspored uvek po skraćenici LVHA
a {color:orange}
a:link {color:orange}
a:visited {color:yellow}
a:hover {color:fuchsia}
a:active {color:red}
Generalni stil linkova
a {color:orange}
a:link {color:orange}
a:visited {color:yellow}
a:hover {color:fuchsia; font-style:italic}
a:active {color:red}
Stil navigacije:
a.nav {color:white}
a.nav:link {color:white}
a.nav:visited {color:yellow}
a.nav:hover {color:fuchsia}
a.nav:active {color:orange}
Primenjuje se kasnije pomoću klasa
<a class=“nav” href=“……….>
Elementi se jednoznačno mogu definisati pomoću ID selektora:
#ID-ime
Selektori klasa mogu se u dokumetu koristiti koliko god puta mi to želeli dok se ID može u dokumentu
koristiti samo jednom.
Prema tome ID oznake su korisne kada se indetifikuju jedinsveni delovi dokumenta, kao što su navigacija,
sadržaj, deo sa naslovima ili filter.
#example {background-color:white;color:black;}
#example a {color:white}
# example a:link {color:white}
# example a:visited {color:yellow}
# example a:hover {color:fuchsia}
Naziv sekcije (2, ...n)
Sadržaj sekcije (2, ...n)
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
URL
REČNIK POJMOVA I SKRAĆENICA
Termin
Opis
.
PODOBJEKTI ZNANJA (slučajevi korišćenja, procedure korak po korak, reference, itd.)
Naslov podobjekta znanja
Sadržaj podobjekta znanja
OSTALI PREDLOŽENI SADRŽAJ OD STRANE AUTORA
Naslov
Sadržaj
Download

http://www.w3schools.com/css/tryit.asp?filename=trycss_link