AWWW-1st3.6-w02.tresc-1.1-Slajd12

Z Studia Informatyczne
Wersja z dnia 18:18, 28 sie 2006 autorstwa Juliusz Jezierski (dyskusja | edycje)
(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)
Przejdź do nawigacjiPrzejdź do wyszukiwania

Właściwości: Box model

Właściwości: Box model


Model formatowania CSS wiąże z każdym elementem jeden lub wiele zagnieżdżonych prostokątów (stąd angielska nazwa „Box model”). W modelu tym, prostokąt reprezentujący zawartość jest opcjonalnie otoczony:

(a) marginesem wewnętrznym (ang. padding),

(b) obramowaniem (ang. border),

(c) przezroczystym marginesem zewnętrznym (ang. margin).

Dla marginesów (właściwości: padding, margin) CSS pozwala na wyspecyfikowanie ich rozmiaru (bezwzględnego lub w procentach względem elementu otaczającego). Dla obramowania można wskazać grubość linii, jej kolor oraz styl (właściwości: border-width, border-color, border-style).

Istnieje możliwość określenia różnego formatowania dla marginesów i obramowania z poszczególnych stron. Pierwszym sposobem jest podanie od 2 do 4 wartości dla danej właściwości w kolejności: top, right, bottom, left (gdy podane są 2 lub 3 wartości brakująca wartość jest taka sama jak dla przeciwległej strony). Drugim sposobem jest wykorzystanie wariantów właściwości, które swą nazwą wskazują konkretną stronę np. padding-top, padding-right, padding-bottom, padding-left.

Przykładowa reguła przedstawiona na slajdzie mówi, że akapit powinien posiadać z każdej strony margines wewnętrzny o szerokości trzech pikseli, margines zewnętrzny górny i dolny o szerokości jednego znaku, margines zewnętrzny prawy i lewy o szerokości dwóch znaków, a obramowanie linią ciągłą w kolorze niebieskim o średniej grubości.


<< Poprzedni slajd | Spis treści | Następny slajd >>