1. Cascading Style Sheets
CSS
Cascading Style Sheets

2. CSS - kaskadni stilovi
Jednostavan mehanizam za dodavanje stilova - fontova, boja itd. web stranicama
izvor:

3. Prednosti: Odvajanje dizajna od sadržaja
HTML kôd postaje čitkiji i manji
jednostavnom promjenom nekoliko parametara moguće je promijeniti izgled tisućama stranica
CSS je donio čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u HTML-u
izvor:

4. Alati za izradu CSS-a http://www.w3.org/Style/CSS/#editors TopStyle
izvor:

5. Mjerne jedinice Boje: Dužine: #rrggbb
Point [pt] - tipografska jedinica koja dužinu od jednog inča definira sa 72 pointa.
em [em] - relativna jedinica za definiranje veličine fonta. Po definiciji je ekvivalentna vrijednosti "font-size" za dani element.
Piksel [px]
izvor:

6. Primjer CSS-a
p { font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; font-size:24px; font-weight:bold; }
izvor:

7. Sastavnice CSS-a selektori - p, .stil svojstva - color, fontsize...
identificiraju pojedine elemente na HTML stranici;
svojstva - color, fontsize...
ključne riječi za opis pojedinog elementa stranice;
vrijednosti - #CC0000, 24px...
vrijednost koju može poprimiti pojedino svojstvo;
Komentari
tekst napisan između znakova /* i */.
izvor:

8. selektori pojedini stil definira se kao:
selektor {svojstvo:vrijednost;}
Jedan selektor može sadržavati i više svojstava
Svojstva se odvajaju znakom ;
Svojstvo može imati više vrijednosti
Vrijednosti se odvajaju zarezom
Uz vrijednost svojstva može stajati i jedinica (npr. pt)
Između vrijednosti i jedinice ne smije biti razmaka
Selektor identificira element ili dio HTML stranice na koji se primjenjuje navedeni stil
izvor:

9. Tipovi selektora: jednostavni selektori klasni selektori ID selektori
kontekstni selektori
pseudoklase
izvor:

10. Struktura html dokumenta
izvor:

11. Jednostavni selektori
Najjednostavniji
Odgovaraju imenu html oznake
primjenjuju se na svaku istovrsnu oznaku u dokumentu
izvor:

