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

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

0:00:04.591,0:00:06.832
za pomocą znacznika „div”

0:00:06.909,0:00:08.352
i określiliśmy kolor tła?

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

0:00:10.865,0:00:12.728
przeglądarka widzi jako pole,

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

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

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

0:00:22.128,0:00:25.178
zrobiony przez nas wcześniej.[br]Niektóre pola

0:00:25.178,0:00:29.688
są duże, inne małe,[br]jedne śródliniowe,

0:00:29.688,0:00:32.838
jak „span”, drugie blokowe,

0:00:32.838,0:00:35.708
jak „div”. Ale wszystkie[br]są uważane za pola.

0:00:35.708,0:00:38.764
Dlaczego to ma znaczenie?

0:00:38.764,0:00:41.054
Bo istnieje tzw. „model pola”;

0:00:41.080,0:00:44.100
który właśnie wkleiłam.

0:00:44.100,0:00:46.030
Pole każdego elementu ma 4 części:

0:00:46.033,0:00:48.513
treść, dopełnienie,

0:00:48.517,0:00:52.357
obramowanie i margines.[br]Za pomocą CSS zmodyfikujemy

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

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

0:00:56.507,0:00:59.177
Zacznijmy od marginesu.

0:00:59.177,0:01:01.657
To przezroczysty obszar[br]wokół pola,

0:01:01.672,0:01:03.822
oddzielający je od innych elementów.

0:01:03.822,0:01:06.742
Szerokość marginesu określimy

0:01:06.749,0:01:10.169
w naszych ulubionych pikselach.[br]Żeby dodać 15 pikseli

0:01:10.169,0:01:12.799
do marginesu po każdej stronie

0:01:12.799,0:01:16.799
pola z informacjami,[br]napiszemy „margin: 15 px”.

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

0:01:22.307,0:01:25.027
A gdybyśmy chcieli inne marginesy

0:01:25.027,0:01:27.237
po każdej stronie?

0:01:27.237,0:01:29.647
Większe u góry niż po bokach?[br]Wpisujemy to

0:01:29.647,0:01:31.567
zgodnie z kierunkiem wskazówek zegara,

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

0:01:36.603,0:01:43.983
prawy zero, dolny 10, lewy 6.

0:01:43.983,0:01:46.363
Można dla każdej strony[br]zastosować inne właściwości,

0:01:46.363,0:01:48.813
ale chcemy zmienić[br]tylko część marginesów.

0:01:48.813,0:01:51.063
Dodajmy trochę luzu[br]wokół zdjęcia kota,

0:01:51.080,0:01:56.750
z prawej strony, i także…

0:01:56.762,0:02:01.302
trochę więcej u dołu.

0:02:01.302,0:02:03.792
Pozostałe marginesy[br]mogą być domyślne.

0:02:03.792,0:02:06.742
Jest też specjalna wartość marginesu,

0:02:06.742,0:02:08.642
która pomoże nam zrobić

0:02:08.644,0:02:11.003
coś ciekawego ze stronami.[br]Popatrzcie,

0:02:11.003,0:02:14.234
dodając „div” wokół całej strony.

0:02:14.234,0:02:17.464
Nadam jej ID: „container”.

0:02:17.464,0:02:21.394
Wstawmy ten znacznik tutaj,

0:02:21.394,0:02:25.954
żeby objął wszystko.[br]Teraz dodamy regułę,

0:02:25.954,0:02:29.374
by „div” miało szerokość 400 pikseli

0:02:29.374,0:02:33.814
i było wyśrodkowane.

0:02:33.814,0:02:37.744
Mogłabym określić margin-left: 100px;[br](lewy margines: 100 pikseli),

0:02:37.744,0:02:40.754
bo wydaje mi się,[br]że teraz jest pośrodku,

0:02:40.754,0:02:42.584
ale u was może nie być,

0:02:42.594,0:02:45.074
jeśli macie większą lub mniejszą[br]przeglądarkę.

0:02:45.079,0:02:46.779
Chodzi o polecenie:

0:02:46.861,0:02:49.281
„Daj taki margines, jak trzeba,

0:02:49.281,0:02:52.821
równy po obu stronach”.

0:02:52.821,0:02:56.341
To właśnie robi „margin: auto;”.

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

0:02:57.841,0:03:01.471
Gdy już jest pośrodku,

0:03:01.472,0:03:04.012
wyróżnijmy je jeszcze bardziej,

0:03:04.024,0:03:06.304
dodając obramowanie.

0:03:06.333,0:03:10.333
Użyjemy własności CSS.

0:03:10.363,0:03:13.483
Zróbmy obramowanie czerwone.

