0:00:00.360,0:00:02.029
Widzieliśmy już, jak użyć CSS

0:00:02.029,0:00:03.588
do nadania stylu tekstowi.

0:00:04.088,0:00:05.904
Za jego pomocą można też

0:00:05.904,0:00:07.500
zmienić układ strony.

0:00:07.620,0:00:09.148
Przesuwać elementy,

0:00:09.157,0:00:10.187
zmieniać rozmiar,

0:00:10.187,0:00:11.777
nakładać jedne na drugie.

0:00:12.010,0:00:13.551
Ale co właściwie chcemy

0:00:13.551,0:00:14.401
przesuwać?

0:00:14.498,0:00:16.117
Czasami elementy

0:00:16.117,0:00:17.339
już zrobione:

0:00:17.339,0:00:18.812
określony akapit

0:00:18.812,0:00:20.672
czy nagłówek.

0:00:21.231,0:00:22.365
Ale często

0:00:22.445,0:00:24.679
jest to grupa elementów,

0:00:24.679,0:00:26.889
np. fragment tekstu

0:00:27.055,0:00:30.065
albo nagłówek i kilka akapitów.

0:00:31.693,0:00:32.946
Żeby przesuwać je

0:00:32.946,0:00:34.365
razem, jako całość,

0:00:34.365,0:00:36.785
wprowadzimy[br]dwa znaczniki HTML.

0:00:36.805,0:00:39.225
Znaczniki do grupowania.

0:00:39.246,0:00:41.460
Nie mówiliśmy o nich wcześniej,

0:00:41.460,0:00:42.662
bo przydają się

0:00:42.662,0:00:44.210
tylko w połączeniu z CSS.

0:00:44.210,0:00:46.555
Nie mają semantycznej[br]wartości dla przeglądarki.

0:00:47.275,0:00:49.176
Pierwszy to znacznik „span”,

0:00:49.596,0:00:51.516
używany do grupowania

0:00:51.516,0:00:52.756
fragmentów tekstu.

0:00:53.244,0:00:54.193
Chcemy, by słowo

0:00:54.193,0:00:56.503
„kocham” było czerwone.

0:00:57.055,0:00:58.692
Chcemy zmienić kolor słowa,

0:00:58.692,0:00:59.952
nie całego nagłówka.

0:01:00.327,0:01:02.458
Ustawiamy kursor przed „kocham”,

0:01:02.458,0:01:06.138
wpisujemy znacznik[br]startowy „span”.

0:01:06.499,0:01:10.519
Za słowem - znacznik końcowy.

0:01:10.678,0:01:11.644
Zmienimy styl

0:01:11.644,0:01:12.809
tej grupie znaków.

0:01:13.008,0:01:14.643
Można zrobić regułę i kolorować

0:01:14.723,0:01:15.680
wszystkie „span”,

0:01:15.780,0:01:18.558
ale może nie wszystkie[br]chcemy w czerwieni.

0:01:18.558,0:01:19.980
Nadajmy temu fragmentowi

0:01:20.107,0:01:21.980
klasę „lovey-dovey”[br](słodziutkie)

0:01:25.086,0:01:29.053
i napiszmy regułę[br]tylko dla elementów

0:01:29.053,0:01:30.370
z tej klasy.

0:01:30.388,0:01:33.755
Zatem - lovey-dovey,[br]kolor: czerwień.

0:01:34.613,0:01:36.703
Patrzcie, jaki słodki zrobił się tekst!

0:01:38.093,0:01:39.667
„Span” służy do grupowania

0:01:39.667,0:01:41.717
fragmentów tekstu, a jak zebrać

0:01:41.727,0:01:43.187
kilka elementów?

0:01:43.507,0:01:45.247
Znacznikiem „div”.

0:01:45.680,0:01:46.747
Chcemy pogrupować

0:01:46.747,0:01:47.717
część z dołu.

0:01:48.195,0:01:49.464
Nagłówek informacji

0:01:49.464,0:01:51.174
i akapity ze zdjęciem.

0:01:51.743,0:01:52.714
W tym celu

0:01:52.714,0:01:58.129
ustawię kursor przed „h3”[br]i wpiszę znacznik

0:01:58.129,0:01:59.389
startowy „div”.