12. Primjer:
p {   font-family:Verdana, Helvetica, sans-serif; } h1 {   color:#CC0000;   font-size:24px;   font-weight:bold; }
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, crvene boje i veličine 24px.
izvor:

13. Grupiranje selektora
Kada nekoliko selektora dijeli određena svojstva, postoji mogućnost njihova grupiranja u popis odvojen zarezima.
izvor:

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

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

16. Klasni selektori
Koriste se kada sve oznake istog tipa NE želimo jednako formatirati
Npr: paragrafe sa objašnjenjima i primjerima
Klasni selektori označavaju se . ispred imena
definiraju se na dva načina:
.naziv ili
oznaka.naziv
izvor:

17. primjer
.primjer{ font-family: "Courier New", Courier; font-size: 10pt; text-align: left; padding-left: 3%; } p.vazno { font: bold 11pt; font-family: Verdana, Tahoma, Calibri, fantasy; text-align: justify; color: #483D8B;
izvor:

18. Povezivanje s dokumentom:
<oznaka class=“naziv”> npr. <p class=“primjer”> <p class=“vazno”>
izvor:

19. id selektori
koriste se za elemente koji trebaju biti JEDINSTVENI na stranici (npr. naslove)
definira se slično kao klasni selektor
umjesto . koristi se znak #
umjesto atributa class koristi se atribut id
izvor:

20. primjer
#naslov{ font-family: Verdana, Geneva, Arial; font-size: larger; font-style: italic; font-variant: small-caps; font-weight: bold; text-align: center; color: #483D8B; }
izvor:

21. CSS elementi Elemente u CSS-u možemo podijeliti na tri grupe:
blok elementi (eng. block level elements)
linijski elementi (eng. inline elements)
popisi (eng. lists).
izvor:

22. blok elementi
elementi koji su u dokumentu odvojeni od ostalih elemenata što ih okružuju
Predefinirano se ponašaju tako da sljedeći element započinje u novoj liniji
Tipičan primjer ovog tipa elemenata su <p> i <h1>,
izvor:

23. linijski elementi dolaze u nizu, jedan za drugim
primjer: elementi <a> i <img>
izvor:

24. popisi
blok elementi koji imaju i grafičku ili brojčanu oznaku ispred teksta
izvor:

25. oznaka span
Tipičan primjer <span> kontejnera je formatiranje nekolicine riječi u tekstu
izvor:

26. oznaka div
Element <div> najčešće služi za obuhvaćanje više blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedničko formatiranje
Primjer: uređivanje koda (font je jednak za sve dijelove, ali boju i uvlačenje možemo urediti span elementima)
izvor:

27. Kako povezati CSS s HTML dokumentom?
povezivanjem na vanjski dokument
uvoženjem vanjskog dokumenta
umetanjem u zaglavlje dokumenta
dodavanjem u liniji atributom style
izvor:

28. Povezivanjem na vanjski dokument
<head> <link rel="stylesheet"       type="text/css" href="stil.css"> </head>
izvor:

29. uvoženjem vanjskog dokumenta
izvor:

30. umetanjem u zaglavlje dokumenta
u oznaci <style>
uz uporabu atributa type=”text/css”
izvor:

31. primjer
<head> ... <style type="text/css"> body { font-family: Verdana, Helvetica, sans-serif; font-size:12px; color: #72006D } </style> ... </head>
izvor:

32. zadatak Očistite HTML kod stranice index.html od svih stilova
Dodajte kod iz prethodnog primjera
Spremite promjene i provjerite rezultat
Očistite HTML kod na svim stranicama
izvor:

33. Zadatak: Napravite css kod koji će:
Pozadinu vaše stranice pobojati u boju “silver”
Linkove prikazati u boji “olive”
Odlomke poravnati obostrano
Font u odlomcima i tablicama neka bude Verdana ili Tahoma veličine 10 pt
Font naslova (h1) i podnaslova (h2): Tahoma boje “maroon”, veličine 14 pt, tekst naslova centriran
Tablice neka imaju tanak okvir u boji “gray”
izvor:

34. dodavanjem u liniji atributom style
Stilovi za pojedinačnu HTML oznaku u dokumentu mogu biti definirani atributom style
Ovaj atribut može se definirati za gotovo sve HTML oznake - izuzetak su oznake <script>, <basefont> i još neke <p style="font-size:10px">...tekst...</p>
Ovako definiran stil vrijedi samo za oznaku unutar koje je definiran
izvor:

35. CSS Svojstva Svojstva se po svom djelovanju mogu grupirati u cjeline
svojstva fonta
svojstva teksta
svojstva boja i pozadina
svojstva CSS kutije
svojstva popisa
pozicioniranje (smještanje).
izvor:

36. Svojstva fonta font-family
CSS definira pet generičkih porodica fontova
serif,
sans-serif,
cursive,
monospace i
fantasy.
izvor:

37. Svojstva fonta font-weight definira debljinu znakova
normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900
Bolder, lighter i brojčane definicije debljine fonta nisu sigurne za korištenje jer ih preglednici različito prikazuju
izvor:

38. Svojstva fonta font-size Definira veličinu fonta
Može poprimiti bilo koju definiranu vrijednost veličine (12px, 10pt, 2em...) ili neku od ključnih riječi (xx-small, x-small, small, medium, large, x-large, xx-large)
Budući da se svojstvo nasljeđuje, možemo pisati sljedeće: body {   font-size:10pt; } p {   font-size:150%; }
izvor:

39. Svojstva fonta font-style
Sugerira pregledniku da prikaže tekst kao normal ili kao italic.
Postoji još i vrijednost oblique, ali nju preglednici prikazuju isto kao italic.
izvor:

40. Svojstva fonta font-variant
Može poprimiti vrijednosti normal ili small- caps. Korištenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima različitih veličina
izvor:

41. Svojstva fonta Skraćeni selektor (font)
p {   font:italic small-caps 12px Verdana,         Helvetica, sans-serif; }
izvor:

42. Svojstva teksta definiraju razmještaj teksta u dokumentu
letter-spacing
definira razmak između pojedinih znakova u tekstu.
line-height
Definira razmak između dvije crte teksta
text-decoration
Opisuje dekoracije koje se dodaju tekstu
vrijednosti: none, underline, overline, line- through i blink
često se koristi kod definiranja efekata na linkovima
izvor:

43. text-transform Pretvara slova iz koda u velika ili mala
Moguće vrijednosti su
Capitalize - postavlja početno slovo u svakoj riječi u veliko slovo),
Uppercase - postavlja sva slova u velika
Lowercase - postavlja sva slova u mala, bez obzira na izvorno slovo u kodu.
izvor:

44. text-align text-indent Vodoravno poravnanje teksta
moguće vrijednosti su: left, right, center i justify
text-indent
Određuje veličinu uvlake za prvi redak
izvor:

45. Svojstva boja i pozadina
Color
Postavlja boju teksta u zadanom elementu
background-color
Definira boju pozadine za zadani element
background-image
Postavlja pozadinsku sliku u element
izvor:

46. background-attachment
background-repeat
Ponavljanje pozadinske slike
Može poprimiti sljedeće vrijednosti:
repeat - ponavlja sliku;
no-repeat - ne ponavlja sliku;
repeat-x - ponavlja sliku po vodoravnoj osi;
repeat-y - ponavlja sliku po okomitoj osi.
background-attachment
definira pomiče li se pozadinska slika s elementom ili ne
Može poprimiti vrijednost
scroll - pomiče se, ili
fixed - ne pomiče se.
izvor:

47. background-position
Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta.
Background-position je svojstvo koje omogućava postavljanje početnog položaja od kojeg će se postaviti slika.
Može poprimiti vrijednosti
top, center, bottom, right, center, left ili postotke, odnosno udaljenost od gornjeg lijevog kuta.
izvor:

48. Skraćeno svojstvo background
Moguće je navesti sva navedena svojstva bez obzira na redoslijed navođenja: body {   background:url("css.gif") no-repeat fixed; }
izvor:

49. Definiranje popisa linkova
Popisi se zbog svojih CSS svojstava redovito koriste za kreiranje izbornika
<td valign="top" width="22%">
<ul>
<li><a href="index.html">Početna</a></li>
<li><a href="selektori.html">Selektori</a></li>
<li><a href="svojstva.html">Svojstva</a></li>
<li><a href="povezivanje.html">Povezivanje s HTML dokumentom</a></li>
</ul>
izvor:

50. Zadatak Unutar izbornika selektori dodajte podizbornike:
Jednostavni selektori
Klasni selektori
ID selektori
Kontekstni selektori
Pseudoklase
Napravite dokumente: jednostavni.html, klasni.html, id.html, kontekstni.html, pseudoklase.html
izvor:

51. Rješenje:
<li><a href="selektori.html">Selektori</a> <ul> <li> <a href="jednostavni.html">Jednostavni selektori</a> </li> <a href="klasni.html">Klasni selektori</a> <a href="id.html">ID selektori </a> <a href="kontekstni.html">kontekstni selektori</a> <a href="pseudoklase.html"> Pseudoklase </a> </ul>
izvor:

52. Formatiranje popisa linkova
Unutar CSS dokumenta
Jednostavnim i kontekstnim selektorima
Na oba popisa postavljamo sljedeća svojstva:
display:block - prikaz linkova jedan ispod drugog
text-decoration - skidamo podcrtane linkove
margin - marginom razdvajamo linkove
padding - udaljavamo linkove
width - definira širinu linka.
izvor:

53. ul, li { list-style:none; /. skida grafičku oznaku
ul, li { list-style:none; /* skida grafičku oznaku */ margin:0px; padding: 0px; } ul li a, ul li a:visited {/*izbornik*/ display:block; text-decoration:none; margin:1px; padding:2px 0px 2px 5px; width:180px; ul ul li a, ul ul li a:visited {/*podizbornik*/ margin:1px 1px 1px 15px; width:150px;
izvor:

54. Dodavanje boje i ukrasa
popis obojiti proizvoljnom bojom
znakove podebljati
kao ukras i podlogu za dinamički efekt koristit ćemo lijevu granicu linka
debljine od 6 piksela za linkove glavnog izbornika
4 piksela za linkove podizbornika
definirati liniju (vrijednost solid)
postaviti joj boju koju smo dodijelili slovima.
izvor:

55. primjer color: #483D8B; border-left: 6px solid #483D8B;
izvor:

56. Dodavanje dinamičkog efekta
Dinamičke efekte postižemo dodavanjem pseudoklasa u stil
Upotrijebit ćemo pseudoklasu hover, a mijenjat ćemo boju lijeve granice elementa.
Izbornik:
ul li a:hover {
text-decoration: none;
margin: 1px;
border-left: 6px solid #6898EE; }
izvor:

57. text-decoration: none; margin: 1px 0px 0px 10px;
Podizbornik:
ul ul li a:hover {
text-decoration: none;
margin: 1px 0px 0px 10px;
border-left: 4px solid #7B68EE; }
izvor:

58. Horizontalni izbornici
#horizontalni li {   display:inline; /*postavlja popis u redak*/ }
izvor: