WEBVTT

00:00:00.000 --> 00:00:02.497
Pamiętacie, jak zrobiliśmy

00:00:02.538 --> 00:00:04.578
coś, co wyglądało jak pole,

00:00:04.591 --> 00:00:06.832
za pomocą znacznika „div”

00:00:06.909 --> 00:00:08.352
i określiliśmy kolor tła?

00:00:08.352 --> 00:00:10.855
Cóż, każdy element strony

00:00:10.865 --> 00:00:12.728
przeglądarka widzi jako pole,

00:00:12.728 --> 00:00:15.148
choćby według nas tak nie wyglądał.

00:00:15.149 --> 00:00:18.348
Polem jest ten nagłówek,

00:00:18.348 --> 00:00:22.128
ten akapit, a nawet ten „span",

00:00:22.128 --> 00:00:25.178
zrobiony przez nas wcześniej.
Niektóre pola

00:00:25.178 --> 00:00:29.688
są duże, inne małe,
jedne śródliniowe,

00:00:29.688 --> 00:00:32.838
jak „span”, drugie blokowe,

00:00:32.838 --> 00:00:35.708
jak „div”. Ale wszystkie
są uważane za pola.

00:00:35.708 --> 00:00:38.764
Dlaczego to ma znaczenie?

00:00:38.764 --> 00:00:41.054
Bo istnieje tzw. „model pola”;

00:00:41.080 --> 00:00:44.100
który właśnie wkleiłam.

00:00:44.100 --> 00:00:46.030
Pole każdego elementu ma 4 części:

00:00:46.033 --> 00:00:48.513
treść, dopełnienie,

00:00:48.517 --> 00:00:52.357
obramowanie i margines.
Za pomocą CSS zmodyfikujemy

00:00:52.357 --> 00:00:54.437
dopełnienie, obramowanie i marginesy.

00:00:54.437 --> 00:00:56.507
Zaraz określę, co to jest.

00:00:56.507 --> 00:00:59.177
Zacznijmy od marginesu.

00:00:59.177 --> 00:01:01.657
To przezroczysty obszar
wokół pola,

00:01:01.672 --> 00:01:03.822
oddzielający je od innych elementów.

00:01:03.822 --> 00:01:06.742
Szerokość marginesu określimy

00:01:06.749 --> 00:01:10.169
w naszych ulubionych pikselach.
Żeby dodać 15 pikseli

00:01:10.169 --> 00:01:12.799
do marginesu po każdej stronie

00:01:12.799 --> 00:01:16.799
pola z informacjami,
napiszemy „margin: 15 px”.

00:01:16.854 --> 00:01:22.284
Widzicie, że coś się zmieniło?

00:01:22.307 --> 00:01:25.027
A gdybyśmy chcieli inne marginesy

00:01:25.027 --> 00:01:27.237
po każdej stronie?

00:01:27.237 --> 00:01:29.647
Większe u góry niż po bokach?
Wpisujemy to

00:01:29.647 --> 00:01:31.567
zgodnie z kierunkiem wskazówek zegara,

00:01:31.643 --> 00:01:36.603
zaczynając od góry. Góra 15 pikseli,

00:01:36.603 --> 00:01:43.983
prawy zero, dolny 10, lewy 6.

00:01:43.983 --> 00:01:46.363
Można dla każdej strony
zastosować inne właściwości,

00:01:46.363 --> 00:01:48.813
ale chcemy zmienić
tylko część marginesów.

00:01:48.813 --> 00:01:51.063
Dodajmy trochę luzu
wokół zdjęcia kota,

00:01:51.080 --> 00:01:56.750
z prawej strony, i także…

00:01:56.762 --> 00:02:01.302
trochę więcej u dołu.

00:02:01.302 --> 00:02:03.792
Pozostałe marginesy
mogą być domyślne.

00:02:03.792 --> 00:02:06.742
Jest też specjalna wartość marginesu,

00:02:06.742 --> 00:02:08.642
która pomoże nam zrobić

00:02:08.644 --> 00:02:11.003
coś ciekawego ze stronami.
Popatrzcie,

00:02:11.003 --> 00:02:14.234
dodając „div” wokół całej strony.

00:02:14.234 --> 00:02:17.464
Nadam jej ID: „container”.

00:02:17.464 --> 00:02:21.394
Wstawmy ten znacznik tutaj,

00:02:21.394 --> 00:02:25.954
żeby objął wszystko.
Teraz dodamy regułę,

00:02:25.954 --> 00:02:29.374
by „div” miało szerokość 400 pikseli

00:02:29.374 --> 00:02:33.814
i było wyśrodkowane.

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

00:02:37.744 --> 00:02:40.754
bo wydaje mi się,
że teraz jest pośrodku,

00:02:40.754 --> 00:02:42.584
ale u was może nie być,

00:02:42.594 --> 00:02:45.074
jeśli macie większą lub mniejszą
przeglądarkę.

00:02:45.079 --> 00:02:46.779
Chodzi o polecenie:

00:02:46.861 --> 00:02:49.281
„Daj taki margines, jak trzeba,

00:02:49.281 --> 00:02:52.821
równy po obu stronach”.

00:02:52.821 --> 00:02:56.341
To właśnie robi „margin: auto;”.

00:02:56.341 --> 00:02:57.841
Sposób, by wyśrodkować „div”.

