(Jest to przeredagowany i zaktualizowany artykuł,
pierwotnie publikowany w roku 1999.)
„Jako oficer wojsk francuskich uczestniczyłem w oblężeniu Saragossy. W kilka dni po zdobyciu miasta, zapuściwszy się w dość odległą dzielnicę, zwróciłem uwagę na niewielki, ładnie zbudowany domek, którego, jak mi się zrazu zdawało, Francuzi nie zdążyli jeszcze splądrować. Zdjęty ciekawością, zbliżyłem się i zastukałem w drzwi. Okazało się, że nie są zamknięte, pchnąłem je więc lekko i wszedłem do środka. Wołałem, szukałem, – nie znalazłem nikogo. Odniosłem wrażenie, że wnętrze ogołocone jest z cenniejszych przedmiotów; na stołach i w szafach pozostały jedynie błahe drobiazgi. Tylko na podłodze, w kącie, zauważyłem kilka zapisanych zeszytów.”
Mówiący te słowa – oficer uczestniczący w hiszpańskiej kampanii Napoleona na przełomie 1808 i 1809 roku – z woli Jana Potockiego – autora Rękopisu znalezionego w Saragossie – szybko milknie i więcej już go nie usłyszymy. Oddaje głos autorowi znalezionego rękopisu, którym jest Alphonse van Worden, pół Hiszpan, pół Flamandczyk. Rękopis pochodzi z początku XVIII w. i jest opowieścią o podróży dzielnego kapitana gwardii wallońskiej przez tajemnicze góry Sierra Morena. Kapitan van Worden często oddaje głos napotkanym osobom, które rozpoczynają swe własne opowieści. Te z kolei oddają głos innym, a te innym…
Jak rozumieć pudełkowy model formatowania elementów strony WWW?
Taką konstrukcję, w której jedna opowieść jest ramą kompozycyjną dla opowiadań umieszczonych o stopień niżej, nazywamy kompozycją szkatułkową.
Kiedy analizuję sposób wyświetlania elementów języka HTML ujęty w reguły CSS, zawsze przychodzi mi na myśl fascynująca książka Jana Potockiego albo drzewo genealogiczne. Bo w istocie: wyświetlany na ekranie monitora dokument HTML zorganizowany jest na zasadzie genealogicznego drzewa, gdzie każdy element (na przykład P, A, TABLE) posiada swojego „rodzica”. I jak to w rodzinie: są rodzice i dzieci, rodzeństwo, przodkowie i następcy…
Model formatowania wizualnego, o którym będzie mowa niżej, tak jak kompozycja szkatułkowa powieści Potockiego, opisuje mechanizm generowania przez elementy języka HTML pól, które układają się w hierarchię zagnieżdżających się pudełek. W każdym pudełku mogą się znaleźć następne. Pudełka są kontenerem dla elementów dokumentu HTML. Ale jak dokładnie zbudowane jest takie pudełko?
Pudełko
Wszystkie elementy dokumentu generują prostokątne obszary – nazwijmy je pudełkami (ang. box). Pudełko posiada swoją zawartość (np. tekst), oraz opcjonalnie: otoczenie (paddding), krawędź (border) i marginesy (margins). Każdej z tych własności można przypisać wartość odnoszącą się do wszystkich boków pola jednocześnie lub dla każdego boku osobno.
<html>
<head>
<title>Zapis skrócony</title>
<style type="text/css">
.box {
background-color : silver;
padding : 20px;
margin : 100px;
border : medium red solid;
}
/* podane wielkości odnoszą się
do wszystkich boków jednocześnie */
</style>
</head>
<body>
...
</body>
</html>Padding (dopełnienie) jest miarą odstępu między zawartością pudełka a jego krawędzią. Można zastosować w tym wypadku wszystkie standardowe jednostki (np. 'pt’, 'px’, ’em’ itd.). Domyślną wielkością dopełnienia jest 0. Kolor obszaru dopełnienia jest określany przez własność background danego elementu.
padding | przykładowa wartość |
|---|---|
padding-top : 10px;padding-right : 12pt;padding-bottom : 1.5em;padding-left : 1.2mm; |
Border (krawędź) jest własnością opisującą szerokość, kolor i styl obramowania danego elementu. Dla każdej krawędzi można określić następujące własności:
border-width | przykładowa wartość |
|---|---|
border-top-width : thin;border-right-width : medium;border-bottom-width : thick;border-left-width : 1px; | |
border-color | przykładowa wartość |
border-top-color : red;border-right-color : blue;border-bottom-color : #FF0000;border-left-color : #0000FF; | |
border-style | przykładowa wartość |
border-top-style : solid;border-right-style : dashed;border-bottom-style : double;border-left-style : groove; |
Margin (margines) jest miarą odstępu między krawędzią elementu a odpowiednią krawędzią bloku zawierającego element. Domyślną wielkością marginesu jest 0, są dopuszczalne wartości ujemne. Margines jest zawsze przezroczysty, zatem pod obszarem marginesu będzie widoczny kolor tła bloku zawierającego dany element
margin | przykładowa wartość |
|---|---|
margin-top : 10px;margin-right : -12pt;margin-bottom : 1.2em;margin-left : 1.5mm; |
Poniższy rysunek ilustruje wszystkie istotne własności pudełka generowanego przez elementy HTML.
Wykorzystaj własności pudełka zamiast tabel
Przed epoką CSS jedynym sposobem otoczenia fragmentu tekstu kolorową krawędzią było zastosowanie triku z zagnieżdżonymi tabelami:
Wykorzystanie własności padding, border, margin w połączeniu z własnościami pozycjonowania dostarczają bardzo dobrej, czytelnej, prostej metody tworzenia układu strony (marginesy); bez nadmiernej komplikacji kodu, dzięki tym własnościom można wyróżniać istotne fragmenty tekstu i nagłówki (krawędzie). Otoczenie i marginesy pionowe elementów pozwalają na precyzyjne regulowanie światła między wierszami i akapitami tekstu.
Aby zilustrować działanie wszystkich własności pudełka generowanego przez określony element HTML, posłużymy się przykładem; jest to w miarę możliwości dokładna „kopia” rysunku przedstawionego wcześniej.
Pudełko wygenerowane przez element DIV uczynimy kontenerem dla pudełka elementu P. Szerokość i wysokość pudełka nadrzędnego została ograniczona własnościami width i height oraz uwidoczniona przez zastosowanie niebieskiej krawędzi. Dzięki temu obszar między krawędzią pudełka nadrzędnego a krawędzią pudełka podrzędnego jest obrazem wielkości marginesów określonych dla elementu P. Przedstawiony poniżej kod strony szczegółowo przedstawia zastosowane własności pól.
<html>
<head>
<title>Pudełko w pudełku</title>
<style type="text/css">
<!--
body { background-color : #ffffff; }
.parent {
width : 255px;
height : 163px;
border : 1px #0000FF dashed;
/* domyslna wartosc 'margin' i 'padding wynosi 0 */
}
.child {
/* własnosci czcionki - 'font properties' */
font-size : 34px;
font-family : verdana, arial, helvetica, sans-serif;
color : #000033;
/* tło - 'background properties' */
background-color : #ffff99;
/* własnosci pola - 'box properties' */
margin-left : 35px;
margin-right : 30px;
margin-top : 15px;
margin-bottom : 25px;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
padding-bottom : 40px;
border : medium #ff9966 solid;
}
-->
</style>
</head>
<body>
<div class="parent">
<p class="child">Tekst</p>
</div>
</body>
</html>