LV 17 - CSS

Nastavni predmet SKRIPTNI JEZICI I WEB PROGRAMIRANJE

Naslov cjeline CSS – uređivanje web sjedišta

Naslov jedinice Vježba 17: CSS poveznice, liste i tablice

CILJ VJEŽBE

Učenik će moći opisati i koristiti tablice, poveznice i liste na mrežnoj stranici, odabrati način ispisa

elemenata liste, prilagoditi vrstu liste elementima koje lista sadrži, usporediti načine različitih

oblikovanja elemenata, upotrebljavati svojstva za oblikovanje poveznica, lista i tablica, demonstrirati i

primjenjivati različita oblikovanja tablica.

PRIPREMA ZA VJEŽBU

Odgovorite pisano u bilježnicu:

 1. Što su poveznice? Što sve može biti poveznica na mrežnoj stranici?

Poveznice su neki tekst tj. link (veza) koji nas pritiskom na njega odvede na neku drugu stranicu ili lokaciju. To mogu biti tekst, slike, oblici, video...

 2. Koje su tri vrste lista definirane HTML-om? Kada se koja od njih koristi?

HTML-om su definirane uređene, neuređene i opisne liste.

Uređene liste se koriste kad želimo nabrojiti nešto što ima neki redoslijed ili redni broj, neuređene kad nabrajamo nešto što nema neki posebni redoslijed (popis za kupnju, a opisne kad želimo opisati sadržaj tablica.

IZVOĐENJE VJEŽBE

CSS poveznice

 CSS-om se mogu na različite načine dizajnirati poveznice. Pri tome se mogu koristiti različita

svojstva (npr. color, font-family, background, i dr.).

 Dodatno, poveznice mogu biti oblikovane na različite načine, ovisno o stanju u kojem se

nalaze. Četiri stanja poveznica su:

 a:link – normalna, poveznica koja nije posjećena

 a:visited – poveznica koju je korisnik posjetio

 a:hover – poveznica kada je pokazivač miša iznad nje

 a:active – poveznica u trenutku “klik” na nju

 Primjer: /* neposjećena */

a:link {

color: red;

}

/* posjećena */

a:visited {

color: green;

}

2

/* pokazivač iznad */

a:hover {

color: hotpink;

}

/* odabrana poveznica */

a:active {

color: blue;

}

 Prilikom postavljanja stila oblikovanja za različita stanja poveznica uvažavati treba slijedeća

pravila poretka: a:hover MORA doći nakon a:link i a:visited, a:active MORA doći nakon a:hover.

 Svojstvo text-decoration uglavnom se koristi za micanje podcrtavanja sa poveznica.

 Pogledajte i proučite primjere, te riješite četiri vježbe zadane na stranici (vježbe).

CSS liste

 CSS svojstvima koja koristimo za liste može se:

 Postaviti različite oznake za elemente uređenih lista

 Postaviti različite oznake za elemente neuređenih lista

 Postaviti sliku kao oznaku elementa liste

 Dodati pozadinske boje listama i elementima liste

 CSS svojstvo list-style-type određuje tip oznake elementa liste, a ovisi o vrsti liste (npr. circle,

square, upper-roman, lower-alpha).

 CSS svojstvo list-style-image određuje sliku kao oznaku elementa liste: ul {

list-style-image: url('sqpurple.gif');

}

 CSS svojstvo list-style-position određuje poziciju oznaka elemenata liste. "list-style-position:

outside;" znači da je oznaka smještena izvan elemenata liste. Početak svakog retka sa tekstom

(elementi liste) poravnat je okomito, a oznake su ispisane izvan teksta liste (podrazumijevano).

 "list-style-position: inside;" znači da su oznake unutar elemenata liste. S obzirom da oznake

postaju dijelovi elemenata liste, postaju i dio teksta, pa uvlače početak teksta.

 CSS svojstvo list-style-type:none može se koristiti i za micanje oznaka sa liste. Potrebno je uočiti

da liste također sadrže i podrazumijevanu marginu i padding. Za njihovo micanje može se

koristiti: ul {

list-style-type: none;

margin: 0;

padding: 0;

}

 CSS svojstvo list-style je skraćeni zapis koji se koristi za postavljanje svih svojstava liste u jednoj

deklaraciji, npr.: list-style: square inside url("sqpurple.gif"); Pri tome je poredak za vrijednosti

pojedinih svojstava:

 list-style-type (ako je list-style-image naveden, vrijednost tog svojstva bit će ispisana ako se

slika iz nekog razloga nemože prikazati)

 list-style-position (određuje mjesto ispisa oznaka elemenata liste)

 list-style-image (određuje sliku kao oznaku elementa liste)

 ako neka vrijednost svojstva nedostaje, ubacuje se podrazumijevana vrijednost za nedostajuće

svojstvo).

