Otisni knjiguOtisni knjigu

Elementi CSS-a

Sjedište: CARNET - Arhiva 2021 Loomen
E-kolegij: Osnove CSS-a
Knjiga: Elementi CSS-a
Otisnuo/la: Gost (anonimni korisnik)
Datum: subota, 23. studenoga 2024., 01:05

Opis

Osnove sintakse CSS-a, priključivanje stilova web stranici, određivanje elemenata na koje će pojedine definicije stilova djelovati. Usput, tu su i neka svojstva o kojima će više riječi biti u posebnoj knjizi.

Sadržaj

Pogled u CSS

Pogledajmo zajedno kako izgleda CSS. Kratak primjer usporedbe čistog HTML kôda i web stranice izrađene CSS‑om govori sam za sebe.

Ako želimo da ispis koji vidi korisnik izgleda ovako,

Lorem ipsum dolor sit amet,

consectetur adipisicing elit ...

možemo to uraditi sljedećim HTML kôdom:

<p>
<font face="Courier New, Courier, mono">
<font color="#9b5c98" size="+2">
<b>Lorem</b></font>
  ipsum dolor sit amet,</font>
</p>
<p>
<font face="Courier New, Courier, mono">
<font color="#9b5c98" size="+2">
<b>consectetur</b></font>
  adipisicing elit ... </font>
</p>

ili možemo napisati nekoliko linija CSS-a,

p {
  font-family: "Courier New", Courier, mono;
}
.naglaseno {
  color: #9b5c98;
  font-size: 24px;
  font-weight: bold;
}

i tada će, za isti rezultat ispisa, HTML kôd izgledati ovako:

<p>
  <span class="naglaseno">Lorem</span>
  ipsum dolor sit amet ...
</p>
<p>
  <span class="naglaseno">consectetur</span>
  adipisicing elit ...
</p>

U drugom primjeru izvedenom CSS-om vrijedi primijetiti dvije važne stvari:

  • jednostavnost HTML kôda,
  • oblik, veličina i boja znakova za obje linije kontrolira se s jednog mjesta.
  • Samo je drugi primjer HTML kôda u skladu sa strogim standardom HTML 4.01. Prvi je primjer ostvaren elementom font za koji se preporuča izbjegavati ga.
  • U stvarnim primjenama CSS-a nije preporučljivo miješati razne veličine znakova ili fontove u jednom redu kao što je to, demonstracije radi, učinjeno ovdje.
    
CARNet

Sastavnice CSS-a

Razmotrimo od čega se sastoji CSS kôd iz prethodne lekcije.

p { /* p je selektor */
  font-family: "Courier New", Courier, mono;
}
.naglaseno {
  color: #9b5c98;  /* color je svojstvo */
  font-size: 24px; /* 24px je vrijednost */
  font-weight: bold;
}

Ako taj kôd raščlanimo, pojedine elemente možemo razvrstati u tri glavne kategorije:

  • selektori – p, .naglaseno – identificiraju pojedine elemente na HTML stranici;
  • svojstva – color, font-size... – ključne riječi za opis pojedinog elementa stranice;
  • vrijednosti – #9b5c98, 24px... – vrijednost koju poprima pojedino svojstvo;

i četvrtu, pomoćnu, kategoriju:

  • komentari – tekst napisan između znakova /* i */.

Komentari se mogu nalaziti bilo gdje u stilu i ne utječu na prikaz sadržaja.

  • Ugniježđeni komentari su zabranjeni. Primjerice, ne smije se pisati:
  • /* Ovo je /*komentar*/ u komentaru*/.
   
CARNet
 

Što to točno CSS radi HTML-u?

Zamislimo ovakav slučaj. Napisali ste seminarski rad o jednom starom latinskom tekstu. Rad se sastoji od nekoliko stranica i željeli biste ga objaviti na webu.

Razmišljajući o načinu izrade, birate HTML. Dobro ste upoznati s tim jezikom pa vam izrada nekolicine stranica nije nikakav problem.

Dovršili ste stranice i gledate rezultat u pregledniku:

Lorem ipsum

Lorem ipsum je tekst koji se sastoji od niza slučajnih riječi bez značenja. Iako njegove riječi ne znače ništa, pretpostavlja se da je nastao na temelju Ciceronovog djela „O krajnostima dobra i zla”. Ovaj se tekst već stotinama godina koristi za testiranje ispisa i punjenje prostora tekstom.

