1
00:00:00,000 --> 00:00:02,497
Pamiętacie, jak zrobiliśmy

2
00:00:02,538 --> 00:00:04,578
coś, co wyglądało jak pole,

3
00:00:04,591 --> 00:00:06,832
za pomocą znacznika „div”

4
00:00:06,909 --> 00:00:08,352
i określiliśmy kolor tła?

5
00:00:08,352 --> 00:00:10,855
Cóż, każdy element strony

6
00:00:10,865 --> 00:00:12,728
przeglądarka widzi jako pole,

7
00:00:12,728 --> 00:00:15,148
choćby według nas tak nie wyglądał.

8
00:00:15,149 --> 00:00:18,348
Polem jest ten nagłówek,

9
00:00:18,348 --> 00:00:22,128
ten akapit, a nawet ten „span",

10
00:00:22,128 --> 00:00:25,178
zrobiony przez nas wcześniej.
Niektóre pola

11
00:00:25,178 --> 00:00:29,688
są duże, inne małe,
jedne śródliniowe,

12
00:00:29,688 --> 00:00:32,838
jak „span”, drugie blokowe,

13
00:00:32,838 --> 00:00:35,708
jak „div”. Ale wszystkie
są uważane za pola.

14
00:00:35,708 --> 00:00:38,764
Dlaczego to ma znaczenie?

15
00:00:38,764 --> 00:00:41,054
Bo istnieje tzw. „model pola”;

16
00:00:41,080 --> 00:00:44,100
który właśnie wkleiłam.

17
00:00:44,100 --> 00:00:46,030
Pole każdego elementu ma 4 części:

18
00:00:46,033 --> 00:00:48,513
treść, dopełnienie,

19
00:00:48,517 --> 00:00:52,357
obramowanie i margines.
Za pomocą CSS zmodyfikujemy

20
00:00:52,357 --> 00:00:54,437
dopełnienie, obramowanie i marginesy.

21
00:00:54,437 --> 00:00:56,507
Zaraz określę, co to jest.

22
00:00:56,507 --> 00:00:59,177
Zacznijmy od marginesu.

23
00:00:59,177 --> 00:01:01,657
To przezroczysty obszar
wokół pola,

24
00:01:01,672 --> 00:01:03,822
oddzielający je od innych elementów.

25
00:01:03,822 --> 00:01:06,742
Szerokość marginesu określimy

26
00:01:06,749 --> 00:01:10,169
w naszych ulubionych pikselach.
Żeby dodać 15 pikseli

27
00:01:10,169 --> 00:01:12,799
do marginesu po każdej stronie

28
00:01:12,799 --> 00:01:16,799
pola z informacjami,
napiszemy „margin: 15 px”.

29
00:01:16,854 --> 00:01:22,284
Widzicie, że coś się zmieniło?

30
00:01:22,307 --> 00:01:25,027
A gdybyśmy chcieli inne marginesy

31
00:01:25,027 --> 00:01:27,237
po każdej stronie?

32
00:01:27,237 --> 00:01:29,647
Większe u góry niż po bokach?
Wpisujemy to

33
00:01:29,647 --> 00:01:31,567
zgodnie z kierunkiem wskazówek zegara,

34
00:01:31,643 --> 00:01:36,603
zaczynając od góry. Góra 15 pikseli,

35
00:01:36,603 --> 00:01:43,983
prawy zero, dolny 10, lewy 6.

36
00:01:43,983 --> 00:01:46,363
Można dla każdej strony
zastosować inne właściwości,

37
00:01:46,363 --> 00:01:48,813
ale chcemy zmienić
tylko część marginesów.

38
00:01:48,813 --> 00:01:51,063
Dodajmy trochę luzu
wokół zdjęcia kota,

39
00:01:51,080 --> 00:01:56,750
z prawej strony, i także…

40
00:01:56,762 --> 00:02:01,302
trochę więcej u dołu.

41
00:02:01,302 --> 00:02:03,792
Pozostałe marginesy
mogą być domyślne.

42
00:02:03,792 --> 00:02:06,742
Jest też specjalna wartość marginesu,

43
00:02:06,742 --> 00:02:08,642
która pomoże nam zrobić

44
00:02:08,644 --> 00:02:11,003
coś ciekawego ze stronami.
Popatrzcie,

45
00:02:11,003 --> 00:02:14,234
dodając „div” wokół całej strony.

46
00:02:14,234 --> 00:02:17,464
Nadam jej ID: „container”.

47
00:02:17,464 --> 00:02:21,394
Wstawmy ten znacznik tutaj,

48
00:02:21,394 --> 00:02:25,954
żeby objął wszystko.
Teraz dodamy regułę,

49
00:02:25,954 --> 00:02:29,374
by „div” miało szerokość 400 pikseli

50
00:02:29,374 --> 00:02:33,814
i było wyśrodkowane.

51
00:02:33,814 --> 00:02:37,744
Mogłabym określić margin-left: 100px;
(lewy margines: 100 pikseli),

52
00:02:37,744 --> 00:02:40,754
bo wydaje mi się,
że teraz jest pośrodku,

53
00:02:40,754 --> 00:02:42,584
ale u was może nie być,

54
00:02:42,594 --> 00:02:45,074
jeśli macie większą lub mniejszą
przeglądarkę.

55
00:02:45,079 --> 00:02:46,779
Chodzi o polecenie:

56
00:02:46,861 --> 00:02:49,281
„Daj taki margines, jak trzeba,

57
00:02:49,281 --> 00:02:52,821
równy po obu stronach”.

58
00:02:52,821 --> 00:02:56,341
To właśnie robi „margin: auto;”.

59
00:02:56,341 --> 00:02:57,841
Sposób, by wyśrodkować „div”.

60
00:02:57,841 --> 00:03:01,471
Gdy już jest pośrodku,

61
00:03:01,472 --> 00:03:04,012
wyróżnijmy je jeszcze bardziej,

62
00:03:04,024 --> 00:03:06,304
dodając obramowanie.

63
00:03:06,333 --> 00:03:10,333
Użyjemy własności CSS.

64
00:03:10,363 --> 00:03:13,483
Zróbmy obramowanie czerwone.

65
00:03:13,483 --> 00:03:15,283
Piszemy: „border” i musimy

66
00:03:15,283 --> 00:03:16,943
określić trzy cechy:

67
00:03:16,943 --> 00:03:19,783
grubość, styl i kolor.

68
00:03:19,783 --> 00:03:23,473
Dla cienkiej wpiszę „1 piksel”,

69
00:03:23,473 --> 00:03:25,633
ma być prosta, niewyszukana,

70
00:03:25,639 --> 00:03:28,969
wpiszemy więc „solid”,
a żeby stała się czerwona…

71
00:03:28,969 --> 00:03:31,649
wyświetlę pole wyboru koloru.

72
00:03:31,649 --> 00:03:37,769
Ładna czerwień.
Dobrze. Tak, jak marginesy,

73
00:03:37,769 --> 00:03:39,919
możemy określić obramowanie

74
00:03:39,919 --> 00:03:42,789
np. tylko z jednej strony.

75
00:03:42,798 --> 00:03:46,078
Jeśli chcemy grubą fioletową
krawędź u góry,

76
00:03:46,078 --> 00:03:49,238
dodamy właściwość„border-top:

77
00:03:49,248 --> 00:03:56,538
10px solid purple;”. Super!
Teraz dodajmy ramkę

78
00:03:56,545 --> 00:03:59,785
i pobawmy się jeszcze

79
00:03:59,785 --> 00:04:02,225
stylami krawędzi. Przejdźmy do kota.

80
00:04:02,225 --> 00:04:07,605
Niech będzie 6 pikseli,

81
00:04:07,605 --> 00:04:12,985
kolor „groove red”.
Nie podoba mi się.

82
00:04:12,985 --> 00:04:16,404
Może podwójna?

83
00:04:16,404 --> 00:04:19,185
Spróbujmy ramkę.
Tak, wygląda to jak ramka!

84
00:04:19,185 --> 00:04:22,665
Może dodamy krawędzie

85
00:04:22,665 --> 00:04:25,985
do pola „official info”?
Niech będzie· „border”...

86
00:04:25,985 --> 00:04:28,405
nie za grubo, dwa piksele.

87
00:04:28,405 --> 00:04:31,185
Linia kropkowana. Kolor…

88
00:04:31,200 --> 00:04:35,960
delikatna szarość. Albo nie,

89
00:04:35,960 --> 00:04:38,230
linia przerywana. O to mi chodziło.

90
00:04:38,238 --> 00:04:40,958
Jednak w tych krawędziach

91
00:04:40,958 --> 00:04:42,438
coś mnie trochę martwi.

92
00:04:42,438 --> 00:04:45,018
A raczej - bardzo.

93
00:04:45,018 --> 00:04:48,878
Widzicie, jak tekst pojawił się

94
00:04:48,878 --> 00:04:51,628
przy samym obramowaniu?

95
00:04:51,628 --> 00:04:53,438
I przy oficjalnych informacjach?

96
00:04:53,438 --> 00:04:56,518
Źle to wygląda,

97
00:04:56,518 --> 00:04:59,738
poza tym tekst jest nieczytelny.

98
00:04:59,738 --> 00:05:02,198
Tu przyda się dopełnienie
(ang. padding).

99
00:05:02,198 --> 00:05:03,778
Jeśli elementy mają kolor tła

100
00:05:03,778 --> 00:05:05,392
lub obramowanie, potrzebujemy

101
00:05:05,392 --> 00:05:07,632
dopełnienia, żeby był odstęp

102
00:05:07,632 --> 00:05:10,092
między treścią a krawędziami.

103
00:05:10,106 --> 00:05:13,296
Zróbmy dopełnienie. Niech będzie…

104
00:05:13,315 --> 00:05:17,985
15 pikseli wokoło.

105
00:05:17,991 --> 00:05:21,241
Znacznie lepiej! Dodajmy też

106
00:05:21,241 --> 00:05:23,371
dopełnienie do informacji,

107
00:05:23,372 --> 00:05:27,882
może 6 pikseli. Pięknie.

108
00:05:27,882 --> 00:05:29,362
Obrazom nie jest to potrzebne,

109
00:05:29,363 --> 00:05:31,003
ponieważ dobrze wyglądają

110
00:05:31,012 --> 00:05:33,852
w takich ramkach. I gotowe:

111
00:05:33,852 --> 00:05:36,182
model pola. Margines, obramowanie,

112
00:05:36,182 --> 00:05:38,362
dopełnienie. Użyłam dużych wartości

113
00:05:38,362 --> 00:05:40,392
i jaskrawych kolorów dla przykładu,

114
00:05:40,392 --> 00:05:42,942
ale strona wygląda tandetnie.

115
00:05:42,960 --> 00:05:44,270
Żeby była elegancka

116
00:05:44,270 --> 00:05:46,690
i wyrafinowana,
stosujcie subtelniejsze

117
00:05:46,690 --> 00:05:49,120
odcienie bieli i szarości.

118
00:05:49,120 --> 00:05:50,870
Korzystajcie z tych właściwości.

119
00:05:50,870 --> 00:05:52,710
Wywierają wpływ

120
00:05:52,000 --> 00:05:53,720
na wygląd i styl strony.