WEBVTT

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

00:00:02.029 --> 00:00:03.588
do nadania stylu tekstowi.

00:00:04.088 --> 00:00:05.904
Za jego pomocą można też

00:00:05.904 --> 00:00:07.500
zmienić układ strony.

00:00:07.620 --> 00:00:09.148
Przesuwać elementy,

00:00:09.157 --> 00:00:10.187
zmieniać rozmiar,

00:00:10.187 --> 00:00:11.777
nakładać jedne na drugie.

00:00:12.010 --> 00:00:13.551
Ale co właściwie chcemy

00:00:13.551 --> 00:00:14.401
przesuwać?

00:00:14.498 --> 00:00:16.117
Czasami elementy

00:00:16.117 --> 00:00:17.339
już zrobione:

00:00:17.339 --> 00:00:18.812
określony akapit

00:00:18.812 --> 00:00:20.672
czy nagłówek.

00:00:21.231 --> 00:00:22.365
Ale często

00:00:22.445 --> 00:00:24.679
jest to grupa elementów,

00:00:24.679 --> 00:00:26.889
np. fragment tekstu

00:00:27.055 --> 00:00:30.065
albo nagłówek i kilka akapitów.

00:00:31.693 --> 00:00:32.946
Żeby przesuwać je

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

00:00:34.365 --> 00:00:36.785
wprowadzimy
dwa znaczniki HTML.

00:00:36.805 --> 00:00:39.225
Znaczniki do grupowania.

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

00:00:41.460 --> 00:00:42.662
bo przydają się

00:00:42.662 --> 00:00:44.210
tylko w połączeniu z CSS.

00:00:44.210 --> 00:00:46.555
Nie mają semantycznej
wartości dla przeglądarki.

00:00:47.275 --> 00:00:49.176
Pierwszy to znacznik „span”,

00:00:49.596 --> 00:00:51.516
używany do grupowania

00:00:51.516 --> 00:00:52.756
fragmentów tekstu.

00:00:53.244 --> 00:00:54.193
Chcemy, by słowo

00:00:54.193 --> 00:00:56.503
„kocham” było czerwone.

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

00:00:58.692 --> 00:00:59.952
nie całego nagłówka.

00:01:00.327 --> 00:01:02.458
Ustawiamy kursor przed „kocham”,

00:01:02.458 --> 00:01:06.138
wpisujemy znacznik
startowy „span”.

00:01:06.499 --> 00:01:10.519
Za słowem - znacznik końcowy.

00:01:10.678 --> 00:01:11.644
Zmienimy styl

00:01:11.644 --> 00:01:12.809
tej grupie znaków.

00:01:13.008 --> 00:01:14.643
Można zrobić regułę i kolorować

00:01:14.723 --> 00:01:15.680
wszystkie „span”,

00:01:15.780 --> 00:01:18.558
ale może nie wszystkie
chcemy w czerwieni.

00:01:18.558 --> 00:01:19.980
Nadajmy temu fragmentowi

00:01:20.107 --> 00:01:21.980
klasę „lovey-dovey”
(słodziutkie)

00:01:25.086 --> 00:01:29.053
i napiszmy regułę
tylko dla elementów

00:01:29.053 --> 00:01:30.370
z tej klasy.

00:01:30.388 --> 00:01:33.755
Zatem - lovey-dovey,
kolor: czerwień.

00:01:34.613 --> 00:01:36.703
Patrzcie, jaki słodki zrobił się tekst!

00:01:38.093 --> 00:01:39.667
„Span” służy do grupowania

00:01:39.667 --> 00:01:41.717
fragmentów tekstu, a jak zebrać

00:01:41.727 --> 00:01:43.187
kilka elementów?

00:01:43.507 --> 00:01:45.247
Znacznikiem „div”.

00:01:45.680 --> 00:01:46.747
Chcemy pogrupować

00:01:46.747 --> 00:01:47.717
część z dołu.

00:01:48.195 --> 00:01:49.464
Nagłówek informacji

00:01:49.464 --> 00:01:51.174
i akapity ze zdjęciem.

00:01:51.743 --> 00:01:52.714
W tym celu

00:01:52.714 --> 00:01:58.129
ustawię kursor przed „h3”
i wpiszę znacznik

00:01:58.129 --> 00:01:59.389
startowy „div”.

00:01:59.859 --> 00:02:02.259
Przejdę do ostatniego akapitu