„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat”.

Već ste na prvi pogled uočili da vašem seminarskom radu nešto nedostaje. Struktura i podaci su tu, ali prezentacija je za jedinicu. Vaša stranica je izrađena čistim HTML kôdom koji izgleda ovako:

<h1>Lorem ipsum</h1>
<p>Lorem ipsum je tekst koji se sastoji
od niza slučajnih riječi bez značenja. Iako
njegove riječi ne znače ništa, pretpostavlja se
da je nastao na temelju Ciceronovog djela...
...
<p>&quot;Lorem ipsum dolor...

Poznavajući vrijednost lijepe prezentacije, želite vaš rad izdignuti iznad razine bezličnog, suhoparnog teksta. Izradite CSS stil – običnu tekstualnu datoteku – i povežete je s HTML dokumentima. U CSS-u redom stoji sljedeće:

h1 {
  font-family: Verdana,Helvetica,sans-serif;
  font-weight: bold;
  font-size: 24px;
}
p {
  font-family: Verdana,Helvetica,sans-serif;
  font-size: 12px;
}
p.citat {
  font-style: italic;
  font-size: 12px;
  border: 1px solid #000;
  padding: 6px;
  background-color: #FFFFCC;
}

U HTML kôdu dodate poneki atribut, a budući da je citat od ostatka teksta odvojen grafički, možete i ukloniti navodnike iz citata:

<h1>Lorem ipsum</h1>
<p>Lorem ipsum je tekst koji se sastoji
od niza slučajnih riječi bez značenja. Iako
njegove riječi ne znače ništa, pretpostavlja se
da je nastao na temelju Ciceronovog djela...
...
<p class="citat">Lorem ipsum dolor...

Kao rezultat ove intervencije, u konačnom prikazu dobijete sljedeće:

Lorem ipsum

Lorem ipsum je tekst koji se sastoji od niza slučajnih riječi bez značenja. Iako njegove riječi ne znače ništa, pretpostavlja se da je nastao na temelju Ciceronovog djela „O krajnostima dobra i zla”. Ovaj tekst se već stotinama godina koristi za testiranje ispisa i punjenje prostora tekstom.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Promotrimo što se točno dogodilo s vašim ispisom. Kreiranjem stila CSS-om i njegovim povezivanjem s dokumentom, dogodila se promjena koja se očituje pri učitavanju dokumenta u preglednik. Preglednik pri učitavanju dozna da postoji CSS, pročita ga, prepozna ključne riječi, a zatim pokuša prikazati dokument onako kako mu to sugerira CSS.

Primjerice, u CSS-u stoji da tekst koji se nalazi unutar oznake <h1> poprima sljedeće parametre:

  • tekst je napisan fontom Verdana ili Helvetica ili sans‑serif, i to redom kako je font dostupan pregledniku
  • tekst će biti podebljan
  • visina znakova bit će 24 piksela.

Ukoliko je CSS točno definiran i ukoliko preglednik podržava navedena svojstva, rezultat će biti prikaz kakav nalaže CSS.

   
CARNet

Kako povezati CSS s HTML dokumentom?

U prethodnim lekcijama vidjeli ste kako izgleda CSS. Da bi se definirani CSS mogao primijeniti na dokument, potrebno ga je povezati s HTML dokumentom. To se može izvesti na četiri načina:

  • povezivanjem na vanjski dokument
  • uvoženjem vanjskog dokumenta
  • umetanjem u zaglavlje dokumenta
  • dodavanjem atributa style HTML oznaci.

Dodavanje stila bit će prikazano na primjeru CSS-a iz jedne od prethodnih lekcija:

p {
  font-family: "Courier New", Courier, mono;
}
.naglaseno {
  color: #9b5c98;
  font-size: 24px;
  font-weight: bold;
}
   
CARNet

CSS iz vanjskog dokumenta

U prva dva slučaja pretpostavljamo da postoji zaseban dokument – datoteka pohranjena pod imenom stil.css, a u kojoj se nalazi navedeni CSS stil, i to bez ikakvih dodatnih oznaka:

p {
font-family: "Courier New", Courier, mono;
}
.naglaseno {
color: #9b5c98;
font-size: 24px;
font-weight: bold;
}

Povezivanje na vanjski dokument

Povezivanje na vanjski dokument izvodi se oznakom <link> koja se dodaje u zaglavlje HTML dokumenta – između oznaka <head> i </head>.

