Lemur zaprasza
Obramowania Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów. 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) l (top border) l (right border) l (bottom border) l (left border) l (border) 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 - IE4 realizuje polecenie w ramach definicji mieszanej): <p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p> Akapit z górnym obramowaniem (tylko NC4, ale nie Netscape 6) Szerokość prawego obramowania <p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p> Akapit z prawym obramowaniem (tylko NC4, ale nie Netscape 6) Szerokość dolnego obramowania <p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p> Akapit z dolnym obramowaniem (tylko NC4, ale nie Netscape 6) Szerokość lewego obramowania <p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p> Akapit z lewym obramowaniem (tylko NC4, ale nie Netscape 6) 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-width: 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 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 Mieszane atrybuty górnego obramowania 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. Mieszane atrybuty prawego obramowania 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. Mieszane atrybuty dolnego obramowania 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. Mieszane atrybuty lewego obramowania 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. 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 |