Download - Css
![Page 1: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/1.jpg)
Daniel Rakijašid
Gimnazija M.A.Reljkovida Vinkovci
CSS
Cascading Style Sheets RADioNICA
VELIKA, 5. srpnja 2010.
![Page 2: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/2.jpg)
NEDOSTACI HTML-a
• Nekompatibilnost preglednika
• Različiti standardi
• Složenost koda opteredenog oznakama za prikaz podataka
![Page 3: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/3.jpg)
HTML KAO PITANJE
• Kako prilagoditi izgled stranice da ona bude jednakog prikaza u svim preglednicima?
• Kako oblikovati 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?
![Page 4: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/4.jpg)
CSS KAO ODGOVOR
• Prva specifikacija CSS-a - 1994 (Håkon Wium Lee i Bert Bos)
![Page 5: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/5.jpg)
PREDNOSTI CSS-a
• Odvajanje prezentacije podataka i dizajna od
same strukture podataka. Dizajneri su
neovisni o kreatorima HTML koda.
• HTML kôd postaje neusporedivo čitkiji i
manji
• Moguće je jednostavnom promjenom
nekoliko parametara, promijeniti izgled
tisućama stranica.
• Otpočetka je standardiziran pod okriljem W3
konzorcija
• CSS je donio čitav niz načina za uređivanje
prikaza podataka koji do tada nisu postojali u
samom HTML-u
![Page 6: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/6.jpg)
PRIMJERI
• Primjer lošeg HTML-a:
– http://www.angelfire.com/super/badwebs/
• Primjeri CSS-a:
– http://www.csszengarden.com/
– http://cssnature.org/
– http://www.freecsstemplates.org/
![Page 7: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/7.jpg)
Alati za izradu CSS-a
• Open source:
– Top Style Lite
– Notepad++
• Komercijalni:
– Microsoft Expression Web
– Macromedia Dreamweaver
![Page 8: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/8.jpg)
MJERNE JEDINICE
![Page 10: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/10.jpg)
DUŽINE
• Point [pt]
• em [em]
• Piksel [px]
![Page 11: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/11.jpg)
ELEMENTI CSS-A
![Page 12: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/12.jpg)
Primjer
![Page 13: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/13.jpg)
Primjer
![Page 14: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/14.jpg)
Od čega se sastoji CSS kod?
1. selektori - p, .stil - identificiraju pojedine elemente na HTML stranici;
2. svojstva - color, fontsize... - ključne riječi za opis pojedinog elementa stranice;
3. vrijednosti - #CC0000, 24px... - vrijednost koju može poprimiti pojedino svojstvo;
4. komentari - tekst napisan između znakova /* i */.
![Page 15: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/15.jpg)
VJEŽBA – što točno css radi html-u?
<h1>Lorem ipsum</h1> <p>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 ved stotinama godina koristi za testiranje ispisa i punjenje prostora tekstom</p>
<p class="citat">" Lorem ipsum dolor... </p
![Page 16: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/16.jpg)
VJEŽBA – što točno css radi html-u?
h1 { font-family:Verdana,Helvetica,sans-serif; font-weight:bold; 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; }
![Page 17: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/17.jpg)
VJEŽBA – što točno css radi html-u?
![Page 18: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/18.jpg)
KAKO POVEZATI CSS S HTML DOKUMENTOM?
![Page 19: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/19.jpg)
4 načina spajanja
1. Povezivanje s vanjskim css dokumentom
2. uvoženjem vanjskog css dokumenta
3. umetanjem u zaglavlje dokumenta
4. dodavanjem u liniji atributom style.
![Page 20: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/20.jpg)
Povezivanje s vanjskim css dokumentom
• Povezivanje na vanjski dokument izvodi se oznakom <link> koja se dodaje u zaglavlje HTML dokumenta
• Uz oznaku <link> postoji više atributa od kojih su nam najbitnija sljedeća tri: 1. rel - definira odnos između oznake i
odredišnog dokumenta. Kad služi za povezivanje CSS-a, poprima vrijednost "stylesheet";
2. type - definira tip odredišnog dokumenta. U ovom slučaju tip dokumenta je "text/css";
3. href - URI dokumenta koji se povezuje.
![Page 21: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/21.jpg)
Primjer
<head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>
![Page 22: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/22.jpg)
Uvoz vanjskog css dokumenta
• Uvoženje CSS-a obavlja se putem ključne riječi @import. Ona se upisuje u zaglavlju dokumenta i to unutar <style> oznake.
![Page 23: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/23.jpg)
Umetanje u zaglavlje dokumenta
• CSS se može definirati u zaglavlju dokumenta u oznaci <style>, uz uporabu atributa type="text/css".
![Page 24: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/24.jpg)
Dodavanje unutar HTML koda
• Atribut style
• Vrijedi samo za oznaku unutar koje je definiran
![Page 25: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/25.jpg)
SELEKTORI
![Page 26: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/26.jpg)
Selektori
• Selektor identificira element ili dio HTML stranice na koji se primjenjuje navedeni stil.
• Opdi oblik: selektor {svojstvo:vrijednost} .
• Najčešde vrste selektora: 1. jednostavni selektori
2. klasni selektori
3. ID selektori
4. kontekstni selektori
5. pseudoklase
![Page 27: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/27.jpg)
Elementi HTML koda
![Page 28: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/28.jpg)
JEDNOSTAVNI SELEKTORI
• Odgovaraju imenu html oznake i primjenjuju se na svaku istovrsnu oznaku u dokumentu
![Page 29: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/29.jpg)
KLASNI SELEKTORI
• Definiranjem klasnih selektora izbjegavamo organičenost jednog css stila po jednom html elementu
![Page 30: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/30.jpg)
ID SELEKTORI
• Id selektor primjenjuje se kada se želi pridodati stil za jedan jedinstven element na stranici
![Page 31: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/31.jpg)
KONTEKSTNI SELEKTORI
• Odnose se na hijerarhijsku razinu elemenata HTML-a
![Page 32: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/32.jpg)
PSEUDOKLASE
![Page 33: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/33.jpg)
OBILJEŽJA SELEKTORA
![Page 34: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/34.jpg)
GRUPIRANJE
• Kada nekoliko selektora dijeli
određena svojstva, postoji
mogućnost njihova grupiranja u popis odvojen zarezima.
![Page 35: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/35.jpg)
NASLJEĐIVANJE
![Page 36: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/36.jpg)
KASKADE • Prioritet selektora:
1. stilovi pridijeljeni atributom style
2. id selektori
3. klasni selektori i pseudoklase
4. kontekstni, pa jednostavni selektori.
![Page 37: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/37.jpg)
VJEŽBA
![Page 38: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/38.jpg)
CSS MODEL KUTIJE
![Page 39: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/39.jpg)
![Page 40: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/40.jpg)
• p { margin-top:5px; margin-bottom:20px; padding-left:30px; }
![Page 41: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/41.jpg)
CSS ELEMENTI
![Page 42: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/42.jpg)
Tri grupe CSS elemenata
• blok elementi (eng. block level elements)
• linijski elementi (eng. inline elements)
• popisi (eng. lists).
![Page 43: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/43.jpg)
SPAN ELEMENT
• Element <span> je linijski generički kontejner.
• Smisao generičkih kontejnera je strukturirano obuhvadanje i formatiranje raznih elemenata koje mogu sadržavati.
• Za razliku od oznaka koje su predefinirane - <p>, <h1>, ... - definiranje zadade generičkih kontejnera prepušteno je dizajneru.
![Page 44: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/44.jpg)
Primjer
![Page 45: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/45.jpg)
DIV ELEMENT
• Element <div> je blok generički kontejner.
• Najčešde služi za obuhvadanje više blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedničko formatiranje.
• <div> elementi koriste se za pozicioniranje sadržaja html stranice (dizajn stranice)
![Page 46: Css](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556d0757d8b42ad34f8b4932/html5/thumbnails/46.jpg)
VJEŽBA