Oznaka <link> sastavni je dio HTML standarda i služi povezivanju s vanjskim dokumentima. Završna oznaka </link> ne postoji.

Uz oznaku <link> postoji više atributa od kojih su nam najbitnija sljedeća tri:

  • rel – definira odnos između oznake i odredišnog dokumenta. Može poprimiti nekoliko vrijednosti, a kad služi za povezivanje CSS-a, poprima vrijednost stylesheet;
  • type – definira tip odredišnog dokumenta. U ovom slučaju tip dokumenta je text/css;
  • href – URI dokumenta koji se povezuje.

Dakle, naš dokument povezao bi se sljedećim kôdom:

<head>
...
<link rel="stylesheet"
type="text/css" href="stil.css">
...
</head>
  • Podsjetimo se: URI – Uniform Resource Identifier. Kod atributa href dopuštena je upotreba apsolutne i relativne putanje, sa stazom zapisanom u odnosu na smještaj HTML dokumenta ili u odnosu na korijen web sjedišta.
  • Npr:
    href="http://www.primjer.com/css/stil.css"
    ili
    href="stil.css"
    ili
    href="/css/stil.css".

Uvoz vanjskog dokumenta

Uvoz CSS-a obavlja se putem ključne riječi @import. Ona se upisuje u zaglavlju dokumenta i to unutar oznake <style>. U oznaku <style> obavezno se postavlja atribut tipa: type="text/css".

<head>
...
<style type="text/css">
@import url("/css/stil.css");
@import "/css/stil2.css";
@import "http://www.example.com/css/stil3.css";
</style>
...
</head>

Uvoz CSS datoteke (@import) autoru omogućava isto što i povezivanje HTML datoteke s CSS datotekom (<link>). Razlika je u činjenici da se putem ključne riječi @import stilovi mogu uvoziti u druge CSS datoteke.

  • Pri povezivanju CSS-ova iz vanjskih datoteka, bez obzira na metodu, bitno je pripaziti na redoslijed uvezenih stilova. Ukoliko su na više mjesta definirane različite vrijednosti svojstava istog selektora, zbog kaskadnih svojstava CSS-a nadvladava posljednja definicija. Više o tome u lekciji Kaskade.

   
CARNet

CSS u dokumentu
 

CSS se piše u dokumentu ako se odnosi samo na taj dokument ili još manje, samo na pojedini element.

Umetanje CSS-a u zaglavlje dokumenta

CSS se može definirati u zaglavlju dokumenta u oznaci <style> uz uporabu atributa type="text/css".

<head>
...
<style type="text/css">
p {
font-family: "Courier New", Courier, mono;
}
.naglaseno {
 color: #CC0000;
font-size: 24px;
font-weight: bold;
}
</style>
...
</head>

Primjećujete da je navedeni način umetanja jako sličan opisanom uvozu CSS-a. Ustvari, moguće ih je i kombinirati, tako da se, ispod linija za uvoz CSS-a, nadopišu lokalne definicije CSS-a.

<head>
...
<style>
@import "/css/stil.css";
p {
font-family: "Courier New", Courier, mono;
}
</style>
...
</head>

Dodavanje CSS-a u liniji atributom style

Stilovi za pojedinačnu HTML oznaku u dokumentu mogu biti definirani atributom style. Ovaj se atribut može definirati za gotovo sve HTML oznake u tijelu dokumenta – izuzetak su oznake <script> i <param>.

<p style="font-size:10px">...tekst...</p>

Ovako definiran stil vrijedi samo za oznaku unutar koje je definiran. Budući da od stilova očekujemo da djeluju na slične elemente cijelog dokumenta, pa i web sjedišta, ovakva se definicija stila u pravilu upotrebljava vrlo rijetko, samo kad treba oblikovati unikatni dio teksta.

  • Dodavanje CSS-a u liniji atributom style se kosi s idejom o razdvajanju sadržaja od dizajna jer se podaci o dizajnu ponovno nalaze u HTML datoteci. Njegova je primjena isključivo na mjestima u kojima nema drugog rješenja.
  • Pogledajte sami jednu situaciju u kojoj se upotrebljava atribut style: nađite neki CMS u kojem možete objavljivati članke, neki LMS u kojem možete slati poruke na forum ili slično. Napišite neki tekst, obojite nekoliko riječi, te pogledajte kôd napisanog priloga. Najčešće sadrži ili zastarjele HTML oznake (<font>) ili atribut style.