00:02:57.841 --> 00:03:01.471
Gdy już jest pośrodku,

00:03:01.472 --> 00:03:04.012
wyróżnijmy je jeszcze bardziej,

00:03:04.024 --> 00:03:06.304
dodając obramowanie.

00:03:06.333 --> 00:03:10.333
Użyjemy własności CSS.

00:03:10.363 --> 00:03:13.483
Zróbmy obramowanie czerwone.

00:03:13.483 --> 00:03:15.283
Piszemy: „border” i musimy

00:03:15.283 --> 00:03:16.943
określić trzy cechy:

00:03:16.943 --> 00:03:19.783
grubość, styl i kolor.

00:03:19.783 --> 00:03:23.473
Dla cienkiej wpiszę „1 piksel”,

00:03:23.473 --> 00:03:25.633
ma być prosta, niewyszukana,

00:03:25.639 --> 00:03:28.969
wpiszemy więc „solid”,
a żeby stała się czerwona…

00:03:28.969 --> 00:03:31.649
wyświetlę pole wyboru koloru.

00:03:31.649 --> 00:03:37.769
Ładna czerwień.
Dobrze. Tak, jak marginesy,

00:03:37.769 --> 00:03:39.919
możemy określić obramowanie

00:03:39.919 --> 00:03:42.789
np. tylko z jednej strony.

00:03:42.798 --> 00:03:46.078
Jeśli chcemy grubą fioletową
krawędź u góry,

00:03:46.078 --> 00:03:49.238
dodamy właściwość„border-top:

00:03:49.248 --> 00:03:56.538
10px solid purple;”. Super!
Teraz dodajmy ramkę

00:03:56.545 --> 00:03:59.785
i pobawmy się jeszcze

00:03:59.785 --> 00:04:02.225
stylami krawędzi. Przejdźmy do kota.

00:04:02.225 --> 00:04:07.605
Niech będzie 6 pikseli,

00:04:07.605 --> 00:04:12.985
kolor „groove red”.
Nie podoba mi się.

00:04:12.985 --> 00:04:16.404
Może podwójna?

00:04:16.404 --> 00:04:19.185
Spróbujmy ramkę.
Tak, wygląda to jak ramka!

00:04:19.185 --> 00:04:22.665
Może dodamy krawędzie

00:04:22.665 --> 00:04:25.985
do pola „official info”?
Niech będzie· „border”...

00:04:25.985 --> 00:04:28.405
nie za grubo, dwa piksele.

00:04:28.405 --> 00:04:31.185
Linia kropkowana. Kolor…

00:04:31.200 --> 00:04:35.960
delikatna szarość. Albo nie,

00:04:35.960 --> 00:04:38.230
linia przerywana. O to mi chodziło.

00:04:38.238 --> 00:04:40.958
Jednak w tych krawędziach

00:04:40.958 --> 00:04:42.438
coś mnie trochę martwi.

00:04:42.438 --> 00:04:45.018
A raczej - bardzo.

00:04:45.018 --> 00:04:48.878
Widzicie, jak tekst pojawił się

00:04:48.878 --> 00:04:51.628
przy samym obramowaniu?

00:04:51.628 --> 00:04:53.438
I przy oficjalnych informacjach?

00:04:53.438 --> 00:04:56.518
Źle to wygląda,

00:04:56.518 --> 00:04:59.738
poza tym tekst jest nieczytelny.

00:04:59.738 --> 00:05:02.198
Tu przyda się dopełnienie
(ang. padding).

00:05:02.198 --> 00:05:03.778
Jeśli elementy mają kolor tła

00:05:03.778 --> 00:05:05.392
lub obramowanie, potrzebujemy

00:05:05.392 --> 00:05:07.632
dopełnienia, żeby był odstęp

00:05:07.632 --> 00:05:10.092
między treścią a krawędziami.

00:05:10.106 --> 00:05:13.296
Zróbmy dopełnienie. Niech będzie…

00:05:13.315 --> 00:05:17.985
15 pikseli wokoło.

00:05:17.991 --> 00:05:21.241
Znacznie lepiej! Dodajmy też

00:05:21.241 --> 00:05:23.371
dopełnienie do informacji,

00:05:23.372 --> 00:05:27.882
może 6 pikseli. Pięknie.

00:05:27.882 --> 00:05:29.362
Obrazom nie jest to potrzebne,

00:05:29.363 --> 00:05:31.003
ponieważ dobrze wyglądają

00:05:31.012 --> 00:05:33.852
w takich ramkach. I gotowe:

00:05:33.852 --> 00:05:36.182
model pola. Margines, obramowanie,

00:05:36.182 --> 00:05:38.362
dopełnienie. Użyłam dużych wartości

00:05:38.362 --> 00:05:40.392
i jaskrawych kolorów dla przykładu,

00:05:40.392 --> 00:05:42.942
ale strona wygląda tandetnie.

00:05:42.960 --> 00:05:44.270
Żeby była elegancka

00:05:44.270 --> 00:05:46.690
i wyrafinowana,
stosujcie subtelniejsze

00:05:46.690 --> 00:05:49.120
odcienie bieli i szarości.

00:05:49.120 --> 00:05:50.870
Korzystajcie z tych właściwości.

00:05:50.870 --> 00:05:52.710
Wywierają wpływ

00:05:52.000 --> 00:05:53.720
na wygląd i styl strony.