0:01:59.859,0:02:02.259
Przejdę do ostatniego akapitu

0:02:02.690,0:02:04.620
i dodam znacznik końcowy.

0:02:05.467,0:02:07.847
Mamy już „div”, teraz styl.

0:02:08.509,0:02:09.568
Aby to zrobić,

0:02:09.568,0:02:11.426
nadam ID.

0:02:11.426,0:02:13.516
„Official-info”[br](informacje oficjalne).

0:02:15.117,0:02:16.417
I dodam regułę.

0:02:16.422,0:02:21.102
Mam: #official-info i tło.

0:02:22.275,0:02:23.715
Dajmy ładną szarość.

0:02:23.884,0:02:26.934
Wybierzmy… tę. Dobrze.

0:02:27.133,0:02:28.646
Jak widać, „div” stało się

0:02:28.646,0:02:30.841
szarym polem ze wszystkimi

0:02:30.841,0:02:31.681
elementami.

0:02:31.772,0:02:34.267
Byłoby inaczej, gdybyśmy każdemu

0:02:34.267,0:02:35.947
nadali szare tło oddzielnie.

0:02:35.998,0:02:38.228
Wtedy przerwa między elementami

0:02:38.228,0:02:39.308
nie byłaby szara.

0:02:39.520,0:02:41.120
Trzeba użyć znacznika „div”,

0:02:41.129,0:02:42.909
żeby objąć wszystko.

0:02:44.708,0:02:46.185
„Span” służy do

0:02:46.185,0:02:47.735
grupowania tekstu,

0:02:48.303,0:02:50.759
natomiast „div”

0:02:50.759,0:02:52.269
do grupowania elementów.

0:02:52.478,0:02:54.718
Można je rozróżnić także inaczej.

0:02:55.451,0:02:56.854
W świecie CSS

0:02:56.854,0:02:58.104
są dwa rodzaje pól.

0:02:58.412,0:03:00.232
Śródliniowe i blokowe.

0:03:00.499,0:03:03.409
Po elemencie śródliniowym[br]nie ma nowego wiersza.

0:03:03.570,0:03:06.726
Wiele elementów[br]będzie w jednym wierszu.

0:03:06.726,0:03:08.751
Omawialiśmy przykłady

0:03:08.751,0:03:11.651
obrazów.

0:03:11.832,0:03:13.432
Widzicie, jak obraz

0:03:13.451,0:03:16.431
wchodzi w tekst obok.

0:03:16.616,0:03:18.326
Po nim nie ma nowego wiersza.

0:03:18.657,0:03:21.887
Po elemencie blokowym[br]jest nowy wiersz.

0:03:21.912,0:03:24.602
Tak jest przy większości[br]znaczników HTML.

0:03:24.818,0:03:26.978
Spójrzcie na przykłady na stronie.

0:03:27.041,0:03:30.281
Nagłówki, akapity, lista.

0:03:30.799,0:03:33.699
Przeglądarka wstawia nowe wiersze,

0:03:33.732,0:03:36.152
nie musicie wpisywać znacznika „br”.

0:03:37.027,0:03:39.039
Co to ma wspólnego ze „span”

0:03:39.039,0:03:39.727
i „div”?

0:03:39.835,0:03:43.203
„Span” tworzy element śródliniowy,

0:03:43.203,0:03:47.123
a „div” - element blokowy.

0:03:47.252,0:03:49.492
Czyli jeśli dodacie „div”

0:03:49.492,0:03:53.432
i nie określicie innego stylu,

0:03:53.940,0:03:56.270
to przeglądarka potraktuje[br]tę część strony

0:03:56.270,0:03:58.145
jak blok.

0:03:58.145,0:04:00.534
Fragment tekstu w znacznikach „div”

0:04:00.534,0:04:02.984
ma nowe wiersze z przodu i z tyłu.

0:04:02.998,0:04:05.495
Może tego właśnie chcecie.

0:04:05.495,0:04:07.525
Pamiętajcie tylko o różnicy.

0:04:07.553,0:04:09.383
Oglądajcie dalej. Jeszcze dużo

0:04:09.395,0:04:10.885
zrobimy ze znacznikami!

0:04:10.885,0:04:12.631
Zwłaszcza z potężnym „div”.