Download as PDF, PPTX
![DUŽINE
• Point [pt]
• em [em]
• Piksel [px]](https://image.slidesharecdn.com/css-100721063646-phpapp02/85/Css-10-320.jpg)
Css
Dokument se fokusira na prednosti korištenja CSS-a u web dizajnu, kao što su odvajanje prezentacije od strukture podataka, čitljivost HTML koda i olakšano mijenjanje izgleda više stranica istovremeno. Prikazani su različiti načini povezivanja CSS-a s HTML dokumentima te objašnjenje selektora, elemenata i osnovnih svojstava CSS-a. Također, dokument uključuje primjere dobre i loše prakse, kao i alate za izradu CSS-a.
More Related Content
![[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!](https://cdn.slidesharecdn.com/ss_thumbnails/windays13-responzivni-web-dizajn-130425012348-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Css
- 1. Daniel Rakijašid Gimnazija M.A.Reljkovida Vinkovci CSS Cascading Style Sheets RADioNICA VELIKA, 5. srpnja 2010.
- 2. NEDOSTACI HTML-a • Nekompatibilnostpreglednika • Različiti standardi • Složenost koda opteredenog oznakama za prikaz podataka
- 3. 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?
- 4. CSS KAO ODGOVOR • Prva specifikacija CSS-a - 1994 (Håkon Wium Lee i Bert Bos)
- 5. 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
- 6. PRIMJERI • Primjer lošegHTML-a: – http://www.angelfire.com/super/badwebs/ • Primjeri CSS-a: – http://www.csszengarden.com/ – http://cssnature.org/ – http://www.freecsstemplates.org/
- 7. Alati za izraduCSS-a • Open source: – Top Style Lite – Notepad++ • Komercijalni: – Microsoft Expression Web – Macromedia Dreamweaver
- 8.
- 9.
- 10. DUŽINE • Point [pt] •em [em] • Piksel [px]
- 11.
- 12.
- 13.
- 14. Od čega sesastoji 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 */.
- 15. VJEŽBA – štotoč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
- 16. VJEŽBA – štotoč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; }
- 17. VJEŽBA – štotočno css radi html-u?
- 18. KAKO POVEZATI CSSS HTML DOKUMENTOM?
- 19. 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.
- 20. Povezivanje s vanjskimcss 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.
- 21. Primjer <head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>
- 22. Uvoz vanjskog cssdokumenta • Uvoženje CSS-a obavlja se putem ključne riječi @import. Ona se upisuje u zaglavlju dokumenta i to unutar <style> oznake.
- 23. Umetanje u zaglavljedokumenta • CSS se može definirati u zaglavlju dokumenta u oznaci <style>, uz uporabu atributa type="text/css".
- 24. Dodavanje unutar HTMLkoda • Atribut style • Vrijedi samo za oznaku unutar koje je definiran
- 25.
- 26. Selektori • Selektor identificiraelement 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
- 27.
- 28. JEDNOSTAVNI SELEKTORI • Odgovarajuimenu html oznake i primjenjuju se na svaku istovrsnu oznaku u dokumentu
- 29. KLASNI SELEKTORI • Definiranjemklasnih selektora izbjegavamo organičenost jednog css stila po jednom html elementu
- 30. ID SELEKTORI • Idselektor primjenjuje se kada se želi pridodati stil za jedan jedinstven element na stranici
- 31. KONTEKSTNI SELEKTORI • Odnose se na hijerarhijsku razinu elemenata HTML-a
- 32.
- 33.
- 34. GRUPIRANJE • Kada nekolikoselektora dijeli određena svojstva, postoji mogućnost njihova grupiranja u popis odvojen zarezima.
- 35.
- 36. KASKADE • Prioritet selektora: 1. stilovi pridijeljeni atributom style 2. id selektori 3. klasni selektori i pseudoklase 4. kontekstni, pa jednostavni selektori.
- 37.
- 38.
- 40. • p{ margin-top:5px; margin- bottom:20px; padding-left:30px; }
- 41.
- 42. Tri grupe CSSelemenata • blok elementi (eng. block level elements) • linijski elementi (eng. inline elements) • popisi (eng. lists).
- 43. 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.
- 44.
- 45. 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)
- 46.