HTML stilovi Cascading Style Sheets (CSS) Multimediji Tehnološki fakultet Univerzitet u Banjoj Luci
Izgled HTML stranice Dosadašnji primjeri HTML dokumenata se renderuju (prikazuju, čitaju...) na podrazumijevani način Zavisi od čitača Ne izgleda posebno lijepo HTML 5 elementi imaju definisanu semantiku Određuju strukturu stranice Naslov, podnaslov, pasus, slika,... HTML 5 ne omogućava kontrolu prezentacije – izgleda stranice Fontovi, boje, veličine, prostorni raspored,...
HTML stilovi Prezentacija HTML dokumenta se definiše povezanom tehnologijom – Cascading Style Sheets (CSS) CSS opisuje kako se elementi prikazuju na ekranu, papiru, različitim uređajima, veličinama ekrana,... Kontrola izgleda, rasporeda, boje i veličine elemenata, fontova,... Sve definicije stilova se nalaze na jednom mjestu CSS omogućava konzistentnu prezentaciju svih stranica na velikom sajtu Jednostavno održavanje sajtova Primjer mogućnosti: http://www.w3schools.com/css/demo_default.htm
Načini dodavanja stilova Stilovi se HTML elementu mogu pridružiti na tri načina: Inline – korištenjem style atributa HTML elementa Pogodno za pridruživanje stila jednom HTML elementu Interni – korištenjem <style> elementa u HTML <head> sekciji Pogodno za pridruživanje stilova elementima jedne HTML strane Eksterni – korištenjem jednog ili više eksternih CSS fajlova Tekstualni fajlovi sa .css ekstenzijom Pogodno za pridruživanje stilova elementima na više strana U dokument se uključuju pomoću <link> elementa
Kaskada stilova Ako je za jedan element definisano više stilova oni se kaskadno kombinuju Prioritet: Stil naveden u HTML elementu Eksterni i interni stilovi (prema redoslijedu navođenja u head sekciji) Podrazumijevani stil čitača
Primjer korištenja stilova <!DOCTYPE html> <html> <head> <title>Inline CSS primjer</title> </head> <body style=“background-color: lightgray”> <h1 style=“background-clor: blue; color: white”>Ovo je podnaslov</h1> <p style=“color: green”>Ovo je paragraf.</p> </body> </html>
Još jedan primjer korištenja stilova <!DOCTYPE html> <html> <head> <style> body { background-color: lightgray } h1 { background-color: blue; color: white; } p { color: green } </style> <title>Interni CSS primjer</title> </head> <body> <h1>Ovo je podnaslov</h1> <p>Ovo je paragraf.</p> </body> </html>
Sintaksa CSS pravilo Opisuje kako će biti prikazan određeni HTML element selektor {osobina: vrijednost; osobina: vrijednost;} selektor bira HTML element na koji se odnosi pravilo Zagrade sadrže niz deklaracija odvojenih tačkom-zarezom Deklaracija se sastoji od osobine i vrijednosti odvojenih dvotačkom osobina je osobina elementa vrijednost je vrijednost koja se dodjeljuje osobini
CSS selektori Selektorima se bira HTML element na koji se primjenjuje stil Inline stilovi ne koriste selektore Odnose se samo na element u čijem style atributu su navedeni Postoji više tipova selektora Mi ćemo razmotriti samo tri: Selektor elementa Selektor identifikatora Selektor klase
Selektor elementa Selektor sadrži naziv elementa Npr. h1, h2, p,... Na sve elemente istog tipa će biti primjenjen zadati stil p { background-color: green; color: white; }
CSS za pojedine elemente Da bi se definisao poseban stil za određeni element koristi se id atribut elementa <p id=“p01”>Drugačiji paragraf</p> ... i definiše se poseban stil #p01 { color: blue; } Element sa određenim id atributom mora biti jedinstven Moguća je i varijanta (odnosi se na <p> element sa id=“p01”) p#p01 { color: blue; }
CSS za pojedine klase elemenata Da bi se definisao stil za određenu klasu elemenata koristi se atribut class <p class=“c01”>Paragraf posebne klase.</p> ... za koju se definiše stil .c01 { color: magenta; } Može postojati više elemenata sa istim class atributom Moguća je i varijanta (odnosi se na <p> element sa class=“c01”) p.p01 { color: blue; }
Grupisanje selektora Više selektora ima istu definiciju stila h1, h2, p { text-align: center; color: red; }
CSS boje Boja pozadine elementa se definiše osobinom background-color body { background-color: lightgray; } Boja teksta HTML elementa se definiše osobinom color p { color: green; } HTML i CSS podržavaju 140 standardnih imena boja http://www.w3schools.com/colors/colors_names.asp Postoje i drugi način da se specificira boja (više kasnije)
Stilovi fontova CSS osobina font-family definiše font za HTML element CSS osobina font-size definiše veličinu fonta HTML elementa CSS osobina font-style definiše oblik fonta: normal, italic ili oblique CSS osobina font-weight definiše da li će tekst biti bold ili normal CSS osobina font-variant definiše da li će tekst biti small-caps ili normal CSS osobina font-size definiše veličinu teksta u HTML elementu
Familije fontova Postoje dva tipa imena familija fontova Generička familija – grupa familija fontova koji izgledaju slično (npr. “serif” ili “monospace”) Familija fontova – određena familija fontova (kao “Times New Roman”) Korisno je navesti više naziva fontova i familija fontova za slučaj da željeni fontovi nisu na raspolaganju Na kraju liste staviti generičku familiju p { font-family: “Times New Roman”, Times, serif; } Od koristi može biti pregled često korištenih kombinacija fontova: http://www.w3schools.com/cssref/css_websafe_fonts.asp
Veličine Veličine u HTML-u mogu biti: Apsolutne Relativne Zadaje se željena veličina u pikselima Ne dozvoljava promjenu veličine teksta u čitaču Dobro kada je poznata veličina izlaza Relativne Veličina se zadaje relativno u odnosu na elemente iz okoline Korisnik može mijenjati veličinu teksta u čitaču
Podešavanje veličine teksta Koristi se osobina font-size Zadavanje veličine teksta u pikselima p { font-size: 14px; } Zadavanje veličine teksta u em jedinicama 1em je podrazumijevana veličina (odgovara 16px) Moguće je podešavati veličinu teksta u čitaču Preporučeni način za podešavanje veličine teksta p { font-size: 0.875em; } Zadavanje veličine teksta u procentima p { font-size: 87%;}
Osobina font Sve navedene osobine fonta se mogu istovremeno zadati jednom deklaracijom Koristi se osobina font font: bold 14px arial, sans-serif Ima isti efekat kao font-weight: bold; font-size: 14px; font-family: Arial, sans-serif Redoslijed osobina je: font-style font-variant font-weight font-size font-family
CSS box model CSS box model se odnosi na raspored elemenata na stranici Svaki HTML element se može smatrati boksom Boks se sastoji od: Sadržaja (content) - npr. tekst i slike Padding – transparentan prostor između sadržaja i okvira Okvir (border) Margina – transparentan prostor izvan okvira koji odvaja element od drugih elemenata
HTML element div Element div je blokovski element Često se koristi kao kontejner za druge HTML elemente Moguće je definisati dio stranice koji čini cjelinu i formatira se na određen način Blokovski element uvijek započinje novu liniju i zauzima sav raspoloživi prostor po širini <div style="background-color:black; color:white;"> <h2>Blok</h2> <p>Blokovski element uvijek započinje novu liniju i zauzima sav raspoloživi prostor po širini.</p> </div> HTML 5 definiše i druge kontejnerske elemente sa preciznijom semantikom: header, footer, nav, main, article, section,…
CSS box model Moguće je zadati dimenzije elementa pomoću CSS osobina width i height Odnose se samo na sadržaj elementa Ukupna širina je width + lijevi padding + desni padding + lijevi okvir + desni okvir + lijeva margina + desna margina Ukupna visina je height + gornji padding + donji padding + gornji okvir + donji okvir + gornja margina + donja margina
Okvir Osobina border omogućava definisanje stila, širine i boje okvira Postoje i posebne osobine border-style, border-width i border-color Moguće je i posebno podešavati dijelove okvira: border-top, border-bottom, border-left, border-right I njihove posebne osobine: border-top-style,...
Padding i margine Veličina margina se može podešavati pomoću osobine margin Ako osobina margin ima vrijednost auto element će biti centriran u raspoloživom prostoru Ili pojedinačnih osobina: margin-top, margin-bottom, margin-left, margin-right Veličina paddinga se može podešavati pomoću osobine padding Ili pojedinačnih osobina: padding-top, padding-bottom, padding-left, padding-right
Pozicioniranje elemenata Za pozicioniranje elemenata koristi se osobina position I osobine: left, right, top, bottom position:static – predefinisana, element je pozicioniran u normalnom toku stranice position: relative – element je pozicioniran relativno u odnosu na svoju normalnu poziciju position: fixed – element je pozicioniran relativno u odnosu na prozor i ne pomjera se u slučaju skrolovanja stranice position: absolute – element je pozicioniran relativno u odnosu na najbliži pozicioniran (position nije static) element koji ga sadrži Pozicionirani elementi se mogu međusobno preklapati
Layout stranice Osobina float se koristi da bi element bio pozicioniran uz lijevi ili desni rub stranice plivajući uz drugi element Može da se koristi da bi tekst tekao oko slike img { float: right; margin: 0 0 10px 10px; } Ali može da se koristi i sa drugim elementima Osobina clear se koristi da bi se spriječilo da drugi element pliva uz dati element sa zadate strane div { clear: left; } Ove osobine mogu da se koriste da bi se definisao raspored elemenata (layout) na stranici Sličan efekat se može postići i upotrebom display: inline-block;
Linkovi Izgled linkova se može podešavati CSS osobinama kao što su color, font, background,... Linkovima se mogu dodijeliti i stilovi u zavisnosti od stanja u kojem se nalaze a:link – normalan, neposjećen link a:visited – link koji je korisnik već posjetio a:hover – izgled linka kada je miš iznad njega a:active – izgled linka kada je kliknut Redoslijed navođenja je bitan i mora biti kao gore
Literatura za dalje istraživanje http://www.w3schools.com http://teaching-materials.org https://www.w3.org/standards/webdesign/htmlcss http://www.csszengarden.com/