Daniel Rakijašid
              Gimnazija M.A.Reljkovida Vinkovci




         CSS
Cascading Style Sheets
           RADioN...
NEDOSTACI HTML-a

• Nekompatibilnost preglednika
• Različiti standardi
• Složenost koda opteredenog oznakama
  za prikaz p...
HTML KAO PITANJE

• Kako prilagoditi izgled stranice da ona
  bude jednakog prikaza u svim
  preglednicima?
• Kako oblikov...
CSS KAO ODGOVOR
    • Prva
      specifikacija
      CSS-a - 1994
      (Håkon Wium
      Lee i Bert Bos)
PREDNOSTI CSS-a
•   Odvajanje prezentacije podataka i dizajna od
    same strukture podataka. Dizajneri su
    neovisni o ...
PRIMJERI

• Primjer lošeg HTML-a:
  – http://www.angelfire.com/super/badwebs/

• Primjeri CSS-a:
  – http://www.csszengard...
Alati za izradu CSS-a

• Open source:
  – Top Style Lite
  – Notepad++
• Komercijalni:
  – Microsoft Expression Web
  – Ma...
MJERNE JEDINICE
BOJE

• #rrggbb
• www.colorpicker.com
DUŽINE

• Point [pt]
• em [em]
• Piksel [px]
ELEMENTI CSS-A
Primjer
Primjer
Od čega se sastoji CSS kod?




1. selektori - p, .stil - identificiraju pojedine
   elemente na HTML stranici;
2. svojstv...
VJEŽBA – što točno css radi html-u?
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum je tekst koji se sastoji
      od niza...