3

 Liste možemo oblikovati i bojama kako bi izgledale zanimljivije. Sve što je dodano <ol> ili <ul>

oznaci, utječe na čitavu listu, a svojstva dodana <li> oznaci utječu na individualne elemente

liste.

 Riješite četiri vježbe pri dnu stranice.

CSS tablice

 CSS pomaže učiniti izgled tablice privlačnijim. Za određivanje rubova u CSS-u koristi se svojstvo

border (npr. border: 1px solid black;) za table, th i td elemente. Ako želite da tablica bude

razvučena preko cijelog ekrana (full-width), potrebno je dodati: 100% elementu <table>:

 table { width: 100%;}

 Ako tablica ima dvostruki rub (jer je definiran za table, <th> i <td>, rub se može u običan

promijeniti pomoću border-collapse: collapse;.

 Svojstvima width i height određene su širina i visina tablice. Ako želite tablicu širine pola

stranice, koristite za table vrijednost svojstva width: 50%;

 Vodoravno poravnanje sadržaja u poljima tablice (<th>, <td>) omogućuje svojstvo text-align

(left, right, center). Podrazumijevano, sadržaj <th> elemenata je centriran, a sadržaj <td>

elemenata poravnat je lijevo.

 Okomito poravnanje sadržaja u poljima tablice (<th>, <td>) omogućuje svojstvo vertical-align

(top, bottom i middle). Podrazumijevano okomito poravnanje svih sadržaja u tablici je middle.

 Za kontrolu prostora između rubova i sadržaja tablice koristi se svojstvo padding (za <td> i <th>

elemente).

 Kako bi se sadržaj tablice podijelilo samo vodoravno koristi se border-bottom svojstvo za <th> i

<td> (npr. border-bottom: 1px solid #ddd; ).

 Čitanje vrijednosti u tablici može biti olakšano upotrebom :hover selektora na <tr> kako bi se

označilo redak tablice kad je iznad njega pokazivač miša: tr:hover {background-color: #f5f5f5;}

 Prugasta tablica može se izvesti pomoću nth-child() selektora dodavanjem pozadinske broje

svim parnim ili neparnim redovima: tr:nth-child(even) {background-color: #f2f2f2;}

 Radi isticanja naslovnog retka može se iskoristiti postavljanje vrijednosti za pozadinsku boju i

boju teksta <th> elemenata.

 Responzivna tablica prilagodit će se širinom ekranu tako da će ispisati vodoravni scroll bar ako

ekran na kojem se prikazuje postane premali da bi se ispisao puni sadržaj. U ovom slučaju

pomaže kontejnerski element (npr <div>) sa overflow-x:auto oko <table> elementa:

 <div style="overflow-x:auto;">

<table>

... table content ...

</table>

</div>

 Riješite šest vježbi pri dnu stranice.

4

PONAVLJANJE I PRAKTIČNA VJEŽBA:

1. U online editoru provježbajte naučeno.

2. Napravite mrežnu stranicu na kojoj ćete usporediti tri različita tehnička proizvoda po

desetak karakteristika (npr. mobitele, računala, televizore, slušalice, preklopnike,

usmjernike). Karakteristike proizvoda potrebno je prikazati tablično. Tablicu treba urediti

na najbolji mogući način. U tablici moraju biti i male slike, te poveznice na stranice o tim

proizvodima. Na stranici mogu biti i drugi podaci ili slike.

3. Napravite mrežnu stranicu na kojoj će biti prikazan kalendar za neki od idućih mjeseci ove

godine. Kalendar se prikazuje kao tablica, a na stranici bi trebala biti i odgovarajuća slika.

Potrebno je paziti na sadržaj, semantiku i dizajn, odnosno izgled stranice u svim detaljima.

Napomena: ove praktične vježbe kad je to moguće izvodi svaki učenik samostalno.