Стилови

1. Стилови • Стил је скуп визуелних карактеристика који се може применити на HTML код да би се променио његов изглед. • Обрасци стилова омогућавају да се промени изглед постојећих и уведу нови стилови. • Први читач који је имплементирао обрасце стилова био је Microsoft Internet Explorer.

2. Стилове у HTML је увео WWW конзорцијум. • Стил се може доделити на три начина: • помоћу атрибута STYLEелемента на који се примењује стил • помоћу елемента STYLE • коришћењем екстерне листе стилова. • Стил се састоји од групе својстава којима се додељују одређене вредности облика особина : вредност

3. Атрибут STYLEје добро решење уколико је потребно доделити стилове да би се променио подразумевани приказ само неколико елемената. • Атрибут се односи само на елемент коме је додат (и на све елементе које он садржи), али не и на остале елементе истог типа ван овог конкретног елемента. <P style=“color:red;font-size:30px;”> <H1 style=“color:yellow;font-family:Arial; font-size:10pt;”>

4. Елемент STYLEомогућава да се одређени стил повеже са неким типом елемената. • Најчешће се примењује за дефинисање стилова који ће се примењивати у целом HTML документу. • Елемент има почетни и завршни маркер. • Стил се дефинише тако што прво наведемо елемент на који примењујемо стил и затим у великим заградама наведемо пар особина:вредност.

5. P {color:black;font-size:10pt;} • Листе стилова се могу правити као екстерни документи. • Да би се стилови употребили у HTML, морају се повезати са документом. • То се ради елементом LINK <LINK type=“text/css” rel=“stylesheet” href=“stil.css”> • Таква листа стилова изгледа као тело елемента STYLE, али без маркера елемента STYLE.

6. P { font-family:”Helvetica”; font-weight:bold; color:white } LI { border:inset 3px gray }

7. Под каскадама се подразумева “падање”, односно силазак са једног нивоа на други. • Кад год се један стил примени на неки елемент, многа својства се каскадно преносе и на сву децу унутар тог елемента.

8. Каскадне листе стилова користе модел оквира. • Сваки елемент има свој оквир. • Оквир се састоји од дела са садржајем, презног простора који окружује тај део, спољне ивице тог празног простора и маргина. • Постоје два типа оквира: • редни елементи • блок елементи.

9. Редни елементи Блок елементи • Редни елемент ће бити смештен у најмањи могући простор, непосредно до претходног редног елемента. • Блок елемент ће попунити сав расположиви простор у одговарајућем смеру тока.

10. Приказивање и сакривање елемената остварује се својством display. • Својство може имати следеће вредности: • inline • block • none • list-item • compact • marker • table

11. Ако је вредност inline, тада садржај заузима најмањи могући простор, при чему наредни елементи, аутоматски започињу одмах иза наредних елемената у истом реду. • Ако је вредност block,тада садржај попуњава расположиви простор све до његових граница, а увек започиње на месту почетка нове области тока. • Вредност noneназначава да се садржај не приказује на излазном медију.

12. Ако је вредности list-item, тада се ставка третира као елемент листе. • Ако је вредност compact, тада се садржај приказује у оквиру за приказ, али заузима најмањи могући простор. • Ако је вредност marker, тада се садржај третира као симбол за набрајање. • Ако је вредност table, тада се садржај приказује као у табели.

13. За позиционирање елемената користи се својство position. • Ако је вредност absolute, тада је позиционирање апсолутно. • Ако је вредност relative, тада је позиционирање релативно. • Својство leftсе користи за дефинисање растојања за које елемент треба да буде померен од леве ивице родитељског елемента.

14. Својство rightсе користи за дефинисање растојања за које елемент треба да буде померен од десне ивице родитељског елемента. • Својство topсе користи за дефинисање растојања за које елемент треба да буде померен од горње ивице родитељског елемента. • Својство bottomсе користи за дефинисање растојања за које елемент треба да буде померен од доње ивице родитељског елемента.

