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.