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

Page 1: 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

Page 2: XHTML+ CSS

Selektory (znaczniki)

<p> text </p>

<h1> text </h1>………………………………….

<h6> text </h6>

<em> text </em>

<strong> text</strong>

Page 3: XHTML+ CSS

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

Page 4: XHTML+ CSS

Zawartość(ang.content)

Dopełnienie (ang.padding)

Obramowanie (ang.border)

Margines (ang.margin)

Zawsze przezroczysty

Page 5: XHTML+ CSS

Formatowanie sekcji div

#strona{

margin :auto;

border :1px solid black;

padding :0px;

width :758px;

}

zostawiamy 2px zostawiamy 2px obramowanieobramowanie

Page 6: XHTML+ CSS

Najprostszy układ

<body>

<div id="pojemnik">

</div>

</body>

Page 7: XHTML+ CSS

<body> <div id="pojemnik"> <div id="naglowek "> </div> <div id="tresc "> </div> <div id="stopka "> </div> </div></body>

pojemnik

naglowek

tresc

stopka

Page 8: XHTML+ CSS

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

Page 9: XHTML+ CSS

<body> <div id="pojemnik"> <div id="menu"> </div> <div id="tresc"> </div> <br class="czyszczenie" /> </div></body>

pojemnik

trescmenu

Page 10: XHTML+ CSS

<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

Page 11: XHTML+ CSS

<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

Page 12: XHTML+ CSS

<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