CARNet

Kada što upotrebljavati?

Četiri opisana načina možemo sumirati sljedećim grafičkim prikazom:

četiri načina uključivanja stilova
1. Povezivanje na vanjski dokument
2. Uvoženje vanjskog dokumenta
3. Umetanje u zaglavlje dokumenta
4. Dodavanje u liniji s pomoću atributa style.

Sva je četiri načina moguće upotrebljavati istovremeno, upravo kako je na slici prikazano. Izbor načina povezivanja ovisi o načinu i uvjetima korištenja CSS-a. Općenito vrijede sljedeće postavke:

  • CSS iz jednog vanjskog dokumenta može se povezati s većim brojem HTML dokumenata.
  • Promjene stila u vanjskom dokumentu mogu se izvesti bez mijenjanja HTML dokumenta.
  • Upotrebom vanjskog dokumenta različitim se preglednicima mogu isporučiti različiti CSS dokumenti – detekciju preglednika naučite u naprednijim CARNet‑ovim tečajevima.
  • Stilovi definirani unutar HTML dokumenta koriste se kad u nizu stranica postoji potreba za stilom koji se koristi na samo jednoj od njih.

Osim što HTML dokument mora biti oblikovan prema željama autora, važno je i da kôd bude pregledan. Zato se preporuča u sličnim situacijama upotrebljavati uvijek isti način uključivanja stilova, a ne mijenjati način samo zato jer postoje četiri mogućnosti. Zadaci tijekom učenja su iznimke jer sve mogućnosti trebate isprobati i dobro uvježbati.

  • Odgovorite na pitanje iz naslova, kada koji način uključivanja stilova upotrebljavati, za sljedeće situacije:
    • ... ako želimo imati sve stranice web sjedišta istog stila
    • ... ako uz prethodni zahtjev na stranici „O nama” imamo izjave korisnika koje želimo napisati drugačije od teksta kojem smo mi autori.
  • Katkad način objavljivanja web stranica određuje tehniku rada. Tako nam je način objavljivanja lekcija u ovom tečaju ograničio rad sa stilovima na uključivanje vanjskih CSS datoteka oznakom <link> i na određivanje stilova unutar HTML oznaka (stilove u liniji).


CARNet

Selektori

Naučili smo kako povezati CSS stil s HTML dokumentom. Sad trebamo proučiti kako implementirati pojedini stil na dio ili na cijelu HTML stranicu.

U lekciji Sastavnice CSS-a vidjeli smo da se pojedini stil definira kao:

selektor {svojstvo:vrijednost}

Selektor identificira HTML element ili elemente na koje se primjenjuje navedeni stil. Postoji čitav niz selektora pa potpuno upoznavanje primjene svakog od njih nije nimalo banalan zadatak. Ovdje ćemo detaljnije obraditi nekoliko osnovnih, najčešće upotrebljavanih tipova:

  • jednostavni selektori
  • klasni selektori
  • ID selektori
  • kontekstni selektori
  • pseudoklase.

Prije upoznavanja selektora, nekoliko riječi o strukturi HTML dokumenta. HTML dokument možemo prikazati kao stablo prema sljedećoj slici:

HTML dokuemnt prikazan kao stablo HTML dokument prikazan kao hijerarhijsko stablo.

Vidljivo je da elementi unutar stabla imaju svoje podređene i nadređene elemente. Primjerice, element tr je sadržan u elementu table, a element table sadržan u elementu body. Selektorom možemo precizno identificirati bilo koji od elemenata stabla.

    
CARNet

Jednostavni selektori

Jednostavni selektori (eng. type selectors) najjednostavniji su od svih. Odgovaraju imenu HTML oznake i primjenjuju se na svaki istovrsni element u dokumentu.

Primjerice, razmotrimo sljedeći stil:

p {
font-family: Verdana, Helvetica, sans-serif;
}
h1 {
color: #9b5c98;
font-size: 24px;
font-weight: bold;
}

Ovakav stil povezan s HTML dokumentom sugerira web pregledniku da tekst u svim paragrafima na stranici prikaže ispisan prvim raspoloživim od navedenih fontova te da sav tekst unutar <h1> oznaka u dokumentu prikaže podebljan, ljubičaste boje i veličine 24px.

