1
00:00:00,360 --> 00:00:02,029
Widzieliśmy już, jak użyć CSS

2
00:00:02,029 --> 00:00:03,588
do nadania stylu tekstowi.

3
00:00:04,088 --> 00:00:05,904
Za jego pomocą można też

4
00:00:05,904 --> 00:00:07,500
zmienić układ strony.

5
00:00:07,620 --> 00:00:09,148
Przesuwać elementy,

6
00:00:09,157 --> 00:00:10,187
zmieniać rozmiar,

7
00:00:10,187 --> 00:00:11,777
nakładać jedne na drugie.

8
00:00:12,010 --> 00:00:13,551
Ale co właściwie chcemy

9
00:00:13,551 --> 00:00:14,401
przesuwać?

10
00:00:14,498 --> 00:00:16,117
Czasami elementy

11
00:00:16,117 --> 00:00:17,339
już zrobione:

12
00:00:17,339 --> 00:00:18,812
określony akapit

13
00:00:18,812 --> 00:00:20,672
czy nagłówek.

14
00:00:21,231 --> 00:00:22,365
Ale często

15
00:00:22,445 --> 00:00:24,679
jest to grupa elementów,

16
00:00:24,679 --> 00:00:26,889
np. fragment tekstu

17
00:00:27,055 --> 00:00:30,065
albo nagłówek i kilka akapitów.

18
00:00:31,693 --> 00:00:32,946
Żeby przesuwać je

19
00:00:32,946 --> 00:00:34,365
razem, jako całość,

20
00:00:34,365 --> 00:00:36,785
wprowadzimy
dwa znaczniki HTML.

21
00:00:36,805 --> 00:00:39,225
Znaczniki do grupowania.

22
00:00:39,246 --> 00:00:41,460
Nie mówiliśmy o nich wcześniej,

23
00:00:41,460 --> 00:00:42,662
bo przydają się

24
00:00:42,662 --> 00:00:44,210
tylko w połączeniu z CSS.

25
00:00:44,210 --> 00:00:46,555
Nie mają semantycznej
wartości dla przeglądarki.

26
00:00:47,275 --> 00:00:49,176
Pierwszy to znacznik „span”,

27
00:00:49,596 --> 00:00:51,516
używany do grupowania

28
00:00:51,516 --> 00:00:52,756
fragmentów tekstu.

29
00:00:53,244 --> 00:00:54,193
Chcemy, by słowo

30
00:00:54,193 --> 00:00:56,503
„kocham” było czerwone.

31
00:00:57,055 --> 00:00:58,692
Chcemy zmienić kolor słowa,

32
00:00:58,692 --> 00:00:59,952
nie całego nagłówka.

33
00:01:00,327 --> 00:01:02,458
Ustawiamy kursor przed „kocham”,

34
00:01:02,458 --> 00:01:06,138
wpisujemy znacznik
startowy „span”.

35
00:01:06,499 --> 00:01:10,519
Za słowem - znacznik końcowy.

36
00:01:10,678 --> 00:01:11,644
Zmienimy styl

37
00:01:11,644 --> 00:01:12,809
tej grupie znaków.

38
00:01:13,008 --> 00:01:14,643
Można zrobić regułę i kolorować

39
00:01:14,723 --> 00:01:15,680
wszystkie „span”,

40
00:01:15,780 --> 00:01:18,558
ale może nie wszystkie
chcemy w czerwieni.

41
00:01:18,558 --> 00:01:19,980
Nadajmy temu fragmentowi

42
00:01:20,107 --> 00:01:21,980
klasę „lovey-dovey”
(słodziutkie)

43
00:01:25,086 --> 00:01:29,053
i napiszmy regułę
tylko dla elementów

44
00:01:29,053 --> 00:01:30,370
z tej klasy.

45
00:01:30,388 --> 00:01:33,755
Zatem - lovey-dovey,
kolor: czerwień.

46
00:01:34,613 --> 00:01:36,703
Patrzcie, jaki słodki zrobił się tekst!

47
00:01:38,093 --> 00:01:39,667
„Span” służy do grupowania

48
00:01:39,667 --> 00:01:41,717
fragmentów tekstu, a jak zebrać

49
00:01:41,727 --> 00:01:43,187
kilka elementów?

50
00:01:43,507 --> 00:01:45,247
Znacznikiem „div”.

51
00:01:45,680 --> 00:01:46,747
Chcemy pogrupować

52
00:01:46,747 --> 00:01:47,717
część z dołu.

53
00:01:48,195 --> 00:01:49,464
Nagłówek informacji

54
00:01:49,464 --> 00:01:51,174
i akapity ze zdjęciem.

55
00:01:51,743 --> 00:01:52,714
W tym celu

56
00:01:52,714 --> 00:01:58,129
ustawię kursor przed „h3”
i wpiszę znacznik

57
00:01:58,129 --> 00:01:59,389
startowy „div”.