15. Релативне мере су em, exи px. • Апсолутне мере су in, cm, mm, ptи pc. • Em је ширина релевантног фонта, обично ширина малог слова м. • Ex је висина малог слова x релевантног фонта. • Px (пиксел) је висина основног елемента приказа на екрану рачунара. • In (инч) је 2,54 cm. • Pt је 1/72 инча. • Pc (пајк) je 1/6 инча.

16. #bg { position:absolute; top:250px; left:2% } h2, h3 { position:relative; left:-25px }

17. Својство background-colorмења позадинску боју одређеног елемента. • Може имати вредност transparentи тада се допушта да се провиди позадина родитељског елемента. • Вредност својства може бити и логичко име боје или хексадецимална комбинација. • Својство colorмења боју елемента. • Својство cursorмења облик курсора.

19. Можете направити ивицу око елемента и онда дефинисати њену дебљину, стил и боју. • Својство border-style дефинише стил ивице.

20. Својство border-widthдефинише ширину ивице. • Својство border-colorдефинише боју ивице. • Својство list-style-typeдефинише тип ознаке која се користи за означавање елемената листе. • Могуће вредности су: • disc• • circle◦ • square▪

21. decimal (1, 2, 3, …) • upper-alpha (A, B, C, …) • lower-alpha (a, b, c, …) • upper-roman (I, II, III, IV, …) • lower-roman (i, ii, iii, iv, …) • none(приказује се листа без ознака).

22. Могу се правити сопствене ознаке за стилове. • То омогућава својство list-style-image. • Синтакса је list-style-image:url(adresa/slika.gif) • Својство list-style-imageима већи приоритет у односу на својство list-style-type. • Може се убацити један тип листа у други.

23. За стилизовање спољне листе користи се toplevel li {stil}, где је toplevelтип спољне листе (нпр. оl, ul, dt), а stilсу стилови који треба да се примене. • За листу другог нивоа користи се toplevel drugiNivo li {stil}, где је drugiNivoтип листе за листу другог нивоа. • За листу трећег нивоа користи се toplevel drugiNivo treciNivo li {stil}, где је treciNivoтип листе која ће се користити за трећу угнеждену листу.

25. Својство font-familyодређује који ће се фонт користити за приказ текста унутар текста. font-family:”Times New Roman”,Symbol • Својство font-style поставља стил фонта. • Могуће вредности су: • normal(не примењује се стил) • italic H1 {font-style:italic;} H2 {font-style:normal;}

26. Својство font-weightодређује дебљину фонта. • Могуће вредности су: • normal(исто што и 400) • bold(исто што и 700) • bolder (исто што и 900) • lighter (исто што и 100) • 100, 200, 300, 400, 500, 600, 700, 800, 900 • Својство font-sizeодређује величину фонта.

27. Могу се користити мерне јединице: pt, px, cm, in. • Могу се користити релативни термини: largerи smaller. • Могу се користити и проценти. • Има још много својстава. Само смо навели нека основна својства.

28. Подстилови • Подстилови омогућавају да један исти елемент у различитим деловима текста изгледа различито. • Постоје подстилови везани за HTML елементе и подстилови који нису везани за HTML елементе. • Подстил везан за HTML елемент се дефинише на следећи начин:

29. imeElementa.stil1 {listaStilova;} imeElementa.stil2 {listaStilova;} • Употреба стила остварује се атрибутом CLASS. <imeElementa class=“stil1”>Prvi podstil</imeElementa> <imeElementa class=“stil2”>Drugi podstil</imeElementa> • Подстил који није везан за HTML елементе омогућава креирање сопствених стилова.

30. Подстил се дефинише на следећи начин #stil {listaStilova;} • Име се референцира унутар HTML елемента атрибутом ID. <imeElementa id=“stil”>Stil</imeElementa> • Могуће је дефинисати стил који ће важити за угнеждене HTML елементе. • Треба навести елемент који је угнежден и на кога желимо да применимо стил, док су испред њега елементи или елемент унутар којих је угнежден, одвојени празним местом.

