Your SlideShare is downloading. ×
0
HTML & CSS
                                              Milan Milošević
                                               ww...
Sadržaj strane
            ●    13 standardnih elemenata
                    –    Text                 –   Graphics
      ...
HTML Standard (1)
            ●    Tim Berners-Lee, CERN, 1990. godine

            ●    World Wide Web Consortium (W3C)

...
HTML Standard (2)
            ●    W3C standardi
                    –    HTML 3.2
                    –    HTML 4.01
    ...
Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
HTML (1)
            ●    HTML - Hyper Text Markup Language
            ●    Nije programski jezik
            ●    Korist...
HTML (2)
            ●    Najčešći tagovi:
                    –    <h1>Naslov</h1>
                    –    <p>Paragraf</...
XHTML
            ●    EXtensible HyperText Markup Language
            ●    Stroža i čistija verzija HTML-a
            ●...
HTML i XHTML
            ●    Loš primer:




            ●    XML opisuje, a HTML prikazuje podatke
            ●    Razl...
Pravila, pravila...
            ●    Zatvoreni tagovi: <h1>paragraf <p>...
            ●    Ugneždeni tagovi: <b><i>tekst<...
Struktura → Hello World...




Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
DOCTYPE
            ●    XHTML 1.1 (samo Firefox)
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http:/...
Šta browser ignoriše
            ●    “Enter”, tj. prekid linije
            ●    Više “space” ili “tab” karaktera
       ...
HTML & CSS (1)




Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
HTML & CSS (2)




Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
xHTML




Milan Milošević, 14-16. oktobar 2009, Pirot           www.mmilan.com
Zaglavlje (header) dokumenta
            ●    Između <head> tagova
            ●    Dodatne informacije o dokumentu
      ...
<title>
            ●    Naslov dokumenta
            ●    Vidljiv kao ime prozora

            <head>
                   ...
<meta>
            ●    Opis stranice

            <head>
                         <meta name="description" content="Web d...
Telo (body) dokumenta
            ●    Između <body> tagova
            ●    Najveći deo stranice
            ●    Vidljiv...
Zatvaranje tagova
            ●    Parovi                       ●   Sami
                  –   <div></div>                ...
Najvažniji tagovi
            ●    <div> - struktura “kutija”
            ●    <p> - paragraf teksta
            ●    <h1>...
Atributi (ime=”vrednost”) (1)
            ●    id
                  –     Jedinstven
                  –     <div id=”navi...
Atributi (ime=”vrednost”) (2)
            ●    href
                    –    <a href=”http://mmilan.com”>Homepage</a>

   ...
Block & inline
          ●     div                           ●   a
          ●     h1, … h6                      ●   img
 ...
Putevi
            ●    Apsolutni
                    –    http://www.domen.tld/folder1/folder2/slika.jpg
            ●   ...
Veza sa CSS-om
            <div id=”navigation”></div>                    div#navigation
            <div id=”navigation”>...
xHTML:
                                        Najvažniji elementi




Milan Milošević, 14-16. oktobar 2009, Pirot        ...
Paragraf
            ●    Tag: <p>...</p>

            ●    Nova linija: <br />

            ●    <br /><br /> NIJE isto š...
Naslovi
            <h1> Heading 1</h1>
            <h2> Heading 2</h2>
                                              Head...
Formatiranje teksta (1)
                                                Tekst




              Naslovi                   ...
Linkovi (1)
            ●    Tag: <a>
            ●    Povezuju dve lokacije ili dva dokumenta
            ●    Najvažnija...
Linkovi (2)
            ●    Četiri stanja linka:
                    –    Link – običan link
                    –    Act...
Linkovi (3)
            ●    Eksterni linkovi
                  <a href=”http://mmilan.com” target=“_blank”> Homepage</a>
...
Liste (1)
            ●    Tri vrste listi u xHTML
                    –    Numerisane <ol>
                    –    Nenum...
Numerisane liste
            <ol>                              1. Jabuke
            <li>Jabuke</li>                   2. ...
Nenumerisane liste
            <ul>                                 ●    Jabuke
            <li>Jabuke</li>               ...
Definicije
                                              <dl>
            ●    Složenije                        <dt>Intern...
Ugneždene liste
            <ul>
                 <li>Send us a letter, including:</li>
                  <ol>
           ...
Boje
            ●    Važan element strane
            ●    Globalno i lokalno podešavanje
            ●    Tagovi imaju a...
Slike
                 <img src=”slika.jpg” alt=”Naslov slike” height=”70%”
                 width=”60” usemap=”#mapimage”...
Simboli




          http://www.w3schools.com/tags/ref_symbols.asp
Milan Milošević, 14-16. oktobar 2009, Pirot           ...
CSS




Milan Milošević, 14-16. oktobar 2009, Pirot         www.mmilan.com
Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
Šta je CSS?
            ●    Cascading Style Sheets (CSS)
            ●    Grupa pravila koja definišu izgled sajta
      ...
Prednosti CSS-a
            ●    Razdvaja izgled od elemenata
            ●    U istom fajlu gde je HTML ili posebno
     ...
“Kaskade”
            ●    Kombinacija stilova
                    –    Browser
                    –    Eksterni
        ...
Nasleđivanje
            ●    Elementi “nasleđuju” stilove od roditelja

            ●    Olakšava posao, skraćuje fajlove...
Upotreba stilova
            ●    External Style Sheet
                   <link href=“stylesheet” type=“text/css” href=“lo...