Prednost korištenja ovakve vrste selektora je u tome što, osim samog povezivanja stila s dokumentom, ne zahtijeva intervencije u HTML kôd. Primjerice, ako želimo definirati tip i veličinu fonta za sve stranice, dovoljno je to napraviti ovim selektorom:

body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
}

Zbog toga što je selektor body na vrhu hijerarhije vidljivog dijela HTML dokumenta – prisjetimo se slike iz lekcije Selektori – svi elementi koji se hijerarhijski nalaze niže od njega, poprimit će navedena svojstva. Više o tome u lekciji o nasljeđivanju.

Nedostatak primjene CSS-a putem jednostavnih selektora je u tome što se definirani stil primjenjuje na sve HTML elemente bez izuzetaka. Ne možemo postići da se, primjerice, paragrafi u tablici prikazuju različito od paragrafa izvan tablice, što nam mogu omogućiti selektori koje ćemo upoznati u jednoj od sljedećih lekcija.

  • Kopirajte ovaj kôd i snimite ga u tijelo HTML dokumenta. Kreirajte CSS datoteku i pridružite je snimljenom dokumentu ili stil definirajte unutar zaglavlja HTML dokumenta. Pokušajte promijeniti parametre veličine i boje slova na paragrafima i naslovima onako kako ste to vidjeli u CSS primjerima iz ove lekcije.
  • <h1>Lorem ipsum</h1>
    <p>Lorem ipsum je tekst koji se sastoji
    od niza slučajnih riječi bez značenja.
    Iako njegove riječi ne znače ništa,
    pretpostavlja se da je nastao na temelju
    Ciceronovog djela „O krajnostima
    dobra i zla”. Ovaj tekst se već
    stotinama godina koristi za testiranje
    ispisa i punjenje prostora tekstom.    </p>
    <p>"Lorem ipsum dolor sit amet,
    consectetur adipisicing
    elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat".    </p>
  • Rješenje


CARNet

Klasni selektori

Kao što smo već rekli, dobra strana jednostavnih selektora – primjena na sve oznake istog tipa – ujedno može biti i njihov velik nedostatak. Pretpostavimo da želite izraditi stranicu s prijevodima latinskih izreka tako da u jednom paragrafu navedete izreku, u sljedećem prijevod, i tako naizmjence. Da bi posjetitelji lakše razlikovali prijevod od izvornika, željeli biste da tekst u paragrafima s različitim vrstama sadržaja bude različito formatiran.

Možemo definirati ovakav stil:

.izreka {
font-weight: bold;
font-size: 11px;
}
.prijevod {
font-style: italic;
font-size: 12px;
}

te uz primjenu sljedećeg kôda:

<p class="izreka">Navigare necesse est,
vivere non est necesse.</p>
<p class="prijevod">Ploviti je nužno,
živjeti nije nužno.</p>

dobiti ovakav rezultat:

Navigare necesse est, vivere non est necesse.

Ploviti je nužno, živjeti nije nužno.

  • Primjećujete da se pri definiranju selektora piše .naziv, a pri primjeni selektora na paragraf samo naziv.

Drugi način definiranja je oznaka.naziv. Razlika je što se ovako definirani selektori mogu primijeniti samo na oznake istog tipa. Primjerice:

p.izreka {
font-weight: bold;
font-size: 11px;
}
p.prijevod {
font-style: italic;
font-size: 12px;
}

Ovako definirani selektori primjenjuju se jednako kao i prethodni – <p class="naziv"> – ali za razliku od prethodnih, koji se mogu primijeniti na različitim oznakama, ovakvi se mogu primijeniti samo na paragrafe.

Na ovakav način definirali smo klasne selektore i identificirali pojedine paragrafe kao pripadnike jedne, odnosno druge klase.

  • Uzmite ponovno isti kôd kao u prethodnoj vježbi i kreirajte novi HTML dokument. Koristeći se stilovima nalik na primjere stilova iz ove lekcije, pokušajte različito prikazati pojedine paragrafe.
  • <h1>Lorem ipsum</h1>
    <p>Lorem ipsum je tekst koji se sastoji
    od niza slučajnih riječi bez značenja.
    Iako njegove riječi ne znače ništa,
    pretpostavlja se da je nastao na temelju
    Ciceronovog djela „O krajnostima
    dobra i zla”. Ovaj tekst se već
    stotinama godina koristi za testiranje
    ispisa i punjenje prostora tekstom.    </p>
    <p>"Lorem ipsum dolor sit amet,
    consectetur adipisicing
    elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat".    </p>
  • Rješenje
  • Prije prelaska na sljedeću lekciju dodajte svojoj stranici još jedan odlomak na hrvatskom i oblikujte ga jednako kao tekst na hrvatskom iz prethodnog zadatka.



CARNet

Id selektori
 

Na prvi se pogled ovaj tip selektora razlikuje od klasnih selektora samo u dvije stvari. Prvo, umjesto točke definira se oznakom #:

#izreka {
font-weight: bold;
font-size: 11px;
}
#prijevod {
font-style: italic;
font-size: 12px;
}

i drugo, umjesto atributom class primjenjuje se atributom id:

<p id="izreka">Navigare necesse est,
vivere non est necesse.</p>
<p id="prijevod">Ploviti je nužno,
živjeti nije nužno.</p>

Rezultat je jednak prethodnom:

Navigare necesse est, vivere non est necesse.

Ploviti je nužno, živjeti nije nužno.

Vjerojatno se pitate u čemu je onda razlika između klasnog i id selektora. U jednom bi HTML dokumentu svi id atributi trebali biti različiti. Oni su namijenjeni referenciranju na određeni element. Primjerice, u dokumentu smije biti samo jedan paragraf s atributom id="izreka". Id selektor primjenjuje se kada se želi pridodati stil za jedan jedinstven element na stranici.

  • Zbog usporedbe s prethodnom lekcijom ovdje je id atribut primijenjen na paragraf čime je on oblikovan različito od ostalih.
  • Budući da smo planirali sastaviti stranicu s nizom izreka, ovakva nam definicija ne bi odgovarala. S druge strane, ona bi bila idealna ako planiramo na svaku stranicu staviti po jednu izreku s prijevodom.
     
  • Primjer s ove stranice preuredite tako, da samo izreka bude podebljana, a da završni tekst bude oblikovan kao obični odlomak.
  •  
CARNet

Kontekstni selektori

Vidjeli smo da je, koristeći jednostavne selektore, lako primijeniti stil na sve istovrsne elemente u stranici. Također smo vidjeli kako možemo, koristeći klasne selektore, primijeniti stil na pojedine elemente na stranici. Međutim, što ako želimo primijeniti stil na sve elemente koji se pojavljuju unutar nekog drugog elementa? Mogli bismo, kao u sljedećem primjeru, svakom takvom elementu dodati klasu:

p {
font-weight: bold;
font-size: 11px;
}
.istakni {
font-size: 12px;
color: purple;
}
<p><b class="istakni">Navigare</b> necesse est,
<b class="istakni">vivere</b>
non est necesse.</p>

Navigare necesse est, vivere non est necesse.

Ovakvo rješenje, iako funkcionalno, zbog prevelike intervencije u HTML kôd nije jako elegantno. CSS nam nudi mnogo bolje rješenje u obliku kontekstnih selektora. Primjerice, ako definiramo selektor p b, on će biti primijenjen na sve elemente b, ali samo ako se u hijerarhijskom stablu nalaze unutar elementa p. Zbog uočavanja razlike, u sljedeći kôd dodan je još selektor za podnaslove:

h6 {
font-weight: normal;
font-size: 11px;
}
p {
font-weight: bold;
font-size: 11px;
}
p b {
font-size: 12px;
color: purple;
}
<h6><b>Navigare</b> necesse est, ...</h6>
<p><b>Navigare</b> necesse est,
<b>vivere</b> non est necesse.</p>

Navigare necesse est, ...

Navigare necesse est, vivere non est necesse.

Vidljivo je da je ljubičasta boja definirana za element s oznakom <b> primijenjena samo kada se oznaka <b> nalazi unutar oznake <p>, a ne i kad se nalazi unutar neke druge oznake, na primjer <h6>.

  • U prilogu se nalazi HTML datoteka s pripremljenom strukturom dokumenta. Snimite je na svoje računalo, proučite kôd i pokušajte eksperimentirati mijenjajući primijenjen stil (primjerice veličinu znakova, boje znakova i sl.). Uočite gdje se izgled znakova mijenja, a gdje ne.



CARNet

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

Grupiranje selektora

Kada nekoliko selektora dijeli određena svojstva, postoji mogućnost njihova grupiranja u popis odvojen zarezima. To se uobičajeno primjenjuje radi preglednosti zapisa i jednostavnosti manipulacije svojstvima. Razmotrimo sljedeći primjer:

