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.
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):
<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). 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
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 grafikifloat: 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 |