0:03:13.483,0:03:15.283
Piszemy: „border” i musimy

0:03:15.283,0:03:16.943
określić trzy cechy:

0:03:16.943,0:03:19.783
grubość, styl i kolor.

0:03:19.783,0:03:23.473
Dla cienkiej wpiszę „1 piksel”,

0:03:23.473,0:03:25.633
ma być prosta, niewyszukana,

0:03:25.639,0:03:28.969
wpiszemy więc „solid”,[br]a żeby stała się czerwona…

0:03:28.969,0:03:31.649
wyświetlę pole wyboru koloru.

0:03:31.649,0:03:37.769
Ładna czerwień.[br]Dobrze. Tak, jak marginesy,

0:03:37.769,0:03:39.919
możemy określić obramowanie

0:03:39.919,0:03:42.789
np. tylko z jednej strony.

0:03:42.798,0:03:46.078
Jeśli chcemy grubą fioletową[br]krawędź u góry,

0:03:46.078,0:03:49.238
dodamy właściwość„border-top:

0:03:49.248,0:03:56.538
10px solid purple;”. Super![br]Teraz dodajmy ramkę

0:03:56.545,0:03:59.785
i pobawmy się jeszcze

0:03:59.785,0:04:02.225
stylami krawędzi. Przejdźmy do kota.

0:04:02.225,0:04:07.605
Niech będzie 6 pikseli,

0:04:07.605,0:04:12.985
kolor „groove red”.[br]Nie podoba mi się.

0:04:12.985,0:04:16.404
Może podwójna?

0:04:16.404,0:04:19.185
Spróbujmy ramkę.[br]Tak, wygląda to jak ramka!

0:04:19.185,0:04:22.665
Może dodamy krawędzie

0:04:22.665,0:04:25.985
do pola „official info”?[br]Niech będzie· „border”...

0:04:25.985,0:04:28.405
nie za grubo, dwa piksele.

0:04:28.405,0:04:31.185
Linia kropkowana. Kolor…

0:04:31.200,0:04:35.960
delikatna szarość. Albo nie,

0:04:35.960,0:04:38.230
linia przerywana. O to mi chodziło.

0:04:38.238,0:04:40.958
Jednak w tych krawędziach

0:04:40.958,0:04:42.438
coś mnie trochę martwi.

0:04:42.438,0:04:45.018
A raczej - bardzo.

0:04:45.018,0:04:48.878
Widzicie, jak tekst pojawił się

0:04:48.878,0:04:51.628
przy samym obramowaniu?

0:04:51.628,0:04:53.438
I przy oficjalnych informacjach?

0:04:53.438,0:04:56.518
Źle to wygląda,

0:04:56.518,0:04:59.738
poza tym tekst jest nieczytelny.

0:04:59.738,0:05:02.198
Tu przyda się dopełnienie[br](ang. padding).

0:05:02.198,0:05:03.778
Jeśli elementy mają kolor tła

0:05:03.778,0:05:05.392
lub obramowanie, potrzebujemy

0:05:05.392,0:05:07.632
dopełnienia, żeby był odstęp

0:05:07.632,0:05:10.092
między treścią a krawędziami.

0:05:10.106,0:05:13.296
Zróbmy dopełnienie. Niech będzie…

0:05:13.315,0:05:17.985
15 pikseli wokoło.

0:05:17.991,0:05:21.241
Znacznie lepiej! Dodajmy też

0:05:21.241,0:05:23.371
dopełnienie do informacji,

0:05:23.372,0:05:27.882
może 6 pikseli. Pięknie.

0:05:27.882,0:05:29.362
Obrazom nie jest to potrzebne,

0:05:29.363,0:05:31.003
ponieważ dobrze wyglądają

0:05:31.012,0:05:33.852
w takich ramkach. I gotowe:

0:05:33.852,0:05:36.182
model pola. Margines, obramowanie,

0:05:36.182,0:05:38.362
dopełnienie. Użyłam dużych wartości

0:05:38.362,0:05:40.392
i jaskrawych kolorów dla przykładu,

0:05:40.392,0:05:42.942
ale strona wygląda tandetnie.

0:05:42.960,0:05:44.270
Żeby była elegancka

0:05:44.270,0:05:46.690
i wyrafinowana,[br]stosujcie subtelniejsze

0:05:46.690,0:05:49.120
odcienie bieli i szarości.

0:05:49.120,0:05:50.870
Korzystajcie z tych właściwości.

0:05:50.870,0:05:52.710
Wywierają wpływ

0:05:52.000,0:05:53.720
na wygląd i styl strony.