32. PRIMER HTML DOKUMENTA BEZ STILA

33. IZGLED HTML DOKUMENTA

34. PRIMENOM STILOVA DOKUMENTA DOBIJA SASVIM DRUGAČIJI IZGLED

36. Jedinice mere • Svaka uneta numerička vrednost može se preciznije odrediti jedinicom mere • Dužina: • relativne vrednosti • % – procentualna vrednost, • px – pikseli (pixel), tipično 1/96 inča, odn. 0,26 mm • ex – u odnosu na visinu slova ‘x’ u tekućem fontu, • em – u odnosu na širinu slova ‘m’ u tekućem fontu • Apsolutne vrednosti • cm – centimetar • in – inč • mm – milimetar • pt – tačke (point) – za veličinu fonta, veličine 1/72 inča • pc – pika (pica) je 12 tačaka (12 points) • Boja: • tekstualno (red, black, blue,...) • numerički, RGB vrednosti (#0F0, #FF00FF, rgb(0, 255, 0), rgb(2%, 10%, 2%)) • Ne sme da postoji razmak između vrednosti i jednice mere! • margin-left: 20px

37. Pikseli • Piksel je najmanja tačka na ekranu • Zavisi od rezolucije ekrana • nije fiksna jedinica mere • od 96 piksela po inču, do 120 piksela po inču (Windows Large Fonts), na ekranu • Različiti operativni sistemi različito tretiraju rezoluciju ekrana: • MAC (do OS-X): 72 piksela po inču • Windows: 96 piksela po inču

38. Svojstva teksta • word-spacing – razmak između reči (normal ili konkretna vrednost), • letter-spacing – razmak između slova (normal ili konkretna vrednost), • white-space – kako da prikazuje više uzastopnih razmaka (normal, pre), • text-transform – transformacija teksta (none, capitalize (prvo slovo veliko), uppercase, lowercase), • text-decoration – dekoracija teksta (none, underline, overline, line-through, blink), • color – boja teksta, • text-shadow – senka iza teksta

39. Poravnanje teksta • vertical-align (top, bottom, middle, ...), • text-align – poravnanje teksta (left, right, center, justify), • text-indent – koliko je prvi red paragrafa uvučen, • line-height – vertikalna udaljenost između dve linije

40. Fontovi • font-family – vrsta fonta; • parametar je ime fonta ili lista imena odvojenih zarezom (alternative); • ime fonta može biti konkretno ili ime familije; • ime familije može da bude generičko (serif, sans-serif, cursive, fantasy, monotype), • font-style – stil (normal, italic, oblique), • font-size – veličina fonta (apsolutna vrednost (xx-small, x-small, small, large, x-large, xx-large), relativna vrednost (smaller, larger), vrednost, procenat), • font-size-adjust – odnos visine malog slova 'x' i visine fonta • što je veći broj, font je pogodniji za male veličine slova • font-weight – podebljanje fonta (normal, bold, bolder, lighter ili vrednost od 100 do 900), • font-variant – način ispisa malih slova (normal, small-caps (mala slova su slična velikim, samo je veličina manja ), • font-stretch – skuplja ili razvlači font (normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded), • font – objedinjeni unos osobina fonta (stil variant weight size family)

41. Okvir • border-color – boja ivice, • border-style – stil linije ivice (none, dotted, dashed,solid double, groove, ridge, inset, outset), • border-width – definiše debljinu okvira oko elementa, • border-left-color – boja levog dela okvira, • border-left-style – stil levog dela okvira, • border-left-width – širina levog dela okvira, • border-left – objedinjeni unos osobina leve ivice (boja stil širina), • border-right-color – boja desnog dela okvira, • border-right-style – stil desnog dela okvira, • border-right-width – širina desnog dela okvira, • border-right – objedinjeni unos osobina desne ivice (boja stil širina)

42. Okvir • border-bottom-color – boja donjeg dela okvira, • border-bottom-style – stil donjeg dela okvira, • border-bottom-width – širina donjeg dela okvira, • border-bottom – objedinjeni unos osobina donje ivice (boja stil širina), • border-top-color – boja gornjeg dela okvira, • border-top-style – stil gornjeg dela okvira, • border-top-width – širina gornjeg dela okvira, • border-top – objedinjeni unos osobina gornje ivice (boja stil širina), • border – objedinjeni unos osobina za ceo okvir (boja stil širina)

43. Padding • Veličina prostora između ivice i sadržaja elementa • padding-left, padding-right, padding-top, padding-bottom – podešava udaljenost sadržaja od pojedinačne ivice (broj ili procenat), • padding – objedinjeni unos osobina za ceo okvir (gore dole levo desno)

44. Outline • Linija oko elementa, izvan okvira (bordera), • outline-color – boja outline linije, • outline-style – stil outline linije(none, dotted, dashed,solid double, groove, ridge, inset, outset), • outline-width – širina outline linije (thin, medium, thick, broj), • outline – objedinjeni unos osobina (boja stil širina)

45. Margine • margin-top, margin-bottom, margin-left,margin-right – podešavanja margina elementa (auto, konkretna vrednost ili procenat), • margin – objedinjeni unos osobina (gornja donja leva desna)

46. Podešavanje stilova liste • list-style-type – definiše stil oznake za nabrajanje (disc, circle, square za neuređene liste, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, za uređene liste), • list-style-image – url do lokacije slike koja se koristi za stavke liste (isključuje list-style-type atribut), • list-style-position – pozicija stavke u odnosu na tekst (inside – oznaka za nabrajanje i donji redovi teksta su jednako poravnati, outside – svi redovi stavke su desno od oznake za nabrajanje), • list-style – objedinjuje sva prethodna podešavanja (tip pozicija slika), • marker-offset – udaljenost markera od teksta

47. Tabele • border-collapse – da li postoji samo jedan okvir oko tabele (collapse) ili svaka ćelija ima svoj okvir (detached), • border-spacing – udaljenost između ćelija; može da bude jedna vrednost ili dve (horizontalna i vertikalna), • caption-side – pozicija naslova tabele (top, bottom, left, right), • empty-cells – prikazuje (show) ili skriva (hide) prazne ćelije, • table-layout – širina ćelija; automatski se raširi da prikaže ceo sadržaj (auto) ili fiksne širine (fixed)

48. Definisanje boja i slika u pozadini • background-color – boja pozadine elementa • background-image – slika koja će biti u pozadini elementa (url(url-do-slike)) • background-repeat – da li se pozadinska slika ponavlja ili ne (repeat-x, repeat-y, no-repeat) • background-attachment – da li da se pozadinska slika pomera sa sadržajem elementa (scroll, fixed), • background-position – podešava inicijalnu poziciju pozadinske slike (procentualne, fiksne vrednosti, top, bottom, middle); navodi se prvo x, pa y pozicija, • background – sva svojstva odjednom (color image repeat attachment position)

49. Pozicija elementa • float – određuje sa koje strane će se tekst prelamati oko elementa (none, left, right) • clear – navodi se sa koje strane u odnosu na element su zabranjeni floating elementi (none, left, right, both)

50. Prikaz elementa • visibility – da li je element vidljiv ili ne (visible, hidden, collapse (za tabele, sakriva element)) • display – način prikaza elementa • none • block – novi blok • inline – novi blok unutar tekuće linije • list-item – za liste • table – tabela sa novim redom • inline-table – tabela unutar paragrafa • table-row – kao vrsta tabele • table-column – kao kolona tabele • table-cell – kao ćelija tabele • block prikaz napravi nov red i prikaže element kao novi paragraf • inline prikaz prikaže element unutar postojećeg paragrafa