Namjeravamo definirati naslove s oznakama <h1>, <h2> i <h3> tako da im odredimo veličinu i font. Želimo da svi naslovi imaju isti font, ali da budu različite veličine.

h1 {
  font-family: sans-serif;
  font-size: 16px;
}
h2 {
  font-family: sans-serif;
  font-size: 14px;
}
h3 {
  font-family: sans-serif;
  font-size: 12px;
}

Ako kod ovakvog zapisa želimo promijeniti font definiran za naslove, to je potrebno napraviti na tri mjesta. Jedna od uloga CSS-a je da promjene svojstava učini što jednostavnijim, pa je upravo zato predviđena mogućnost grupiranja selektora. U ovom slučaju to biste napravili sljedećom definicijom:

h1, h2, h3 {
  font-family: sans-serif;
}
h1 {
  font-size: 16px;
}
h2 {
  font-size: 14px;
}
h3 {
  font-size: 12px;
}

U praksi se selektori koji dijele ista svojstva redovito grupiraju.

   
CARNet

Nasljeđivanje

 
Podsjetimo se – HTML hijerarhijsko stablo.

Slikom HTML hijerarhijskog stabla možemo ilustrirati nasljeđivanje, još jedno važno svojstvo CSS-a. Elementi koji su niže u stablu – tzv. potomci – nasljeđuju svojstva od svojih roditeljskih elemenata.

Ukoliko na primjeru sa slike imamo definiran sljedeći selektor:

td {
color: red;
}

tada će cjelokupni tekst unutar ćelije tablice biti crvene boje, bez obzira bio on unutar paragrafa ili elementa popisa.

Naravno, ako je na nekom od elemenata – potomstva primijenjen neki drugi stil, taj stil ima prioritet pri prikazivanju.

Razmotrimo još jedan tipičan primjer upotrebe nasljeđivanja:

body { font-size: 10pt; }
h1 { font-size: 120%; }

Budući da je <h1> unutar oznake <body>, veličina znakova unutar oznake <h1> bit će 12pt. S druge strane, možemo sav tekst na stranici povećati samo izmjenom veličine znakova u elementu body, pri čemu će odnos veličina običnog teksta i naslova ostati jednak kao prije promjene.

  • U prilogu se nalazi HTML datoteka s pripremljenim primjerima nasljeđivanja. Spremite je na računalo, proučite kôd i eksperimentirajte mijenjajući primijenjeni stil.
     

CARNet

Kaskade

Vidjeli smo kako CSS možemo na različite načine povezati s dokumentom. U određenim uvjetima može se dogoditi da više selektora s istim atributima, ali različitim svojstvima, identificiraju isti element na stranici. Koje od pravila će se tada primjenjivati definirano je kaskadnim svojstvima CSS-a.

Iako postoji egzaktan način izračuna koji selektor u kojoj situaciji prevladava, njegova složenost izlazi iz okvira ovog tečaja. Međutim, možemo postaviti prioritetni redni popis, koji u većini slučajeva daje željen rezultat. Na prvom mjestu su selektori s najvećim prioritetom:

  1. stilovi pridijeljeni atributom style
  2. id selektori
  3. klasni selektori i pseudoklase
  4. kontekstni, pa jednostavni selektori.

Na sljedećem primjeru prikazan je prioritet selektora:

h1 {
  color: red;
}
#naslov {
  color: darkblue;
}
.plavo {
  color: blue;
}
<h1 id="naslov">Lorem ipsum</h1>
<p class="plavo" style="color:purple;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Naslov je plav jer je id selektor #naslov većeg prioriteta od jednostavnog selektora h1. Budući da je u paragrafu tekst definiran atributom style, koji je većeg prioriteta od klasnog selektora .plavo, tekst je ljubičaste boje.

  • Ukoliko dva selektora imaju potpuno isti prioritet, vrijedit će onaj koji je u stilu posljednji naveden.
    
CARNet

CSS model kutije

 

CSS elemente na stranici tretira kao posložene kutije – pravokutnike – koje se na stranici slažu jedna iza druge ili jedna ispod druge. Izgled kutije i njezina svojstva definirani su sljedećim prikazom:

CSS model kutije.