58
00:01:59,859 --> 00:02:02,259
Przejdę do ostatniego akapitu

59
00:02:02,690 --> 00:02:04,620
i dodam znacznik końcowy.

60
00:02:05,467 --> 00:02:07,847
Mamy już „div”, teraz styl.

61
00:02:08,509 --> 00:02:09,568
Aby to zrobić,

62
00:02:09,568 --> 00:02:11,426
nadam ID.

63
00:02:11,426 --> 00:02:13,516
„Official-info”
(informacje oficjalne).

64
00:02:15,117 --> 00:02:16,417
I dodam regułę.

65
00:02:16,422 --> 00:02:21,102
Mam: #official-info i tło.

66
00:02:22,275 --> 00:02:23,715
Dajmy ładną szarość.

67
00:02:23,884 --> 00:02:26,934
Wybierzmy… tę. Dobrze.

68
00:02:27,133 --> 00:02:28,646
Jak widać, „div” stało się

69
00:02:28,646 --> 00:02:30,841
szarym polem ze wszystkimi

70
00:02:30,841 --> 00:02:31,681
elementami.

71
00:02:31,772 --> 00:02:34,267
Byłoby inaczej, gdybyśmy każdemu

72
00:02:34,267 --> 00:02:35,947
nadali szare tło oddzielnie.

73
00:02:35,998 --> 00:02:38,228
Wtedy przerwa między elementami

74
00:02:38,228 --> 00:02:39,308
nie byłaby szara.

75
00:02:39,520 --> 00:02:41,120
Trzeba użyć znacznika „div”,

76
00:02:41,129 --> 00:02:42,909
żeby objąć wszystko.

77
00:02:44,708 --> 00:02:46,185
„Span” służy do

78
00:02:46,185 --> 00:02:47,735
grupowania tekstu,

79
00:02:48,303 --> 00:02:50,759
natomiast „div”

80
00:02:50,759 --> 00:02:52,269
do grupowania elementów.

81
00:02:52,478 --> 00:02:54,718
Można je rozróżnić także inaczej.

82
00:02:55,451 --> 00:02:56,854
W świecie CSS

83
00:02:56,854 --> 00:02:58,104
są dwa rodzaje pól.

84
00:02:58,412 --> 00:03:00,232
Śródliniowe i blokowe.

85
00:03:00,499 --> 00:03:03,409
Po elemencie śródliniowym
nie ma nowego wiersza.

86
00:03:03,570 --> 00:03:06,726
Wiele elementów
będzie w jednym wierszu.

87
00:03:06,726 --> 00:03:08,751
Omawialiśmy przykłady

88
00:03:08,751 --> 00:03:11,651
obrazów.

89
00:03:11,832 --> 00:03:13,432
Widzicie, jak obraz

90
00:03:13,451 --> 00:03:16,431
wchodzi w tekst obok.

91
00:03:16,616 --> 00:03:18,326
Po nim nie ma nowego wiersza.

92
00:03:18,657 --> 00:03:21,887
Po elemencie blokowym
jest nowy wiersz.

93
00:03:21,912 --> 00:03:24,602
Tak jest przy większości
znaczników HTML.

94
00:03:24,818 --> 00:03:26,978
Spójrzcie na przykłady na stronie.

95
00:03:27,041 --> 00:03:30,281
Nagłówki, akapity, lista.

96
00:03:30,799 --> 00:03:33,699
Przeglądarka wstawia nowe wiersze,

97
00:03:33,732 --> 00:03:36,152
nie musicie wpisywać znacznika „br”.

98
00:03:37,027 --> 00:03:39,039
Co to ma wspólnego ze „span”

99
00:03:39,039 --> 00:03:39,727
i „div”?

100
00:03:39,835 --> 00:03:43,203
„Span” tworzy element śródliniowy,

101
00:03:43,203 --> 00:03:47,123
a „div” - element blokowy.

102
00:03:47,252 --> 00:03:49,492
Czyli jeśli dodacie „div”

103
00:03:49,492 --> 00:03:53,432
i nie określicie innego stylu,

104
00:03:53,940 --> 00:03:56,270
to przeglądarka potraktuje
tę część strony

105
00:03:56,270 --> 00:03:58,145
jak blok.

106
00:03:58,145 --> 00:04:00,534
Fragment tekstu w znacznikach „div”

107
00:04:00,534 --> 00:04:02,984
ma nowe wiersze z przodu i z tyłu.

108
00:04:02,998 --> 00:04:05,495
Może tego właśnie chcecie.

109
00:04:05,495 --> 00:04:07,525
Pamiętajcie tylko o różnicy.

110
00:04:07,553 --> 00:04:09,383
Oglądajcie dalej. Jeszcze dużo

111
00:04:09,395 --> 00:04:10,885
zrobimy ze znacznikami!

112
00:04:10,885 --> 00:04:12,631
Zwłaszcza z potężnym „div”.