VJEŽBA – što točno css radi html-u?
     h1 {
       font-family:Verdana,Helvetica,sans-serif;
       font-weight:bold;
  ...
VJEŽBA – što točno css radi html-u?
KAKO POVEZATI CSS S HTML
DOKUMENTOM?
4 načina spajanja

1. Povezivanje s vanjskim css
   dokumentom
2. uvoženjem vanjskog css dokumenta
3. umetanjem u zaglavlj...
Povezivanje s vanjskim css
                       dokumentom
• Povezivanje na vanjski dokument izvodi se
  oznakom <link> ...
Primjer

<head>
...
<link rel="stylesheet"
    type="text/css" href="stil.css">
...
</head>
Uvoz vanjskog css dokumenta

• Uvoženje CSS-a obavlja se putem ključne
  riječi @import. Ona se upisuje u
  zaglavlju doku...
Umetanje u zaglavlje dokumenta

 • CSS se može definirati u zaglavlju
   dokumenta u oznaci <style>, uz uporabu
   atribut...
Dodavanje unutar HTML koda

• Atribut style
• Vrijedi samo za oznaku unutar koje je
  definiran
SELEKTORI
Selektori
• Selektor identificira element ili dio HTML
  stranice na koji se primjenjuje navedeni stil.
• Opdi oblik:
  se...
Elementi HTML koda
JEDNOSTAVNI SELEKTORI

• Odgovaraju imenu html oznake i
  primjenjuju se na svaku istovrsnu oznaku
  u dokumentu
KLASNI SELEKTORI
• Definiranjem klasnih selektora izbjegavamo
  organičenost jednog css stila po jednom html
  elementu
ID SELEKTORI

• Id selektor primjenjuje se kada se želi
  pridodati stil za jedan jedinstven
  element na stranici
KONTEKSTNI SELEKTORI

     • Odnose se na
       hijerarhijsku razinu
       elemenata HTML-a
PSEUDOKLASE
OBILJEŽJA SELEKTORA
GRUPIRANJE

• Kada nekoliko selektora dijeli
  određena svojstva, postoji
  mogućnost njihova grupiranja u popis
  odvojen...
NASLJEĐIVANJE
KASKADE
• Prioritet selektora:
  1.   stilovi pridijeljeni atributom style
  2.   id selektori
  3.   klasni selektori i p...
VJEŽBA
CSS MODEL KUTIJE
• p{
    margin-top:5px;
    margin-
  bottom:20px;
    padding-left:30px;
  }
CSS ELEMENTI
Tri grupe CSS elemenata

• blok elementi (eng. block level
  elements)
• linijski elementi (eng. inline
  elements)
• popi...
SPAN ELEMENT

• Element <span> je linijski generički
  kontejner.
• Smisao generičkih kontejnera je
  strukturirano obuhva...
Primjer
DIV ELEMENT

• Element <div> je blok generički
  kontejner.
• Najčešde služi za obuhvadanje više blok
  ili linijskih elem...
VJEŽBA
Css
Upcoming SlideShare
Loading in …5
×

Css

2,348 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,348
On SlideShare
0
From Embeds
0
Number of Embeds
279
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css

  1. 1. Daniel Rakijašid Gimnazija M.A.Reljkovida Vinkovci CSS Cascading Style Sheets RADioNICA VELIKA, 5. srpnja 2010.
  2. 2. NEDOSTACI HTML-a • Nekompatibilnost preglednika • Različiti standardi • Složenost koda opteredenog oznakama za prikaz podataka
  3. 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. 4. CSS KAO ODGOVOR • Prva specifikacija CSS-a - 1994 (Håkon Wium Lee i Bert Bos)
  5. 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. 6. 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/
  7. 7. Alati za izradu CSS-a • Open source: – Top Style Lite – Notepad++ • Komercijalni: – Microsoft Expression Web – Macromedia Dreamweaver
  8. 8. MJERNE JEDINICE
  9. 9. BOJE • #rrggbb • www.colorpicker.com
  10. 10. DUŽINE • Point [pt] • em [em] • Piksel [px]
  11. 11. ELEMENTI CSS-A
  12. 12. Primjer
  13. 13. Primjer
  14. 14. 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 */.
  15. 15. 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">&quot; Lorem ipsum dolor... </p
  16. 16. 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; }
  17. 17. VJEŽBA – što točno css radi html-u?
  18. 18. KAKO POVEZATI CSS S HTML DOKUMENTOM?
  19. 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. 20. 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.
  21. 21. Primjer <head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>
  22. 22. 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.
  23. 23. Umetanje u zaglavlje dokumenta • CSS se može definirati u zaglavlju dokumenta u oznaci <style>, uz uporabu atributa type="text/css".
  24. 24. Dodavanje unutar HTML koda • Atribut style • Vrijedi samo za oznaku unutar koje je definiran
  25. 25. SELEKTORI
  26. 26. 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
  27. 27. Elementi HTML koda
  28. 28. JEDNOSTAVNI SELEKTORI • Odgovaraju imenu html oznake i primjenjuju se na svaku istovrsnu oznaku u dokumentu
  29. 29. KLASNI SELEKTORI • Definiranjem klasnih selektora izbjegavamo organičenost jednog css stila po jednom html elementu
  30. 30. ID SELEKTORI • Id selektor primjenjuje se kada se želi pridodati stil za jedan jedinstven element na stranici
  31. 31. KONTEKSTNI SELEKTORI • Odnose se na hijerarhijsku razinu elemenata HTML-a
  32. 32. PSEUDOKLASE
  33. 33. OBILJEŽJA SELEKTORA
  34. 34. GRUPIRANJE • Kada nekoliko selektora dijeli određena svojstva, postoji mogućnost njihova grupiranja u popis odvojen zarezima.
  35. 35. NASLJEĐIVANJE
  36. 36. KASKADE • Prioritet selektora: 1. stilovi pridijeljeni atributom style 2. id selektori 3. klasni selektori i pseudoklase 4. kontekstni, pa jednostavni selektori.
  37. 37. VJEŽBA
  38. 38. CSS MODEL KUTIJE
  39. 39. • p{ margin-top:5px; margin- bottom:20px; padding-left:30px; }
  40. 40. CSS ELEMENTI
  41. 41. Tri grupe CSS elemenata • blok elementi (eng. block level elements) • linijski elementi (eng. inline elements) • popisi (eng. lists).
  42. 42. 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.
  43. 43. Primjer
  44. 44. 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)
  45. 45. VJEŽBA

×