CSS box model

{'type': u'plain'}

Pamiętacie, jak zrobiliśmy

coś, co wyglądało jak pole,

za pomocą znacznika „div”

i określiliśmy kolor tła?

Cóż, każdy element strony

przeglądarka widzi jako pole,

choćby według nas tak nie wyglądał.

Polem jest ten nagłówek,

ten akapit, a nawet ten „span",

zrobiony przez nas wcześniej.
Niektóre pola

są duże, inne małe,
jedne śródliniowe,

jak „span”, drugie blokowe,

jak „div”. Ale wszystkie
są uważane za pola.

Dlaczego to ma znaczenie?

Bo istnieje tzw. „model pola”;

który właśnie wkleiłam.

Pole każdego elementu ma 4 części:

treść, dopełnienie,

obramowanie i margines.
Za pomocą CSS zmodyfikujemy

dopełnienie, obramowanie i marginesy.

Zaraz określę, co to jest.

Zacznijmy od marginesu.

To przezroczysty obszar
wokół pola,

oddzielający je od innych elementów.

Szerokość marginesu określimy

w naszych ulubionych pikselach.
Żeby dodać 15 pikseli

do marginesu po każdej stronie

pola z informacjami,
napiszemy „margin: 15 px”.

Widzicie, że coś się zmieniło?

A gdybyśmy chcieli inne marginesy

po każdej stronie?

Większe u góry niż po bokach?
Wpisujemy to

zgodnie z kierunkiem wskazówek zegara,

zaczynając od góry. Góra 15 pikseli,

prawy zero, dolny 10, lewy 6.

Można dla każdej strony
zastosować inne właściwości,

ale chcemy zmienić
tylko część marginesów.

Dodajmy trochę luzu
wokół zdjęcia kota,

z prawej strony, i także…

trochę więcej u dołu.

Pozostałe marginesy
mogą być domyślne.

Jest też specjalna wartość marginesu,

która pomoże nam zrobić

coś ciekawego ze stronami.
Popatrzcie,

dodając „div” wokół całej strony.

Nadam jej ID: „container”.

Wstawmy ten znacznik tutaj,

żeby objął wszystko.
Teraz dodamy regułę,

by „div” miało szerokość 400 pikseli

i było wyśrodkowane.

Mogłabym określić margin-left: 100px;
(lewy margines: 100 pikseli),

bo wydaje mi się,
że teraz jest pośrodku,

ale u was może nie być,

jeśli macie większą lub mniejszą
przeglądarkę.

Chodzi o polecenie:

„Daj taki margines, jak trzeba,

równy po obu stronach”.

To właśnie robi „margin: auto;”.

Sposób, by wyśrodkować „div”.

Gdy już jest pośrodku,

wyróżnijmy je jeszcze bardziej,

dodając obramowanie.

Użyjemy własności CSS.

Zróbmy obramowanie czerwone.

Piszemy: „border” i musimy

określić trzy cechy:

grubość, styl i kolor.

Dla cienkiej wpiszę „1 piksel”,

ma być prosta, niewyszukana,

wpiszemy więc „solid”,
a żeby stała się czerwona…

wyświetlę pole wyboru koloru.

Ładna czerwień.
Dobrze. Tak, jak marginesy,

możemy określić obramowanie

np. tylko z jednej strony.

Jeśli chcemy grubą fioletową
krawędź u góry,

dodamy właściwość„border-top:

10px solid purple;”. Super!
Teraz dodajmy ramkę

i pobawmy się jeszcze

stylami krawędzi. Przejdźmy do kota.

Niech będzie 6 pikseli,

kolor „groove red”.
Nie podoba mi się.

Może podwójna?

Spróbujmy ramkę.
Tak, wygląda to jak ramka!

Może dodamy krawędzie

do pola „official info”?
Niech będzie· „border”...

nie za grubo, dwa piksele.

Linia kropkowana. Kolor…

delikatna szarość. Albo nie,

linia przerywana. O to mi chodziło.

Jednak w tych krawędziach

coś mnie trochę martwi.

A raczej - bardzo.

Widzicie, jak tekst pojawił się

przy samym obramowaniu?

I przy oficjalnych informacjach?

Źle to wygląda,

poza tym tekst jest nieczytelny.

Tu przyda się dopełnienie
(ang. padding).

Jeśli elementy mają kolor tła

lub obramowanie, potrzebujemy

dopełnienia, żeby był odstęp

między treścią a krawędziami.

Zróbmy dopełnienie. Niech będzie…

15 pikseli wokoło.

Znacznie lepiej! Dodajmy też

dopełnienie do informacji,

może 6 pikseli. Pięknie.

Obrazom nie jest to potrzebne,

ponieważ dobrze wyglądają

w takich ramkach. I gotowe:

model pola. Margines, obramowanie,

dopełnienie. Użyłam dużych wartości

i jaskrawych kolorów dla przykładu,

ale strona wygląda tandetnie.

Żeby była elegancka

i wyrafinowana,
stosujcie subtelniejsze

odcienie bieli i szarości.

Korzystajcie z tych właściwości.

Wywierają wpływ

na wygląd i styl strony.