Css

CSS

(eng. Cascading Style Sheets)

Nedostaci HTML-a:   

Nekompatibilnost preglednika Različiti standardi Složenost koda opterećenog oznakama za prikaz podataka

HTML kao pitanje:   

Kako prilagoditi izgled stranice da ona bude jednakog prikaza u svim web preglednicima? Kako formatirati 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?

CSS KAO ODGOVOR:  

Prva specifikacija CSS-a = 1994. (Håkon Wium Lee i Bert Bos) CSS (eng. Cascading Style Sheets), odnosno kaskadni stilovi, jednostavan su mehanizam za dodavanje stilova – fontova, boja itd. – web stranicama.

Prednosti CSS-a 1. Odvajanje prezentacije podataka i dizajna od same strukture podataka. Dizajneri su neovisni o kreatorima HTML koda. 2. HTML kod postaje neusporedivo čitkiji i manji 3. Moguće je jednostavnom promjenom nekoliko parametara, promijeniti izgled tisućama stranica. 4. Otpočetka je standardiziran pod okriljem W3 konzorcija 5. CSS je donio čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u samom HTML-u. PRIMJER: www.csszengarden.com Alati za izradu CSS-a  

Top Style Lite Notepad++

1

ELEMENTI CSS-a 1. Selektori ( p,.stil) – identificiraju pojedine elemente na HTML stranici, pomoću njih web preglednik zna koji će to element na stranici oblikovati prema uputama koje su dane u CSS-u, preko njih su povezani CSS i HTML kod; 2. Svojstva (color, fontsize, align…) – ključne riječi za opis pojedinog elementa stranice, imaju vrijednosti, one ovise o tome kakvo je svojstvo; 3. Vrijednosti (#CC0000,24px )– vrijednost koju može poprimiti pojedino svojstvo; 4. Komentari – tekst napisan između znakova /* i */ MJERNE JEDINICE  Boje: #RRGGBB  Dužine: o Point[pt] – tipografska jedinica koja dužinu od jednog inča definira sa 72 pointa. Uobičajena veličina. o Em [em] – relativna jedinica za definiranje veličine fonta. Po definiciji je ekvivalentra vrijednosti „font- size“ za dani element. Možemo je koristiti za neke relativne udaljenosti. o PIkseli [px] – približite li dovoljno pogled vašem zaslonu, primijetit ćete da je podijeljen u rešetkastu strukturu sastavljenu od malih kvadratića. Ti kvadratići se nazivaju pikseli. Što točno CSS radi u HTML-u? HTML kod: Lorem ipsum 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 već stotinama godina koristi za testiranje ispisa i punjenje prostora tekstom " Lorem ipsum dolor… CSS KOD: h1 { font-family:Verdana,Helvetica,sans-serif; font-weight:bold; 2

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; }

KAKO SE POVEZUJE CSS S HTML DOKUMENTOM?  Kako će web preglednik znati kojim će to CSS kodom oblikovati dokument.  Četiri su načina spajanja 1. Povezivanje s vanjskim CSS dokumentom – najčešći  Povezivanje na vanjski dokument izvodi se oznakom koja se dodaje u zaglavlje HTML dokumenta  Uz oznaku postoji više atributa od kojih su nam najbitnija sljedeća tri: o Rel – definira odnos između oznake i odredišnog dokumenta. Kad služi za povezivanje CSS-a, poprima vrijednost ''stylesheet''; o Type – definira tip odredišnpg dokumenta. U ovom slučaju tip dokumenta je ''text/css''; o Href – URI dokumenta koji se povezuje … … 2. Uvozom vanjskog CSS dokumenta a. Uvoz CSS-a obavlja se putem ključne riječi @import. Ona se upisuje u zaglavlju dokumenta i unutar oznake. … 3

… 3. Umetanjem u zaglavlje dokumenta a. css kod pišemo u zaglavlje html-a b. CSS se može definirati u zaglavlju dokumenta u oznaci