3. HTML KAO PITANJE
• Kako prilagoditi izgled stranice da ona
bude jednakog prikaza u svim
preglednicima?
• Kako oblikovati dokument da elementi u
njemu budu precizno smješteni?
• Kako na web sjedištu od stotinu stranica
odjednom promijeniti, primjerice, boju
fonta na svim stranicama?
4. CSS KAO ODGOVOR
• Prva
specifikacija
CSS-a - 1994
(Håkon Wium
Lee i Bert Bos)
5. PREDNOSTI CSS-a
• Odvajanje prezentacije podataka i dizajna od
same strukture podataka. Dizajneri su
neovisni o kreatorima HTML koda.
• HTML kôd postaje neusporedivo čitkiji i
manji
• Moguće je jednostavnom promjenom
nekoliko parametara, promijeniti izgled
tisućama stranica.
• Otpočetka je standardiziran pod okriljem W3
konzorcija
• CSS je donio čitav niz načina za uređivanje
prikaza podataka koji do tada nisu postojali u
samom HTML-u
14. Od čega se sastoji CSS kod?
1. selektori - p, .stil - identificiraju pojedine
elemente na HTML stranici;
2. svojstva - color, fontsize... - ključne riječi za
opis pojedinog elementa stranice;
3. vrijednosti - #CC0000, 24px... - vrijednost
koju može poprimiti pojedino svojstvo;
4. komentari - tekst napisan između znakova /*
i */.
15. VJEŽBA – što točno css radi html-u?
<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
ved stotinama godina koristi za testiranje
ispisa i punjenje prostora tekstom</p>
<p class="citat">"
Lorem ipsum dolor...
</p
16. VJEŽBA – što točno css radi html-u?
h1 {
font-family:Verdana,Helvetica,sans-serif;
font-weight:bold;
font-size:14px;
}
p{
font-family:Verdana,Helvetica,sans-serif;
font-size:12px;
}
p.citat {
font-style:italic;
font-size:12px;
border:1px solid #000;
padding:4px;
background-color:#FFFFCC;
}
19. 4 načina spajanja
1. Povezivanje s vanjskim css
dokumentom
2. uvoženjem vanjskog css dokumenta
3. umetanjem u zaglavlje dokumenta
4. dodavanjem u liniji atributom style.
20. Povezivanje s vanjskim css
dokumentom
• Povezivanje na vanjski dokument izvodi se
oznakom <link> koja se dodaje u zaglavlje
HTML dokumenta
• Uz oznaku <link> postoji više atributa
od kojih su nam najbitnija sljedeća tri:
1. rel - definira odnos između oznake i
odredišnog dokumenta. Kad služi za
povezivanje CSS-a, poprima vrijednost
"stylesheet";
2. type - definira tip odredišnog dokumenta.
U ovom slučaju tip dokumenta je
"text/css";
3. href - URI dokumenta koji se povezuje.
22. Uvoz vanjskog css dokumenta
• Uvoženje CSS-a obavlja se putem ključne
riječi @import. Ona se upisuje u
zaglavlju dokumenta i to unutar <style>
oznake.
23. Umetanje u zaglavlje dokumenta
• CSS se može definirati u zaglavlju
dokumenta u oznaci <style>, uz uporabu
atributa type="text/css".
24. Dodavanje unutar HTML koda
• Atribut style
• Vrijedi samo za oznaku unutar koje je
definiran
26. Selektori
• Selektor identificira element ili dio HTML
stranice na koji se primjenjuje navedeni stil.
• Opdi oblik:
selektor {svojstvo:vrijednost} .
• Najčešde vrste selektora:
1. jednostavni selektori
2. klasni selektori
3. ID selektori
4. kontekstni selektori
5. pseudoklase
42. Tri grupe CSS elemenata
• blok elementi (eng. block level
elements)
• linijski elementi (eng. inline
elements)
• popisi (eng. lists).
43. SPAN ELEMENT
• Element <span> je linijski generički
kontejner.
• Smisao generičkih kontejnera je
strukturirano obuhvadanje i formatiranje
raznih elemenata koje mogu sadržavati.
• Za razliku od oznaka koje su
predefinirane - <p>, <h1>, ... -
definiranje zadade generičkih kontejnera
prepušteno je dizajneru.
45. DIV ELEMENT
• Element <div> je blok generički
kontejner.
• Najčešde služi za obuhvadanje više blok
ili linijskih elemenata unutar jedne
strukture koja dijeli zajedničko
formatiranje.
• <div> elementi koriste se za
pozicioniranje sadržaja html stranice
(dizajn stranice)
