Link, odnosno element a jedan je od osnovnih elemenata u HTML-u (štoviše, element na kojem se temelji čitav koncept hiperteksta).
Inicijalno svi preglednici prikazuju linkove plavom bojom i podcrtano.
Kada se definira osnovni izgled teksta za web-stranicu, najčešće se to radi na elementu body. Svi drugi elementi naslijedit će svojstva fonta s elementa body.
Da bi se promijenila boja linka, potrebno je da se u CSS-u web-stranice boja postavi izravno na element a:
a { color: darkred; }
Međutim, moguće je primijetiti da su linkovi ponekad ljubičasti, iako im je već postavljena željena boja.
Naime, preglednik linkove koje je posjetitelj već posjetio prikazuje ljubičastom bojom.
To se ponašanje može promijeniti pomoću CSS-pseudoklase visited, koju smo obradili u prvom poglavlju. Ta pseudoklasa primjenjuje se na već posjećene linkove.
Ako se želi da i posjećeni i neposjećeni linkovi imaju istu boju, moguće je promijeniti gornje pravilo tako da se ono eksplicitno odnosi i na posjećene linkove:
a, a:visited { color: darkred; }
Pomoću pseudoklase hover može se postići da izgled linka bude promijenjen u trenutku kad korisnik prijeđe mišem preko linka.
Tako korisniku dodatno dajemo do znanja da je taj element stranice aktivan, odnosno da se na njega može kliknuti mišem.
Najčešće se koriste ovi efekti:
a:hover { color: orange; background-color: lightgray; text-decoration: none; }
Polja za unos podataka preglednici prikazuju vrlo različito.
Postizanje željenog izgleda polja za unos, koji će pritom biti jednak u svim preglednicima, ponekad je zahtjevno, a kod nekih tipova polja (npr. polje za prijenos datoteke) zapravo i nije moguće.
No nekima od najčešće korištenih polja za unos ipak je moguće donekle prilagoditi izgled u većini preglednika.
Polja za unos su linijski elementi pa u slučaju da se želi da svaki bude prikazan u svojem redu, treba ih pretvoriti u blok-elemente.
Kako bi se ujednačio razmak između pojedinih polja u svim preglednicima, potrebno je postaviti i okomitu marginu na elemente.
input[type="text"], textarea, select, button { display: block; margin: 10px 0px; }
Ako se želi ujednačiti širina elemenata, može im se jednostavno postaviti širina na željenu vrijednost pomoću svojstva width.
No u nekim preglednicima (npr. Internet Explorer 9 i starije verzije) to neće rezultirati posve jednakom širinom zbog načina kako preglednici inicijalno računaju širinu.
Poljima za unos može se postaviti i željena visina te padding. Pri tome je obično potrebno elementu za unos višelinijskog teksta (textarea) postaviti veću visinu:
input[type="text"], select, button {
height: 30px; padding: 3px 5px;
}
textarea { height: 60px; padding: 3px 5px; }
Dugme za slanje podataka također se može uljepšati zaobljivanjem i stavljanjem prijelaza u pozadinu:
button {
border: 1px solid gray;
border-radius: 20px;
background-image: linear-gradient (lightgray, darkgray, gray); color: white;
}
Prilikom klika mišem na dugme, preglednici obično promijene njegov izgled tako da dočaraju reakciju dugmeta na klik. Budući da je inicijalni izgled dugmeta u ovom slučaju promijenjen, izgubljena je ta dodatna funkcionalnost pa je potrebno promijeniti izgled pritisnutog dugmeta.
Pritisnuto dugme može se selektirati pomoću pseudoklase active. U ovom primjeru promijenit će se boja prijelaza i boja slova:
button:active {
background-image:linear-gradient (white, lightgray, darkgray);
color:gray;
}
Liste se u HTML-u često koriste kad se želi navesti niz međusobno povezanih elemenata.
Inicijalni način na koji se lista prikazuje definira preglednik, no CSS omogućuje potpunu kontrolu nad tim kako će lista biti prikazana.
Izgled oznake stavke može se promijeniti pomoću CSS-svojstva list-style-type, kojoj se kao vrijednost predaje ključna riječ.
Važno je zapamtiti da se to svojstvo postavlja na samu listu (u ovom primjeru element ul), a ne na stavku liste (element li).
Ključne riječi koje se mogu rabiti dane su u tablici:
Prema tipu prikaza liste su blok-elementi, tj. inicijalno zauzimaju cijeli redak.
Stavka liste, tj. element li također zauzima cijeli redak, no ona ima vlastiti tip prikaza – list-item, koji je sličan blok-elementu, ali prikazuje i oznaku stavke.
Ako se promijeni tip prikaza elementu li (u želji da se dobije vodoravna lista, oznaka liste više neće biti vidljiva):
li { display: inline; }
Liste se, budući da predstavljaju niz povezanih elemenata, često koriste za definiranje navigacijskog izbornika web-stranice.
Unutar stavki liste, umjesto običnog teksta u tom se slučaju stavljaju elementi a koji vode na pojedine stranice.
Time navigacija dobiva poželjnu strukturu liste, ali najčešće se ne želi zadržati inicijalni izgled liste s oznakama stavki.
Promjenom tipa prikaza na elementu li i dodatnim stiliziranjem moguće je listu oblikovati po želji.
Evo primjera liste koja je pretvorena u navigacijski izbornik:
li {
display: inline-block;
height: 20px;
width: 150px;
padding: 10px;
text-align: center;
color: white;
border-left: 1px solid lightgray;
border-right: 1px solid gray;
background-image: linear-gradient (lightgray, darkgray, gray);
}
Tablice su HTML-elementi čija je namjena organizacija sadržaja u tabličnom obliku.
U načelu se tu uvijek radi o podacima koje je prirodno prikazati kao retke u tablici.
Da bi tablica bila preglednija, treba prikazati crte koje omeđuju retke i stupce.
To se postiže tako da se postavi rub na ćelije (elemente td i th):
td, th {
border: solid 1px gray;
}
Preglednici inicijalno postavljaju određeni razmak između ćelija, kao što se može vidjeti na gornjoj slici.
Pomoću svojstva border-spacing može se upravljati veličinom tog razmaka.
To se svojstvo postavlja na elementu table, a prima vrijednost definiranu u nekoj od jedinica duljine.
Ako se tom svojstu predaju dvije vrijednosti, prva će se vrijednost odnositi na vodoravni razmak (između stupaca), a druga na okomiti razmak (između redaka):
table {
border-spacing: 5px 3px;
}
Umjesto upotrebom svojstva border-spacing, rubovi se pojedinih ćelija mogu spojiti pomoću svojstva border-collapse, ako se njegova vrijednost postavi na ključnu riječ collapse.
Čitljivost teksta u tablici može se poboljšati postavljanjem paddinga na ćelije:
td, th { padding: 10px 5px; }
Za okomito poravnanje teksta u ćelijama tablice koristi se svojstvo vertical-align.
Kada se primijenjuje na ćelije tablice, mogu se koristiti ove ključne riječi:
Da bi se slika smjestila unutar teksta, koristi se svojstvo float.
To svojstvo izbacuje element iz normalnog toka dokumenta i postavlja ga uz lijevi (ili desni) rub roditeljskog elementa.
Tekst i drugi inline-elementi koji se nalaze pored elementa kojem je postavljeno svojstvo float postavljaju se i prelamaju oko njega.
Ovako se slika postavlja uz lijevi rub, a tekst teče oko slike i prelama se oko nje:
img { float: left; }
Svojstvo float može poprimiti ove vrijednosti: