Rozumienie kodu css

[Slash3r]

Zrobilem sobie tutorial.Oto jego kod:

Kod: Zaznacz cały

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
    <title>Your Website title</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

<div id="wrapper">
     <div id="header">Header</div>
     <div id="content-box1"><p>Box 1</p></div>
     <div id="content-box2"><p>Box 2</p></div>
     <div id="content-box3"><p>Box 3</p></div>
         <div id="content">
              <div id="content-left">Lewe Menu</div>
              <div id="content-main">Glowna czesc tekstu</div>
         </div>

         <div id="footer">Stopka</div>
         <div id="bottom"></div>
</div>

    </body>

    </html>

A to css:

Kod: Zaznacz cały

body {    /* tutaj deklaracja body*/
font-family: arial, helevetica, sans-serif;/*    na stronce takie czcionki jak: arial,helevetica,sans-serif*/
font-size: 12px; /*rozmial czcionki 12px*/
}

#wrapper {  /*glowny div*/
width:900px; /*szerokosc glownego diva 900px*/
margin: 0px auto; /*marginessy top i bottom 0, marginesy lewy i prawy auto*/
border:1px solid #bbb; /*obramowanie diva 1px,ciagly,kolor*/
padding:10px; /*???*/
}

#header {  /*np logo*/
border:1px solid #bbb; /*obramowanie 1px,ciagle,kolor*/
height:80px; /* wysokosc 80px*/
padding:10px; /*???*/
}

#content {  /*???*/
margin-top:10px;  /*margines gorny 10px*/
padding-bottom:10px; /*????*/
}

#content div { /*???*/
padding: 10px;/*???*/
border:1px solid #bbb;  /* obramowanie 1 px ciagle, kolor*/
float:left; /*pozycja lewa , ale prosze bardziej wytlumaczyc na czym to polega:D*/
}

#content-left { /*menu lewe*/
width:180px; /*szerokosc 180px*/
height:300px; /*wysokosc 300px*/
}

#content-main { /*tresc glowna*/
margin-left:10px; /*lewy margines 10px*/
width:666px; /*szerokosc 666px*/
height:150px;/*wysokosc 150px*/
}

#content-box1, #content-box2, #content-box3 { /*tutaj sa te boxy*/
padding:10px; /*???*/
border:1px solid #bbb;  /* obramowanie 1px, ciagle, kolor*/
position:absolute;/* jezeli usune ta linijke to wszystko sie rozwali na stronie,probowalem position:relative to nic sie nie zmienia a jak jest absolute to jest all good i nie wiem czemu ma byc relative;/*/
margin-top:190px; /*gorny margines 190px*/
height:120px; /*szerokosc 120px*/
}

#content-box1 { /* pierwszy box*/
margin-left:212px; */ lewy margines 212px*/
width:200px; /*szerokosc 200px*/
}


#content-box2 { /*drugi box*/
margin-left: 444px; /* lewy margines 444px*/
width:200px; /* szerokosc 200px*/
}

#content-box3 { /* 3 box*/
margin-left: 676px; /* lewy margines 676px*/
width:202px; /*szerokosc 202px*/
}

#footer { /*stopka*/
float:left; /* ??*/
margin-top:10px; /* gorny margines 10px*/
margin-bottom:10px; /* dolny margines 10px*/
padding:10px; /*???*/
border:1px solid #bbb; /*obramowanie 1px,ciagle, kolor*/
width:878px; /*szerokosc 878px*/
}

#bottom { /*???*/
clear:both; /*jezeli to jest to stopka jest rowna z innymi,ale nie wiem jak to dziala;/*/
}

Specjalnie pisze sobie do tego kodu komentarze zeby zobaczyc czy wszystko rozumiem.Paru rzeczy nie rozumiem.Chcialbym was prosic zebyscie mi wytlumaczyli te rzeczy gdzie niie wiem;/

[123456]

Kod: Zaznacz cały

padding:10px; /*???*/  /* Wielkość odstępu pomiędzy zawartością a obramowaniem. To taki "wewnętrzny margines" */

#content {  /*???*/  /* Te slowo 'content' to nazwa ID elementu DIV ktory jest w kodzie html. Nazwa ta jest ustalana przez kodera wiec kiedy widzi sie zapis w postaci #cos_tam trzeba to rozumiec jako definicje styli dla elementu o ID 'cos_tam'  */

padding-bottom:10px; /*????*/  /* Odstep pomiedzy zawartoscia elementu a jego dolna krawedzia */

#content div { /*???*/  /* kazdy element DIV znajdujacy sie w elemencie o ID 'content'. Ten znak hash'a (#) oznacza ze jest to ID*/

float:left; /* Definiuje z ktorej strony ma oblewac dany element reszta strony. */

clear:both; /* 'Wylacza' plywanie (czyli float) */

Poczytaj jakis kurs CSS a najlepiej jakas ksiazke Erica Meyera