00:02:02.690 --> 00:02:04.620
i dodam znacznik końcowy.

00:02:05.467 --> 00:02:07.847
Mamy już „div”, teraz styl.

00:02:08.509 --> 00:02:09.568
Aby to zrobić,

00:02:09.568 --> 00:02:11.426
nadam ID.

00:02:11.426 --> 00:02:13.516
„Official-info”
(informacje oficjalne).

00:02:15.117 --> 00:02:16.417
I dodam regułę.

00:02:16.422 --> 00:02:21.102
Mam: #official-info i tło.

00:02:22.275 --> 00:02:23.715
Dajmy ładną szarość.

00:02:23.884 --> 00:02:26.934
Wybierzmy… tę. Dobrze.

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

00:02:28.646 --> 00:02:30.841
szarym polem ze wszystkimi

00:02:30.841 --> 00:02:31.681
elementami.

00:02:31.772 --> 00:02:34.267
Byłoby inaczej, gdybyśmy każdemu

00:02:34.267 --> 00:02:35.947
nadali szare tło oddzielnie.

00:02:35.998 --> 00:02:38.228
Wtedy przerwa między elementami

00:02:38.228 --> 00:02:39.308
nie byłaby szara.

00:02:39.520 --> 00:02:41.120
Trzeba użyć znacznika „div”,

00:02:41.129 --> 00:02:42.909
żeby objąć wszystko.

00:02:44.708 --> 00:02:46.185
„Span” służy do

00:02:46.185 --> 00:02:47.735
grupowania tekstu,

00:02:48.303 --> 00:02:50.759
natomiast „div”

00:02:50.759 --> 00:02:52.269
do grupowania elementów.

00:02:52.478 --> 00:02:54.718
Można je rozróżnić także inaczej.

00:02:55.451 --> 00:02:56.854
W świecie CSS

00:02:56.854 --> 00:02:58.104
są dwa rodzaje pól.

00:02:58.412 --> 00:03:00.232
Śródliniowe i blokowe.

00:03:00.499 --> 00:03:03.409
Po elemencie śródliniowym
nie ma nowego wiersza.

00:03:03.570 --> 00:03:06.726
Wiele elementów
będzie w jednym wierszu.

00:03:06.726 --> 00:03:08.751
Omawialiśmy przykłady

00:03:08.751 --> 00:03:11.651
obrazów.

00:03:11.832 --> 00:03:13.432
Widzicie, jak obraz

00:03:13.451 --> 00:03:16.431
wchodzi w tekst obok.

00:03:16.616 --> 00:03:18.326
Po nim nie ma nowego wiersza.

00:03:18.657 --> 00:03:21.887
Po elemencie blokowym
jest nowy wiersz.

00:03:21.912 --> 00:03:24.602
Tak jest przy większości
znaczników HTML.

00:03:24.818 --> 00:03:26.978
Spójrzcie na przykłady na stronie.

00:03:27.041 --> 00:03:30.281
Nagłówki, akapity, lista.

00:03:30.799 --> 00:03:33.699
Przeglądarka wstawia nowe wiersze,

00:03:33.732 --> 00:03:36.152
nie musicie wpisywać znacznika „br”.

00:03:37.027 --> 00:03:39.039
Co to ma wspólnego ze „span”

00:03:39.039 --> 00:03:39.727
i „div”?

00:03:39.835 --> 00:03:43.203
„Span” tworzy element śródliniowy,

00:03:43.203 --> 00:03:47.123
a „div” - element blokowy.

00:03:47.252 --> 00:03:49.492
Czyli jeśli dodacie „div”

00:03:49.492 --> 00:03:53.432
i nie określicie innego stylu,

00:03:53.940 --> 00:03:56.270
to przeglądarka potraktuje
tę część strony

00:03:56.270 --> 00:03:58.145
jak blok.

00:03:58.145 --> 00:04:00.534
Fragment tekstu w znacznikach „div”

00:04:00.534 --> 00:04:02.984
ma nowe wiersze z przodu i z tyłu.

00:04:02.998 --> 00:04:05.495
Może tego właśnie chcecie.

00:04:05.495 --> 00:04:07.525
Pamiętajcie tylko o różnicy.

00:04:07.553 --> 00:04:09.383
Oglądajcie dalej. Jeszcze dużo

00:04:09.395 --> 00:04:10.885
zrobimy ze znacznikami!

00:04:10.885 --> 00:04:12.631
Zwłaszcza z potężnym „div”.