Korišćeni elementi: h1, h2, h3, h4, h5, h6 obeležavanje naslova p obeležavanje pasusa blockquote veći citati BLOK ELEMENTI LINIJSKI ELEMENTI pre preformatiranje teksta tako da se zadržavaju sve beline div grupisanje elemenata blok i linijskog tipa q manji citati br prelaz u novi red i prikaz teksta iskošenim slovima pogledati CSS svojstvo font style b prikaz teksta podebljanim slovima pogledati CSS svojstvo font weight u prikaz teksta koji je podvučen pogledati CSS svojstvo text decoration abbr obeležavanje skraćenica npr. W3C World Wide Web Consortium acronym obeležavanje skraćenica koje su nastale od prvih slova reči npr. CSS Cascade Style Sheets span grupisanje elemenata linijskog tip (non breaking space) kontrola horizontalnog rastojanja u tekstu
Korišćena CSS svojstva: PRIKAZ TEKSTA: color boja slova mogući formati zadavanja: ime boje: color: red dekadni tripleti: color: rgb (125, 11, 238) heksadekadni tripleti: color: #8A904F color: yellow; font size veličina slova moguće jedinice mere: px, pt, cm, mm, em, ex, %,... font size: 2em; font family vrsta slova tipa Arial, Times New Roman, Tahoma... generičke familije: sans serif, serif, monospace, cursive, fantasy ( više na: http://www.w3.org/style/examples/007/fonts ) sans serif: Arial, Verdana serif: Times New Roman, Georgia monospace: Courier, Courier New, Andele Mono cursive: Comic Sans MS fantasy: Impact font family: Times New Roman, Georgia, serif; font weight debljina slova moguće vrednosti su brojevi 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 font weight: bold;
font style iskošenost teksta moguće vrednosti su italic, normal i oblique font style: italic; text align poravnanje teksta moguće vrednosti su: left, center, right, justify text align: center; letter spacing rastojanje između slova teksta letter spacing: 2px; word spacing rastojanje između reči teksta word spacing: 0.5in; text transform transformisanje teksta u mala ili velika slova ili u format u kome svaka reč počinje velikim slovom (podesno za naslove) moguće vrednosti su: lowercase, uppercase, capitalize text transform: uppercase; text indent uvlačenje prve linije teksta text indent: 20px; text decoration dekorisanje teksta moguće vrednosti su: underline, overline, blink, line through text decoration: underline;
SVOJSTVA KOJA SE ODNOSE NA PODEŠAVANJE POZADINE: background color boja pozadine mogući formati zadavanja: ime boje: color: red dekadni tripleti: color: rgb (125, 11, 238) heksadekadni tripleti: color: #8A904F background color: #21A83F; background image slika u pozadini elementa background image: url ('slike/slika.jpg'); background repeat kontrola ponavljanja slike u pozadini moguće vrednosti su: no repeat, repeat, repeat x, repeat y background image: url ('slike/slika.jpg'); background repeat: repeat x; background position pozicioniranje slike u pozadini Moguće vrednosti su (iz skripte prof. Filipa Marića): procenat vrednost od x% poravnava tačku koja se nalazi na x% širine (dužine) slike sa tačkom koja se nalazi na x% širine (dužine) elementa. dužina gornje levo teme slike se postavlja na tačku pomerenu za navedene vrednosti u odnosu na gornje levo teme elementa top, bottom ekvivalentno 0%, odnosno 100% za vertikalnu poziciju left, right ekvivalentno 0%, odnosno 100% za horizontalnu poziciju. center ekvivalentno 50% za horizontalnu poziciju (ako nije navedena) ili za vertikalnu poziciju (ako je horizontalna pozicija navedena) background image: url ('slike/slika.jpg'); background position: 5px 10px; background attachment ukoliko je slika postavljena kao pozadina, prilikom pomeranja sadržaja moguće je da slika bude statična ili da se pomera zajedno sa sadržajem. Ovo svojstvo kontroliše ovu vrstu ponašanja. Moguće vrednosti su fixed i scroll. background image: url ('slike/slika.jpg'); background attachment: scroll;
ŠIRINA I VISINA ELEMENATA Zadaju se na nivou elemenata blok tipa ili na nivou elemenata linijskog tipa kao što su img, object, textarea, select... (ove linijske elemente zovemo zamenjivim en. replaced jer ih pregledači veba zamenjuju odgovarajućim sadržajem) height visina elementa width širina elementa height: 400px; width: 80%; overflow ukoliko sadržaj prelazi izvan okvira elementa, svojstvo overflow kontroliše njegov prikaz. Moguće vrednosti su: visible nema odbacivanja sadržaja, vidi se da prelazi preko okvira hidden ono što se nalazi izvan okvira elementa se odbacuje (nije vidljivo) scroll pojavljuju se pomerači koji omogućavaju prikaz sadržaja izvan okvira auto ako sadržaj prevazilazi okvir, pojaviće se pomerači, a ukoliko sadržaj ne prelazi okvir, pomerači neće biti prikazani height: 400px; width: 80%; overflow: scroll; CSS 3 definiše svojstva overflow x i overflow y kojima se pojedinačno kontrolišu horizontalna i vertikalna ponašanja.
MARGINE, UNUTRAŠNJE MARGINE I OKVIRI margin top, margin right, margin bottom, margin left, margin svojstva kojima se zadaju pojedinačne margine ili sve margine odjednom margin top: 10px; margin bottom: 5px; margin: 10% 5% ; /* gronja/donja leva/desna margina */ Voditi računa o spajanju margina (tzv. margin collapse svojstvo). padding top, padding right, padding bottom, padding left, padding svojstva kojima se zadaju pojedinačne unutrašnje margine ili sve margine odjednom padding left: 20px; padding right:40px; padding: 5px; /* sve unutrasnje margine su po 5px */ border top width, border right width, border bottom width, border left width, border width svojstva kojima se zadaju debljine pojedinačnih ivica okvira ili svih ivica odjednom border bottom width: 4px; border top width: 4px; border left width: 0px;
border right width: 0px; border width: 4px 0px; /* gornja/donja leva/desna ivica okvira*/ border top color, border right color, border bottom color, border left color, border color svojstva kojim se zadaje boja pojedinačnih ivica okvira ili svih ivica odjednom border top color: green border right color: blue; border bottom color: red; border left color: yellow border color: green blue red yellow; /* ivice se obilaze u smeru kazaljke na satu gornja desna donja leva */ border top style, border right style, border bottom style, border left style border style svojstva kojim se opisuje stil pojedinačnih ivica okvira ili svih ivica odjednom moguće vrednosti su: solid, dotted, dashed, double, groove, ridge, inset, outset border top style: dotted; border right style: solid; border bottom style:dotted; border left style: double; border style: dashed solid double; /* gornja leva/desna donja ivica */
border top, border right, border bottom, border left, border svojstva kojim se podešava više parametara prikaza okvira odjednom redosled zadavanja je: width style color border top: 1px solid red; border bottom: 3px dashed gray; border: 2px dotted blue; O JEDINICAMA MERE Neke od predloženih jedinica mere: em: em se odnosi na veličinu slova tekućeg elementa font size:20px; width: 10em; ukazuje da širina pasusa treba da bude 10 20px=200px ukoliko veličina slova nije naglašena u tekućem elementu, posmatra se veličina slova roditeljskog elementa ili podrazumevana veličina slova pregledača ukoliko svojstvo font size nije definisano ni za jedan element u hijerarhiji iznad ex: visina slova 'x' u tekućoj familiji slova in: inč 1in = 2.54 cm cm: centimetar mm: milimetar pt: point 1pt = 1/72 in pc: picas 1pc = 12pt px: piksel 1px = 0.75pt %: procentualno
O BOJAMA Boja slova ili boja pozadine zadaju se u RGB (Red Green Blue) modelu boja na jedan od načina: 1. imenovanjem boje text { color: red; block {background color: orange; 2. zadavanjem heksadnih tripleta text { color: #FF0000; block { background color: #7A19F3; 3. zadavanjem dekadnih tripleta text { color: rgb (234, 43, 6); block { background color: rgb (88, 123, 59); CSS 3 nudi mogućnost korišćenja HSB (Hue Saturation Brightness) modela boja