Pseudoklase

Pseudoklase su gradivo koje zasigurno možemo smjestiti u tečaj naprednog korištenja CSS-a. Međutim, postoje četiri pseudoklase koje se susreću na gotovo svakoj stranici izrađenoj CSS-om, pa su zato i uključene u ovaj tečaj. Suprotstavljajući složenost problematike i masovnost uporabe, u ovoj lekciji ponuđeno vam je „instant” rješenje za uljepšavanje linkova, bez prevelikog ulaženja u detalje, ali u praksi sasvim uporabljivo.

Pseudoklase :link, :visited

Osnovni prikaz linkova u HTML-u prilično je suhoparan, a definiranje boje linkova u oznaci <body> se u standardu HTML 4.01 preporuča zamijeniti definiranjem boja upotrebom stilova. CSS nudi rješenje dvjema pseudoklasama. Izgled neposjećenog linka definira se pseudoklasom a:link, a izgled posjećenog linka pseudoklasom a:visited.

a:link {
  color: #9b5c98;
}
a:visited {
  color: #0000cc;
}
<a href="http://www.carnet.hr/">CARNet</a>
CARNet
  • Upotreba navedenih pseudoklasa vrlo je korisna većini korisnika weba, ali je korisna i zlonamjernim korisnicima, čije web stranice mogu sadržavati neželjen kôd. Tako se, na primjer, prateći stvarna svojstva linkova može ustanoviti koje je stranice pojedini korisnik posjetio, te poduzeti daljnje akcije.
  • Zbog toga neki preglednici ograničavaju skup svojstava koja se mogu upotrijebiti u pseudo klasi :visited na svojstva koja se odnose na boje.

Dinamičke pseudoklase :hover, :active

Dodatna atraktivnost linkova može se postići dinamičkim efektima, koji se aktiviraju pri nekakvoj radnji korisnika. Primjerice, u ovom slučaju, prelaskom pokazivača preko linka aktivira se prikaz selektora a:hover, dok se od trenutka pritiska tipke miša, pa do otpuštanja tipke, aktivira prikaz selektora a:active.

a:hover {
  text-decoration: underline;
}
a:active {
  background-color: #9b5c98;
  color: #ffffff;
  text-decoration: underline;
}
<a href="http://www.carnet.hr/">CARNet</a>
CARNet
  • Da biste dobili željen rezultat, zbog određenih specifičnosti CSS-a, čije proučavanje izlazi iz okvira ovog tečaja, ove pseudoklase pri definiranju uvijek morate navesti sljedećim redoslijedom (love-hate):

                a:link{}
                a:visited{}
                a:hover{}
                a:active{}    .
  • U HTML dokument iz prethodne vježbe stavite link na stranicu www.lipsum.com s koje možete preuzeti tekst „Lorem ipsum” skrojen prema vašim potrebama.

    Link oblikujte CSS-om tako da promijeni boju kad posjetite stranicu, te da se promijeni boja podloge teksta na kojem je link kad je pokazivač miša iznad linka ili je link aktivan. Boje izaberite tako da vam odgovaraju ostalim bojama u dokumentu.

    Oprez: budući da ćete vjerojatno prije testiranja stranica posjetiti stranicu www.lipsum.com, link će vam već pri prvom pregledavanju biti posjećen. Jedno je rješenje brisanje povijesti pregledanih stranica, a drugo brisanje podataka o posjeti samo toj stranici ili web sjedištu, što ovisi o web pregledniku kojim se služite. Treće je i najjednostavnije rješenje testiranje izgleda stranice u nekom drugom pregledniku, koji pamti vašu drugačiju povijest.

Linkovi različitih svojstava

Definirane pseudoklase vrijede za sve linkove u dokumentu. Ukoliko u jednom dokumentu postoji potreba za više različitih vrsta linkova, koristi se kombinacija klasnih selektora i pseudoklasa.

a.vrsta1:link {
  color: #9b5c98;
}
a.vrsta1:visited {
  color: #0000CC;
}
a.vrsta1:hover {
  text-decoration: underline;
}
a.vrsta1:active {
  background-color: #9b5c98;
  color: #ffffff;
}

a.vrsta2 {
  text-decoration: underline;
  /*iznimka u odnosu na linkove u ovom tečaju*/
}
a.vrsta2:link {
  color: #000000;
}
a.vrsta2:visited {
  color: #9b5c98;
}
a.vrsta2:hover {
  background-color: #9b5c98;
  color: #ffffff;
}
a.vrsta2:active {
  background-color: #000000;
  color:#ffffff;
}
<a class="vrsta1"
href="http://www.carnet.hr/">CARNet</a>
<a class="vrsta2"
href="http://www.w3.org/">W3 konzorcij</a>
CARNet
W3 konzorcij
  • Linkove slične funkcije, osobito ako su nanizani jedan do drugoga, dobro je oblikovati na isti način. U prethodnom su primjeru linkovi oblikovani različito samo zbog demonstracije klasa.
  • Linkovi različite funkcije mogu se oblikovati na različite načine – štoviše, to posjetiteljima može olakšati snalaženje na stranici. Na primjer, linkovi u izborniku mogu biti drugačije oblikovani od linkova u tekstu.

 
CARNet