CSS sintaksa
                         selector/element {
                                  property: value;
              ...
Primer: XHTML element



             body {
                 margin: 0;
                 padding: 0;
                 bor...
Grupisanje elemenata



             h1, h2, h3, h4, h5, h6 {
                  font-family: “Trebuchet MS”, sans-serif;
 ...
Class



                    <p class=“intro”>Ovo je probni tekst</p>

                    .intro {
                      ...
Id



                    <p id=“intro”>Ovo je testiranje</p>

                    #intro {
                       border-...
Napredi CSS selektori
              ●
                   Descendant Selector
                    body h1 { }
             ...
Model kutije (1)




Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
Model kutije (2)
            ●    Za sve elemente
            ●    margin – transparentna, može da se preklapa,
          ...
<style type="text/css">
            ul {
                   background: red;
                   margin: A B C D;
         ...
Problemi sa “kutijama”




                                   Standard   IE (stare verzije)


Milan Milošević, 14-16. okto...
Korišćenje <div>
            ●    “DIVision”

            ●    Definiše blok koji može da sadrži druge
                 el...
Osobine: float i clear
            ●    Standardno div zauzima 100% širine roditelja
            ●    Dodatne osobine → ma...
CSS Fonts
             ●    Font-family
             ●    Font-weight
             ●    Font-style
             ●    Font-...
CSS jedinice i boje
              ●
                   Jedinice
                     –   %
                     –   in
   ...
CSS Layout
              ●
                   Margin
              ●
                   Padding
              ●
          ...
CSS Text
              ●
                   Text-indent
              ●
                   Text-align
              ●
    ...
CSS Background
              ●
                   Background-color
              ●
                   Background-image
   ...
CSS Lists
              ●
                   List-style
              ●
                   List-style-image
              ...
CSS skraćenice
             font-family: verdana, sans-serif;
             font-weight: bold;
             font-size: 12px...
Uslovni CSS (1)
            a[href $='.pdf'] {
               padding-right: 18px;
               background: transparent ...
Uslovni CSS (2)
            span[id ^='google'] {
              background-color: green;
            }

             ●    ...
Nekoliko saveta
            ●    Koristite eksterni CSS fajl
            ●    Ne koristite @import, link je efikasnije
   ...
Pišite razumljiv CSS
            ●    Osnovni podaci na početku fajla (ime, verzija,
                 datum, itd)
        ...
Različiti “browser-i”




Milan Milošević, 14-16. oktobar 2009, Pirot   www.mmilan.com
Dva načina
            ●    “Hacks”
            ●    Uslovni komentari
                          <!--[if IE 5]><link rel="...
P I T A NJ A ?
                                               Milan Milošević
                                            ...
Upcoming SlideShare
Loading in...5
×

xHTML i CSS

1,018

Published on

Seminar o izradi web sajtova
14-16. oktobar 2009, Pirot

Published in: Education
1 Comment
1 Like
Statistics
Notes
  • Svaka cast majstore, na skripti, ovo mi je trebalo :)
    Hvala Veliko iz KG-a !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,018
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "xHTML i CSS"

  1. 1. HTML & CSS Milan Milošević www.mmilan.com Pirot, 14 – 16 oktobar 2009 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  2. 2. Sadržaj strane ● 13 standardnih elemenata – Text – Graphics – Sound – Frames – Lists – Images – Video – Forms – Hyperlinks – Image Maps – Tables – Colour – Layers Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  3. 3. HTML Standard (1) ● Tim Berners-Lee, CERN, 1990. godine ● World Wide Web Consortium (W3C) ● U praksi: Netscape, Microsoft,... – Posebni tagovi u browserima ● Od 2002/2003 standardizacija W3C Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  4. 4. HTML Standard (2) ● W3C standardi – HTML 3.2 – HTML 4.01 – xHTML 1.0 – xHTML 1.1 – XHTML 2.0 ● Podrška http://www.webdevout.net/browser-support – Firefox – xHTML 1.1 – IE 6 – xHTML 1.0 (delimično) – IE 7 – xHTML 1.1 (delimično) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  5. 5. Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  6. 6. HTML (1) ● HTML - Hyper Text Markup Language ● Nije programski jezik ● Koristi tagove <tag>. ● HTML dokument = web strana, .htm ili .html ● Tagovi: – Otvoren i zatvoren <tag>...</tag> – Prazni tagovi <tag /> – Atributi <tag atribut=”..”>...</tag> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  7. 7. HTML (2) ● Najčešći tagovi: – <h1>Naslov</h1> – <p>Paragraf</p> – <a href="http://www.google.com">Link</a> – <img src="slika.jpg" /> – <br /> Nov red Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  8. 8. XHTML ● EXtensible HyperText Markup Language ● Stroža i čistija verzija HTML-a ● Skoro identičan HTML 4.01 ● HTML definisan kao XML aplikacija ● Standard – http://validator.w3.org/ – http://jigsaw.w3.org/css-validator/ Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  9. 9. HTML i XHTML ● Loš primer: ● XML opisuje, a HTML prikazuje podatke ● Različiti programi, operativni sistemi, računari, mobilni telefoni... Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  10. 10. Pravila, pravila... ● Zatvoreni tagovi: <h1>paragraf <p>... ● Ugneždeni tagovi: <b><i>tekst</b></i> ● Mala slova – tagovi i atributi: <P>, <H1>, <A> ● Zatvoreni prazni elementi <br> ● Vrednost atributa “..”: <table width=100%> ● Struktura dokumenta Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  11. 11. Struktura → Hello World... Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  12. 12. DOCTYPE ● XHTML 1.1 (samo Firefox) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ● XHTML 1.0 strict (Firefox, IE7) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> ● XHTML 1.0 transitional (Firefox, IE6) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> http://www.w3schools.com/tags/tag_DOCTYPE.asp Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  13. 13. Šta browser ignoriše ● “Enter”, tj. prekid linije ● Više “space” ili “tab” karaktera ● Višestruke <p> tagove ● Nepoznate tagove ● Komentare – <!-- … Ovo je komentar ... --> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  14. 14. HTML & CSS (1) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  15. 15. HTML & CSS (2) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  16. 16. xHTML Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  17. 17. Zaglavlje (header) dokumenta ● Između <head> tagova ● Dodatne informacije o dokumentu ● Stilovi, skripte, ● Najčešće se koristi – <title> – <meta> – <style> – <link> – <script> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  18. 18. <title> ● Naslov dokumenta ● Vidljiv kao ime prozora <head> <title>Title of the document</title> </head> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  19. 19. <meta> ● Opis stranice <head> <meta name="description" content="Web dizajn" /> <meta name="keywords" content="HTML,CSS,XML" /> <meta name="author" content="Milan Milosevic" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </head> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  20. 20. Telo (body) dokumenta ● Između <body> tagova ● Najveći deo stranice ● Vidljiv na stranici ● Serija tagova koji definišu sadržaj i izgled stranice Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  21. 21. Zatvaranje tagova ● Parovi ● Sami – <div></div> – <img src=”” alt=”” /> – <h1></h1> – <br /> – <p></p> – <hr /> – <strong></strong> – <span></span> – <em></em> – <a></a> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  22. 22. Najvažniji tagovi ● <div> - struktura “kutija” ● <p> - paragraf teksta ● <h1>,...,<h6> - naslovi ● <strong> - bold tekst ● <em> - italic tekst ● <img> - slika ● <a> - link Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  23. 23. Atributi (ime=”vrednost”) (1) ● id – Jedinstven – <div id=”navigacija”></div> ● class – može da se ponavlja – dodatno opisuje – tekst, poruka, komentar – <div class=”post” id=”post-123”></div> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  24. 24. Atributi (ime=”vrednost”) (2) ● href – <a href=”http://mmilan.com”>Homepage</a> ● src i alt – <img src=”/slika.jpg” alt=”Alternativni tekst” /> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  25. 25. Block & inline ● div ● a ● h1, … h6 ● img ● p ● span ● strong ● em Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  26. 26. Putevi ● Apsolutni – http://www.domen.tld/folder1/folder2/slika.jpg ● Relativni – folder2/slika.jpg ● “Root” relativni – /folder1/druga-slika.jpg Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  27. 27. Veza sa CSS-om <div id=”navigation”></div> div#navigation <div id=”navigation”></div> #navigation <div class=”post”></div> div.post <div class=”post”></div> .post selector { attribute:value; attribute2:value2 } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  28. 28. xHTML: Najvažniji elementi Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  29. 29. Paragraf ● Tag: <p>...</p> ● Nova linija: <br /> ● <br /><br /> NIJE isto što i <p> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  30. 30. Naslovi <h1> Heading 1</h1> <h2> Heading 2</h2> Heading 1 <h3> Heading 3</h3> Heading 2 <h4> Heading 4</h4> Heading 3 <h5> Heading 5</h5> Heading 4 <h6> Heading 6</h6> Heading 5 Heading 6 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  31. 31. Formatiranje teksta (1) Tekst Naslovi Paragrafi Reči/slova <h1> - najveći <p> <b> - bold . <i> - italic . <br /> - nov red <h6> - najmanji <div> - nov blok <hr /> - horizontalna linija <span> - deo teksta Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  32. 32. Linkovi (1) ● Tag: <a> ● Povezuju dve lokacije ili dva dokumenta ● Najvažnija stvar na WWW ● Unutar dokumenata ili između dokumenata <a href="http://www.w3schools.com/"> Visit W3Schools! </a> Adresa dokumenta Tekst koji se prikazuje (nevidljiv) (vidljiv) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  33. 33. Linkovi (2) ● Četiri stanja linka: – Link – običan link – Active – aktivan u drugom prozoru browser-a – Visited – link koji je već posećen – Hover – kursor miša se nalazi iznad linka Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  34. 34. Linkovi (3) ● Eksterni linkovi <a href=”http://mmilan.com” target=“_blank”> Homepage</a> ● Interni linkovi <a href=“#Section1”>Skoči na Poglavlje 1</a> *** <a name=“Section1”>Poglavlje 1</a> ● E-mail <a href="mailto:mm@mmilan.com">Pišite mi</a> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  35. 35. Liste (1) ● Tri vrste listi u xHTML – Numerisane <ol> – Nenumerisane <ul> – Definicije <dl> ● Moguće kombinacije Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  36. 36. Numerisane liste <ol> 1. Jabuke <li>Jabuke</li> 2. Banane <li>Banane</li> 3. Kruške <li>Kruške</li> 4. Šljive <li>Šljive</li> </ol> ● Vrste nabrajanja (list-style-type) – lower-alpha, decimal, lower-roman, upper-roman, upper-alpha Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  37. 37. Nenumerisane liste <ul> ● Jabuke <li>Jabuke</li> ● Banane <li>Banane</li> ● Kruške <li>Kruške</li> ● Šljive <li>Šljive</li> </ul> ● Vrste nabrajanja (list-style-type) – squere, disc, circle, none Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  38. 38. Definicije <dl> ● Složenije <dt>Internet Explorer</dt> <dd>Developed by Microsoft</dd> <dt>Netscape</dt> <dd>Developed by Netscape</dd> </dl> ● Dva elementa za svaki element liste Internet Explorer Developed by Microsoft Netscape Developed by Netscape Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  39. 39. Ugneždene liste <ul> <li>Send us a letter, including:</li> <ol> <li>Your full name</li> <li>Your order number</li> <li>Your contact information</li> </ol> <li> Use the web form to send an email </li> </ul> • Send us a letter, including: 1. Your full name 2. Your order number 3. You contact information • Use the web form to send an email Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  40. 40. Boje ● Važan element strane ● Globalno i lokalno podešavanje ● Tagovi imaju atribut color ● Heksadecimalno ili ime – #0000FF → blue – #FF0000 → red – #000000 → black – #eee → #EEEEEE Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  41. 41. Slike <img src=”slika.jpg” alt=”Naslov slike” height=”70%” width=”60” usemap=”#mapimage” /> <a href=””><img src=”” / ></a> ● alt – Alternativni text – Vidljiv dok se otvara stranica, u slučaju da ne postoji slika, Voice reader, pop-up prozor, pretraživači ● height, width – dimenzije slike (% ili px) – Formatiranje stranice pre otvaranja slika, promena veličine slike ● usemap – mapiranje slike Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  42. 42. Simboli http://www.w3schools.com/tags/ref_symbols.asp Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  43. 43. CSS Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  44. 44. Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  45. 45. Šta je CSS? ● Cascading Style Sheets (CSS) ● Grupa pravila koja definišu izgled sajta ● Slojevi prezentacije – Struktura (XHTML) – Funkcija (skripte) – Izgled (CSS) ● Lako održavanje i menjanje Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  46. 46. Prednosti CSS-a ● Razdvaja izgled od elemenata ● U istom fajlu gde je HTML ili posebno ● Definiši jednom → koristi više puta ● HTML – nikada nije bio namenjen za dizajn, različite improvizacije (font, b, i) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  47. 47. “Kaskade” ● Kombinacija stilova – Browser – Eksterni – Umetnuti – Inline – Korisnički Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  48. 48. Nasleđivanje ● Elementi “nasleđuju” stilove od roditelja ● Olakšava posao, skraćuje fajlove ● Ako element nije definisan → identičan je roditelju Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  49. 49. Upotreba stilova ● External Style Sheet <link href=“stylesheet” type=“text/css” href=“location.css” /> – Najčešći metod ● Embedded Styles <style type=“text/css”> body {} @import url(http://style.com/basic); </style> ● Inline Styles <p style=“font-size: 12px”>Lorem ipsum</p> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  50. 50. CSS sintaksa selector/element { property: value; } ● selector – xHTML element, grupa, class ili id ● property – zavisi od elementa Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  51. 51. Primer: XHTML element body { margin: 0; padding: 0; border-top: 1px solid #ff0; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  52. 52. Grupisanje elemenata h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  53. 53. Class <p class=“intro”>Ovo je probni tekst</p> .intro { font: 12px verdana, sans-serif; margin: 10px; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  54. 54. Id <p id=“intro”>Ovo je testiranje</p> #intro { border-bottom: 2px dashed #fff; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  55. 55. Napredi CSS selektori ● Descendant Selector body h1 { } #navigation p {} ● Adjacent Sibling Selectors p.intro + span {} ● Child Selectors div ol > p {} ● Universal Selector * {} • Attribute Selectors div[href=“http://home.org”] ● Pseudo-Class Selectors a:active {} #nav:hover {} Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  56. 56. Model kutije (1) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  57. 57. Model kutije (2) ● Za sve elemente ● margin – transparentna, može da se preklapa, rastojanje do susednog elementa ● border – ivica kutije, u boji ili transparentna, ako je debljina 0 → nestaje ● padding – rastojanje od ivice do sadržaja, iste boje kao sadržaj (boja pozadine ● content – većina ljudi misli da je samo ovo element, ono što je vidljivo Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  58. 58. <style type="text/css"> ul { background: red; margin: A B C D; padding: E F G H; } li { color: white; background: blue; margin: a b c d; padding: e f g h; } </style> .. <ul> <li>1st element of list </li> <li>2nd element of list </li> </ul> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  59. 59. Problemi sa “kutijama” Standard IE (stare verzije) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  60. 60. Korišćenje <div> ● “DIVision” ● Definiše blok koji može da sadrži druge elemente (tekst, slike, itd) ● Mogu da se raspoređuju kao slojevi Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  61. 61. Osobine: float i clear ● Standardno div zauzima 100% širine roditelja ● Dodatne osobine → manje ● float:left (right) – Ravna element po levoj (desnoj) ivici ● clear:left (right, none, both) – Označava gde nije dozvoljeno pojavljivanje “float” elemenata Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  62. 62. CSS Fonts ● Font-family ● Font-weight ● Font-style ● Font-size Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  63. 63. CSS jedinice i boje ● Jedinice – % – in – cm – mm – em (relativna jedinica, u odnosu na korišćeni font) – px – pt (1pt = 1/72 in) ● Boje – ime (red, etc) – rgb(x,x,x), rgb(x%, x%, x%) – #rrggbb (HEX) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  64. 64. CSS Layout ● Margin ● Padding ● Border ● Z-index ● Positioning ● Width ● Height ● Float ● Text-align ● Vertical-align Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  65. 65. CSS Text ● Text-indent ● Text-align ● Text-decoration ● Letter-spacing ● Text-transform ● Word-spacing ● White-space Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  66. 66. CSS Background ● Background-color ● Background-image ● Background-position ● Background-repeat Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  67. 67. CSS Lists ● List-style ● List-style-image ● List-style-position ● List-style-type Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  68. 68. CSS skraćenice font-family: verdana, sans-serif; font-weight: bold; font-size: 12px;  font: bold 12px verdana, sans-serif; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 10px;  padding: 5px 8px 5px 10px; Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  69. 69. Uslovni CSS (1) a[href $='.pdf'] { padding-right: 18px; background: transparent url(icon_pdf.gif) no-repeat center right; } ● Dodaje PDF ikonu svim linkovima (href) koji završavaju sa .pdf. ● CSS obavlja sav posao, bez modifikacije HTML-a Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  70. 70. Uslovni CSS (2) span[id ^='google'] { background-color: green; } ● Svaki span koji počinje sa “google” dobija zelenu pozadinu ● Još primera http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  71. 71. Nekoliko saveta ● Koristite eksterni CSS fajl ● Ne koristite @import, link je efikasnije ● Koristite nasleđivanje elemenata ● Koristite grupisanje elemenata ● Koristite skraćene forme zapisa ● Izbegavajte !important Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  72. 72. Pišite razumljiv CSS ● Osnovni podaci na početku fajla (ime, verzija, datum, itd) ● Definišite i zapišite boje koje koristite ● Logična imena klasa i identifikatora ● Grupišite pravila ● Komenatri /* … */ Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  73. 73. Različiti “browser-i” Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  74. 74. Dva načina ● “Hacks” ● Uslovni komentari <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> ● Sintaksa – gt: veće od (greater than) – lte: manje ili jednako (less than or equal to) – IE 5, IE 5.5, IE 6, IE 7, IE 8 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  75. 75. P I T A NJ A ? Milan Milošević www.mmilan.com mm@mmilan.com www.facebook.com/mmilann www.twitter.com/mmilann Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×