Lemur zaprasza
Marginesy i obramowania Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów. l (top margin) l (right margin) l (bottom margin) l (left margin) l (margin) l (top padding) l (bottom padding) l (right padding) l (left padding) l (padding) l (top border width) l (right border width) l (bottom border width) l (left border width) l (border width) l (border color) l (border style) lMieszane atrybuty górnego obramowania (top border) lMieszane atrybuty prawego obramowania (right border) lMieszane atrybuty dolnego obramowania (bottom border) lMieszane atrybuty lewego obramowania (left border) l (border) l (width) l (height) l (float) lUsuwanie opływania (clear) Górny margines 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. Prawy margines 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. Dolny margines 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. Lewy margines 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. Mieszane atrybuty marginesu 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. Górny wewnętrzny margines 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. Dolny wewnętrzny margines 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. Lewy wewnętrzny margines <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. Prawy wewnętrzny margines <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. Mieszane atrybuty wewnętrznego marginesu 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). Szerokość górnego obramowania 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 Szerokość prawego obramowania <p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p> Akapit z prawym obramowaniem (tylko NC4) Szerokość dolnego obramowania <p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p> Akapit z dolnym obramowaniem (tylko NC4) Szerokość lewego obramowania <p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p> Akapit z lewym obramowaniem (tylko NC4) Mieszane atrybuty szerokości obramowania 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 Kolor obramowania 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) Styl obramowania 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 Mieszane atrybuty obramowania 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 Szerokość 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. Wysokość Analogicznie, możemy określać wysokość elementu: <img src="cadcm4.gif" border=0 alt=" " style="height: 140px"> Opływanie 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 lpierwszy punkt wykazu ldrugi punkt wykazu ltrzeci punkt wykazu lczwarty punkt wykazu 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 |