[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:02.03,Default,,0000,0000,0000,,Widzieliśmy już, jak użyć CSS
Dialogue: 0,0:00:02.03,0:00:03.59,Default,,0000,0000,0000,,do nadania stylu tekstowi.
Dialogue: 0,0:00:04.09,0:00:05.90,Default,,0000,0000,0000,,Za jego pomocą można też
Dialogue: 0,0:00:05.90,0:00:07.50,Default,,0000,0000,0000,,zmienić układ strony.
Dialogue: 0,0:00:07.62,0:00:09.15,Default,,0000,0000,0000,,Przesuwać elementy,
Dialogue: 0,0:00:09.16,0:00:10.19,Default,,0000,0000,0000,,zmieniać rozmiar,
Dialogue: 0,0:00:10.19,0:00:11.78,Default,,0000,0000,0000,,nakładać jedne na drugie.
Dialogue: 0,0:00:12.01,0:00:13.55,Default,,0000,0000,0000,,Ale co właściwie chcemy
Dialogue: 0,0:00:13.55,0:00:14.40,Default,,0000,0000,0000,,przesuwać?
Dialogue: 0,0:00:14.50,0:00:16.12,Default,,0000,0000,0000,,Czasami elementy
Dialogue: 0,0:00:16.12,0:00:17.34,Default,,0000,0000,0000,,już zrobione:
Dialogue: 0,0:00:17.34,0:00:18.81,Default,,0000,0000,0000,,określony akapit
Dialogue: 0,0:00:18.81,0:00:20.67,Default,,0000,0000,0000,,czy nagłówek.
Dialogue: 0,0:00:21.23,0:00:22.36,Default,,0000,0000,0000,,Ale często
Dialogue: 0,0:00:22.44,0:00:24.68,Default,,0000,0000,0000,,jest to grupa elementów,
Dialogue: 0,0:00:24.68,0:00:26.89,Default,,0000,0000,0000,,np. fragment tekstu
Dialogue: 0,0:00:27.06,0:00:30.06,Default,,0000,0000,0000,,albo nagłówek i kilka akapitów.
Dialogue: 0,0:00:31.69,0:00:32.95,Default,,0000,0000,0000,,Żeby przesuwać je
Dialogue: 0,0:00:32.95,0:00:34.36,Default,,0000,0000,0000,,razem, jako całość,
Dialogue: 0,0:00:34.36,0:00:36.78,Default,,0000,0000,0000,,wprowadzimy\Ndwa znaczniki HTML.
Dialogue: 0,0:00:36.80,0:00:39.22,Default,,0000,0000,0000,,Znaczniki do grupowania.
Dialogue: 0,0:00:39.25,0:00:41.46,Default,,0000,0000,0000,,Nie mówiliśmy o nich wcześniej,
Dialogue: 0,0:00:41.46,0:00:42.66,Default,,0000,0000,0000,,bo przydają się
Dialogue: 0,0:00:42.66,0:00:44.21,Default,,0000,0000,0000,,tylko w połączeniu z CSS.
Dialogue: 0,0:00:44.21,0:00:46.56,Default,,0000,0000,0000,,Nie mają semantycznej\Nwartości dla przeglądarki.
Dialogue: 0,0:00:47.28,0:00:49.18,Default,,0000,0000,0000,,Pierwszy to znacznik „span”,
Dialogue: 0,0:00:49.60,0:00:51.52,Default,,0000,0000,0000,,używany do grupowania
Dialogue: 0,0:00:51.52,0:00:52.76,Default,,0000,0000,0000,,fragmentów tekstu.
Dialogue: 0,0:00:53.24,0:00:54.19,Default,,0000,0000,0000,,Chcemy, by słowo
Dialogue: 0,0:00:54.19,0:00:56.50,Default,,0000,0000,0000,,„kocham” było czerwone.
Dialogue: 0,0:00:57.06,0:00:58.69,Default,,0000,0000,0000,,Chcemy zmienić kolor słowa,
Dialogue: 0,0:00:58.69,0:00:59.95,Default,,0000,0000,0000,,nie całego nagłówka.
Dialogue: 0,0:01:00.33,0:01:02.46,Default,,0000,0000,0000,,Ustawiamy kursor przed „kocham”,
Dialogue: 0,0:01:02.46,0:01:06.14,Default,,0000,0000,0000,,wpisujemy znacznik\Nstartowy „span”.
Dialogue: 0,0:01:06.50,0:01:10.52,Default,,0000,0000,0000,,Za słowem - znacznik końcowy.
Dialogue: 0,0:01:10.68,0:01:11.64,Default,,0000,0000,0000,,Zmienimy styl
Dialogue: 0,0:01:11.64,0:01:12.81,Default,,0000,0000,0000,,tej grupie znaków.
Dialogue: 0,0:01:13.01,0:01:14.64,Default,,0000,0000,0000,,Można zrobić regułę i kolorować
Dialogue: 0,0:01:14.72,0:01:15.68,Default,,0000,0000,0000,,wszystkie „span”,
Dialogue: 0,0:01:15.78,0:01:18.56,Default,,0000,0000,0000,,ale może nie wszystkie\Nchcemy w czerwieni.
Dialogue: 0,0:01:18.56,0:01:19.98,Default,,0000,0000,0000,,Nadajmy temu fragmentowi
Dialogue: 0,0:01:20.11,0:01:21.98,Default,,0000,0000,0000,,klasę „lovey-dovey”\N(słodziutkie)
Dialogue: 0,0:01:25.09,0:01:29.05,Default,,0000,0000,0000,,i napiszmy regułę\Ntylko dla elementów
Dialogue: 0,0:01:29.05,0:01:30.37,Default,,0000,0000,0000,,z tej klasy.
Dialogue: 0,0:01:30.39,0:01:33.76,Default,,0000,0000,0000,,Zatem - lovey-dovey,\Nkolor: czerwień.
Dialogue: 0,0:01:34.61,0:01:36.70,Default,,0000,0000,0000,,Patrzcie, jaki słodki zrobił się tekst!
Dialogue: 0,0:01:38.09,0:01:39.67,Default,,0000,0000,0000,,„Span” służy do grupowania
Dialogue: 0,0:01:39.67,0:01:41.72,Default,,0000,0000,0000,,fragmentów tekstu, a jak zebrać
Dialogue: 0,0:01:41.73,0:01:43.19,Default,,0000,0000,0000,,kilka elementów?
Dialogue: 0,0:01:43.51,0:01:45.25,Default,,0000,0000,0000,,Znacznikiem „div”.
Dialogue: 0,0:01:45.68,0:01:46.75,Default,,0000,0000,0000,,Chcemy pogrupować
Dialogue: 0,0:01:46.75,0:01:47.72,Default,,0000,0000,0000,,część z dołu.
Dialogue: 0,0:01:48.20,0:01:49.46,Default,,0000,0000,0000,,Nagłówek informacji
Dialogue: 0,0:01:49.46,0:01:51.17,Default,,0000,0000,0000,,i akapity ze zdjęciem.
Dialogue: 0,0:01:51.74,0:01:52.71,Default,,0000,0000,0000,,W tym celu
Dialogue: 0,0:01:52.71,0:01:58.13,Default,,0000,0000,0000,,ustawię kursor przed „h3”\Ni wpiszę znacznik
Dialogue: 0,0:01:58.13,0:01:59.39,Default,,0000,0000,0000,,startowy „div”.
Dialogue: 0,0:01:59.86,0:02:02.26,Default,,0000,0000,0000,,Przejdę do ostatniego akapitu
Dialogue: 0,0:02:02.69,0:02:04.62,Default,,0000,0000,0000,,i dodam znacznik końcowy.
Dialogue: 0,0:02:05.47,0:02:07.85,Default,,0000,0000,0000,,Mamy już „div”, teraz styl.
Dialogue: 0,0:02:08.51,0:02:09.57,Default,,0000,0000,0000,,Aby to zrobić,
Dialogue: 0,0:02:09.57,0:02:11.43,Default,,0000,0000,0000,,nadam ID.
Dialogue: 0,0:02:11.43,0:02:13.52,Default,,0000,0000,0000,,„Official-info”\N(informacje oficjalne).
Dialogue: 0,0:02:15.12,0:02:16.42,Default,,0000,0000,0000,,I dodam regułę.
Dialogue: 0,0:02:16.42,0:02:21.10,Default,,0000,0000,0000,,Mam: #official-info i tło.
Dialogue: 0,0:02:22.28,0:02:23.72,Default,,0000,0000,0000,,Dajmy ładną szarość.
Dialogue: 0,0:02:23.88,0:02:26.93,Default,,0000,0000,0000,,Wybierzmy… tę. Dobrze.
Dialogue: 0,0:02:27.13,0:02:28.65,Default,,0000,0000,0000,,Jak widać, „div” stało się
Dialogue: 0,0:02:28.65,0:02:30.84,Default,,0000,0000,0000,,szarym polem ze wszystkimi
Dialogue: 0,0:02:30.84,0:02:31.68,Default,,0000,0000,0000,,elementami.
Dialogue: 0,0:02:31.77,0:02:34.27,Default,,0000,0000,0000,,Byłoby inaczej, gdybyśmy każdemu
Dialogue: 0,0:02:34.27,0:02:35.95,Default,,0000,0000,0000,,nadali szare tło oddzielnie.
Dialogue: 0,0:02:35.100,0:02:38.23,Default,,0000,0000,0000,,Wtedy przerwa między elementami
Dialogue: 0,0:02:38.23,0:02:39.31,Default,,0000,0000,0000,,nie byłaby szara.
Dialogue: 0,0:02:39.52,0:02:41.12,Default,,0000,0000,0000,,Trzeba użyć znacznika „div”,
Dialogue: 0,0:02:41.13,0:02:42.91,Default,,0000,0000,0000,,żeby objąć wszystko.
Dialogue: 0,0:02:44.71,0:02:46.18,Default,,0000,0000,0000,,„Span” służy do
Dialogue: 0,0:02:46.18,0:02:47.74,Default,,0000,0000,0000,,grupowania tekstu,
Dialogue: 0,0:02:48.30,0:02:50.76,Default,,0000,0000,0000,,natomiast „div”
Dialogue: 0,0:02:50.76,0:02:52.27,Default,,0000,0000,0000,,do grupowania elementów.
Dialogue: 0,0:02:52.48,0:02:54.72,Default,,0000,0000,0000,,Można je rozróżnić także inaczej.
Dialogue: 0,0:02:55.45,0:02:56.85,Default,,0000,0000,0000,,W świecie CSS
Dialogue: 0,0:02:56.85,0:02:58.10,Default,,0000,0000,0000,,są dwa rodzaje pól.
Dialogue: 0,0:02:58.41,0:03:00.23,Default,,0000,0000,0000,,Śródliniowe i blokowe.
Dialogue: 0,0:03:00.50,0:03:03.41,Default,,0000,0000,0000,,Po elemencie śródliniowym\Nnie ma nowego wiersza.
Dialogue: 0,0:03:03.57,0:03:06.73,Default,,0000,0000,0000,,Wiele elementów\Nbędzie w jednym wierszu.
Dialogue: 0,0:03:06.73,0:03:08.75,Default,,0000,0000,0000,,Omawialiśmy przykłady
Dialogue: 0,0:03:08.75,0:03:11.65,Default,,0000,0000,0000,,obrazów.
Dialogue: 0,0:03:11.83,0:03:13.43,Default,,0000,0000,0000,,Widzicie, jak obraz
Dialogue: 0,0:03:13.45,0:03:16.43,Default,,0000,0000,0000,,wchodzi w tekst obok.
Dialogue: 0,0:03:16.62,0:03:18.33,Default,,0000,0000,0000,,Po nim nie ma nowego wiersza.
Dialogue: 0,0:03:18.66,0:03:21.89,Default,,0000,0000,0000,,Po elemencie blokowym\Njest nowy wiersz.
Dialogue: 0,0:03:21.91,0:03:24.60,Default,,0000,0000,0000,,Tak jest przy większości\Nznaczników HTML.
Dialogue: 0,0:03:24.82,0:03:26.98,Default,,0000,0000,0000,,Spójrzcie na przykłady na stronie.
Dialogue: 0,0:03:27.04,0:03:30.28,Default,,0000,0000,0000,,Nagłówki, akapity, lista.
Dialogue: 0,0:03:30.80,0:03:33.70,Default,,0000,0000,0000,,Przeglądarka wstawia nowe wiersze,
Dialogue: 0,0:03:33.73,0:03:36.15,Default,,0000,0000,0000,,nie musicie wpisywać znacznika „br”.
Dialogue: 0,0:03:37.03,0:03:39.04,Default,,0000,0000,0000,,Co to ma wspólnego ze „span”
Dialogue: 0,0:03:39.04,0:03:39.73,Default,,0000,0000,0000,,i „div”?
Dialogue: 0,0:03:39.84,0:03:43.20,Default,,0000,0000,0000,,„Span” tworzy element śródliniowy,
Dialogue: 0,0:03:43.20,0:03:47.12,Default,,0000,0000,0000,,a „div” - element blokowy.
Dialogue: 0,0:03:47.25,0:03:49.49,Default,,0000,0000,0000,,Czyli jeśli dodacie „div”
Dialogue: 0,0:03:49.49,0:03:53.43,Default,,0000,0000,0000,,i nie określicie innego stylu,
Dialogue: 0,0:03:53.94,0:03:56.27,Default,,0000,0000,0000,,to przeglądarka potraktuje\Ntę część strony
Dialogue: 0,0:03:56.27,0:03:58.14,Default,,0000,0000,0000,,jak blok.
Dialogue: 0,0:03:58.14,0:04:00.53,Default,,0000,0000,0000,,Fragment tekstu w znacznikach „div”
Dialogue: 0,0:04:00.53,0:04:02.98,Default,,0000,0000,0000,,ma nowe wiersze z przodu i z tyłu.
Dialogue: 0,0:04:02.100,0:04:05.50,Default,,0000,0000,0000,,Może tego właśnie chcecie.
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,Pamiętajcie tylko o różnicy.
Dialogue: 0,0:04:07.55,0:04:09.38,Default,,0000,0000,0000,,Oglądajcie dalej. Jeszcze dużo
Dialogue: 0,0:04:09.40,0:04:10.88,Default,,0000,0000,0000,,zrobimy ze znacznikami!
Dialogue: 0,0:04:10.88,0:04:12.63,Default,,0000,0000,0000,,Zwłaszcza z potężnym „div”.