Iako na prvi pogled razmatranje, primjerice, paragrafa kao kutije ne izgleda logično, vrlo se brzo mogu uočiti prednosti takvog načina predočavanja sadržaja. Naime, bez CSS-a nismo u mogućnosti na jednostavan način formatirati prikaz sadržaja paragrafa.

Primjerice, kako prostor između dva paragrafa učiniti većim? Bez CSS-a to bismo mogli napraviti dodavanjem nekakvih razmaka. U te su se svrhe često upotrebljavale prozirne sličice poznatije pod imenom spacer.gif. Često su se upisivali i prazni odlomci, uzastopni prijelomi redaka, kao i nelomljivi razmaci (&nbsp;).

CSS model koji paragraf tretira kao kutiju nudi puno jednostavnije rješenje – definiraju se margine, debljine granica, kao i odmaci sadržaja od granice.

p {
margin-top: 5px;
margin-bottom: 20px;
padding-left: 30px;
}

Ishod je prikazan na sljedećoj slici. Bijeli je okvir sadržaj paragrafa, žutom su bojom prikazane margine, a ljubičastom odmaci.


Prikaz paragrafa.

No, ako se jedan iza drugog nalaze blok elementi s marginama, onda se u pravilu te margine skupljaju. Jednostavna situacija prikazana je na sljedećoj slici.


Prikaz dvaju paragrafa sa skupljenim marginama.
  • U prilogu se nalazi HTML datoteka s pripremljenim paragrafima. Snimite je na svoje računalo, proučite kôd i pokušajte mijenjati odmake i margine.
     

CARNet
 

CSS elementi

Elemente u CSS-u možemo podijeliti na tri grupe. To su:

  • blok elementi (eng. block level elements)
  • linijski elementi (eng. inline elements)
  • popisi (eng. lists).

Blok elementi

To su elementi koji su u dokumentu odvojeni od ostalih elemenata što ih okružuju. Ako autor nije odredio drugačije, sljedeći element započinje u novoj liniji. Tipičan primjer ovog tipa elemenata su <p> i <h1>, koje ste često susretali u prethodnim lekcijama.

Uobičajeno ponašanje blok elementa
– paragrafi se uvijek prikazuju složeni jedan ispod drugoga.

Linijski elementi

Za razliku od blok elemenata, linijski elementi dolaze u nizu, jedan za drugim. Tipičan primjer su elementi <a> i <img>.

Uobičajeno ponašanje linijskih elementa – linkovi
se uvijek prikazuju u nizu s okolnim tekstom.

Popisi

Popisi su blok elementi, koji, osim blok svojstava, imaju i grafičku ili brojčanu oznaku ispred teksta.

    
CARNet

Generički kontejneri span i div

Smisao generičkih kontejnera je strukturirano obuhvaćanje i formatiranje raznih elemenata koje mogu sadržavati. Za razliku od oznaka koje su predefinirane – <p>, <h1>, ... – definiranje zadaće generičkih kontejnera prepušteno je dizajneru.

Element span

Element span je linijski generički kontejner. Tipičan primjer span kontejnera je formatiranje nekolicine riječi u tekstu.

p {
  font-size: 11px;
}
.istaknuto {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #000;
}
<p>Lorem <span class="istaknuto">ipsum dolor</span>, sit amet.</p>

Lorem ipsum dolor sit amet...

Element div

Element div je blok generički kontejner. Najčešće služi za obuhvaćanje više blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedničko formatiranje. Primjer uporabe ovog elementa su prikazi CSS i HTML kôda u ovom tečaju.

/* ovaj je kod prikazan u kontejneru
definiranim sljedećim stilom */
.csskod {
  padding: 5px;
  margin: 0;
  width: 380px;
  color: #CC0000;
  background-color: #FFFFCC;
  font-family: courier, mono;
  text-align: left;
  border-width: 1px;
  border-style: dashed;
  border-color: #455372;
}
  • Zbog jednostavnosti uporabe i velike fleksibilnosti pri formatiranju raznog sadržaja, pri izradi stranica se generički kontejneri često koriste i tamo gdje to nije potrebno.
  • Nemojte pretjerati s uporabom. Primjerice, ukoliko želite formatirati tekst s okvirom, nemojte postavljati tekst u span ili div kontejner kojem ste dodali okvir – sjetite se da se okvir može definirati i u paragrafu, koji je već ionako predviđen za formatiranje teksta (vidi primjer CSS-a i ispis iz lekcije Što to točno CSS radi HTML-u?).
   
CARNet