Uwaga: nie wszystkie elementy styl≤w s▒ akceptowane przez przegl▒darki, w kt≤rych rozpoczΩto implementacjΩ styl≤w.
Polecenie margin-top: xxx pozwala wprowadziµ g≤rny margines dla danego elementu, a wiΩc dodatkowy odstΩp miΩdzy nim a poprzedzaj▒cym go elementem.
<p style="margin-top: 2cm">To jest tre╢µ akapitu</p>
To jest pierwszy akapit.
To jest drugi akapit, w kt≤rym g≤rny margines ma 2 cm.
Polecenie margin-right: xxx pozwala wprowadziµ prawy margines dla danego elementu, a wiΩc dodatkowy odstΩp miΩdzy nim a prawym brzegiem strony czy nastΩpuj▒cym po nim elementem.
<p style="margin-right: 2cm">To jest tre╢µ akapitu</p>
To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm. To jest drugi akapit, w kt≤rym prawy margines ma 2 cm.
Polecenie margin-bottom: xxx pozwala wprowadziµ dolny margines dla danego elementu, a wiΩc dodatkowy odstΩp miΩdzy nim a nastΩpuj▒cym po nim elementem.
<p style="margin-bottom: 2cm">To jest tre╢µ akapitu</p>
To jest pierwszy akapit, w kt≤rym dolny margines ma 2 cm.
To jest drugi akapit.
Polecenie margin-left: xxx pozwala wprowadziµ lewy margines dla danego elementu, a wiΩc dodatkowy odstΩp miΩdzy nim a lewym brzegiem strony czy poprzedzaj▒cym go elementem.
<p style="margin-left: 10%">To jest tre╢µ akapitu</p>
To jest akapit, w kt≤rym lewy margines ma 10 procent.
Mo┐emy podawaµ mieszane warto╢ci margines≤w dla danego elementu, posluguj▒c siΩ poleceniem margin:. Przyk│adowo:
p style="margin: 1cm" wprowadzi 1-centymetrowy margines ze wszystkich stron.
p style="margin: 1cm 2cm" wprowadzi 1-centymetrowy margines u g≤ry i u do│u oraz 2-centymetrowy margines z lewej i z prawej strony.
p style="margin: 1cm 2cm 0.5cm 1.5cm" wprowadzi odrΩbne marginesy dla ka┐dej ze stron.
R≤┐ne elementy mo┐emy oddzielaµ od innych, definiuj▒c dodatkowy wewnΩtrzny margines, poszerzaj▒cy "naturalny" odstΩp.
<p style="padding-top: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstΩpem.</p>
Akapit oddzielony od g≤rnego brzegu obramowania 1-centymetrowym odstΩpem.
| Akapit oddzielony od g≤rnego brzegu kom≤rki tabeli 5-milimetrowym odstΩpem. |
Akapit oddzielony od obrazka dodatkowym, 1-centymetrowym odstΩpem.
W analogiczny spos≤b tworzymy dolny wewnΩtrzny margines.
<p style="padding-bottom: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstΩpem.</p>
Akapit oddzielony od dolnego brzegu obramowania 1-centymetrowym odstΩpem.
<p style="padding-left: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstΩpem.</p>
Akapit oddzielony od lewego brzegu obramowania 1-centymetrowym odstΩpem.
<p style="padding-right: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstΩpem.</p>
Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstΩpem. Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstΩpem.
Mo┐emy ustaliµ kilka atrybut≤w padding jednocze╢nie. Na przyk│ad:
<p style="padding: 1cm">Akapit oddzielony od obramowania dodatkowymi odstΩpami.</p>
Akapit oddzielony od obramowania dodatkowymi odstΩpami
Mo┐emy tak┐e podaµ odrΩbne warto╢ci dla kolejnych margines≤w, np. 1cm 2cm - g≤rny/dolny prawy/lewy (realizowane z b│Ωdami).
Wielu elementom mo┐na nadawaµ obramowanie - z jednej lub kilku stron. G≤rny brzeg obramowania definiujemy nastΩpuj▒co (tylko NC4 - IE4 realizuje polecenie w ramach definicji mieszanej):
<p style="border-top-width: 1mm">Akapit z g≤rnym obramowaniem</p>
Akapit z g≤rnym obramowaniem
<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>
Akapit z prawym obramowaniem (tylko NC4)
<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>
Akapit z dolnym obramowaniem (tylko NC4)
<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>
Akapit z lewym obramowaniem (tylko NC4)
Elementowi mo┐na przypisaµ obramowanie, podaj▒c szeroko╢ci obramowania kilku stron jednocze╢nie (realizowane z b│Ωdami).
<p style="border-with: 3mm 2mm">Akapit</p>Akapit
Dodatkowym atrybutem, kt≤ry mo┐na zastosowaµ w obramowaniu, jest kolor.
<p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym obramowaniem</p>
Akapit z dolnym, grubym czerwonym obramowaniem (tylko NC4)
<p style="border-top-width: thin; border-color: red">Akapit z g≤rnym, cienkim czerwonym obramowaniem</p>
Akapit z g≤rnym, cienkim czerwonym obramowaniem (tylko NC4)
<p style="border-left-width: medium; border-color: red">Akapit z lewym, ╢rednim czerwonym obramowaniem</p>
Akapit z lewym, ╢rednim czerwonym obramowaniem (tylko NC4)
Dodatkowe polecenie umo┐liwia zdefiniowanie stylu obramowania (IE4 realizuje tylko czΩ╢ciowo i odmiennie od NN). Border-style przybiera warto╢ci: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset.
<p style="border: styl">Akapit</p>
Przyk│ady:
border: none
border: dashed
border: dotted
border: solid 2mm
border: double 3mm
border: groove 5mm red
border: ridge 5mm
border: inset 5mm
border: outset 5mm
G≤rne obramowanie mo┐e mieµ definicjΩ mieszan▒, np.:
<p style="border-top: solid red thick">Akapit</p>
To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu.
ProszΩ zauwa┐yµ, ┐e IE nie dostrzega polecenia border-top-width, ale poprawnie interpretuje definicjΩ mieszan▒! Odwrotnie zachowuje siΩ NN!! To jeszcze jeden pow≤d zachowywania nale┐nej ostro┐no╢ci w pos│ugiwaniu siΩ stylami.
Prawe obramowanie mo┐e mieµ definicjΩ mieszan▒, np.:
<p style="border-right: solid olive double">Akapit</p>
To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu.
Dolne obramowanie mo┐e mieµ definicjΩ mieszan▒, np.:
<p style="border-bottom: solid red fuchsia">Akapit</p>
To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu.
Lewe obramowanie mo┐e mieµ definicjΩ mieszan▒, np.:
<p style="border-left: groove yellow 2mm">Akapit</p>
To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu. To jest tre╢µ akapitu.
Definiuj▒c obramowanie, mo┐emy stosowaµ definicjΩ mieszan▒, w kt≤rej podamy jedynie polecenie border i warto╢ci, rezygnuj▒c z wymieniania w│asno╢ci. Zamiast:
border-width: thick; border-style: double; border-color: red
Mo┐emy wpisaµ po prostu:
border: thick double red
Internet Explorer 4 pozwala definiowaµ szeroko╢µ elementu, np.:
<img src="cadcm4.gif" border=0 alt=" " style="width: 100px">
Nie podajemy przyk│adu, gdy┐ "rujnuje" on wy╢wietlanie strony w Netscape Communicatorze.
Analogicznie, mo┐emy okre╢laµ wysoko╢µ elementu:
<img src="cadcm4.gif" border=0 alt=" " style="height: 140px">Style pozwalaj▒ definiowaµ op│ywanie tekstem r≤┐nych element≤w. Rozszerzaj▒ one znane ju┐ z HTML 3.2 polecenia ALIGN=. Stosujemy tutaj polecenie float: right, float: left lub float: none. Na przyk│ad:
<p style="float: right"> </p>
brak polecenia float
ten tekst nie oblewa grafiki
float: right (tylko NC4)
ten tekst op│ywa grafikΩ z prawej strony ten tekst op│ywa grafikΩ z prawej strony ten tekst op│ywa grafikΩ z prawej strony ten tekst op│ywa grafikΩ z prawej strony
.
float: left (tylko NC4)
ten tekst oblewa grafikΩ z lewej strony ten tekst oblewa grafikΩ z lewej strony ten tekst oblewa grafikΩ z lewej strony ten tekst oblewa grafikΩ z lewej strony
float: none (tylko NC4)
ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki
float: left (tylko NC4)
ten tekst oblewa wykaz z lewej strony ten tekst oblewa wykaz z lewej strony
ten tekst oblewa wykaz z lewej strony ten tekst oblewa wykaz z lewej strony
float: right (tylko NC4)
ten tekst oblewa tabelΩ z prawej strony ten tekst oblewa tabelΩ z prawej strony ten tekst oblewa tabelΩ z prawej strony ten tekst oblewa tabelΩ z prawej strony
| 1 | 2 | 3 |
| 4 | 5 | 6 |