XHTML+ CSS
12
XHTML + CSS Na podstawie książki Na podstawie książki Włodzimierza Gajdy Włodzimierza Gajdy „ „ HTML, XHTML, CSS” HTML, XHTML, CSS” http:// gajdaw.pl Justyna Masikowska
Transcript of XHTML+ CSS
XHTML + CSS
Na podstawie książkiNa podstawie książki
Włodzimierza GajdyWłodzimierza Gajdy
„„HTML, XHTML, CSS”HTML, XHTML, CSS”
http://gajdaw.pl
Justyna Masikowska
Selektory (znaczniki)
<p> text </p>
<h1> text </h1>………………………………….
<h6> text </h6>
<em> text </em>
<strong> text</strong>
span i div
divdiv -jest elementem blokowym może zawierać inne elementy blokowe może mieć dowolne rozmieszczenie na
stronie
spanspan -element liniowy nie może zawierać innych elementów
blokowych wewnątrz okala fragmenty tekstu (liniowe) może zawierać inne elementy liniowe
Zawartość(ang.content)
Dopełnienie (ang.padding)
Obramowanie (ang.border)
Margines (ang.margin)
Zawsze przezroczysty
Formatowanie sekcji div
#strona{
margin :auto;
border :1px solid black;
padding :0px;
width :758px;
}
zostawiamy 2px zostawiamy 2px obramowanieobramowanie
Najprostszy układ
<body>
<div id="pojemnik">
</div>
</body>
<body> <div id="pojemnik"> <div id="naglowek "> </div> <div id="tresc "> </div> <div id="stopka "> </div> </div></body>
pojemnik
naglowek
tresc
stopka
Cztery obszary witryny
<div id="strona"><div id="naglowek">
</div>
<div id="kolumnaLewa">
</div>
<div id="kolumnaPrawa">
</div>
<div id="stopka">
</div>
</div>
pojemnik
naglowek
kolumna prawa
stopka
kolumna lewa
<body> <div id="pojemnik"> <div id="menu"> </div> <div id="tresc"> </div> <br class="czyszczenie" /> </div></body>
pojemnik
trescmenu
<body> <div id="pojemnik"> <div id="menulewe"> </div> <div id="tresc"> </div> <div id="menuprawe"> </div> <br class="czyszczenie" /> </div></body>
pojemnik
tresc
men
ule
we
men
up
rawe
<body>
<div id="pojemnik">
<div id="naglowek ">
</div>
<div id="menu">
</div>
<div id="tresc ">
</div>
<div id="stopka ">
</div>
</div>
</body>
pojemnik
naglowek
tresc
stopka
menu
<body> <div id="pojemnik"> <div id="naglowek "> </div> <div id="menulewe"> </div> <div id="tresc"> </div> <div id="menuprawe"> </div> <div id="stopka "> </div> </div></body>
pojemnik
naglowek
tresc
stopka
men
ulew
e
menupraw
e
