[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,Dużo już zrobiliśmy\Nz selektorami CSS:
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,wybieramy elementy\Nwedług znacznika, ID i klasy.
Dialogue: 0,0:00:08.29,0:00:11.03,Default,,0000,0000,0000,,Powtórzmy wszystko\Nna przykładzie tej strony.
Dialogue: 0,0:00:11.26,0:00:13.66,Default,,0000,0000,0000,,Dotyczy ona pączków.
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,Ma nagłówek, akapity…
Dialogue: 0,0:00:15.96,0:00:18.94,Default,,0000,0000,0000,,niektóre akapity są krótkie,\Njednowierszowe.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,CSS zaczyna się od reguły wyboru\Nwszystkich znaczników „p"
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,i określeniu rodziny czcionek\Nbezszeryfowych.
Dialogue: 0,0:00:26.07,0:00:30.06,Default,,0000,0000,0000,,Zmienię czcionkę na monospace,\Nżebyście widzieli wybór.
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,Widzicie?
Dialogue: 0,0:00:34.10,0:00:37.84,Default,,0000,0000,0000,,Następna reguła wybiera\Nelement o ID „donut-header”.
Dialogue: 0,0:00:38.03,0:00:41.91,Default,,0000,0000,0000,,Wiemy, że wybiera ID,\Nbo zaczyna się kratką.
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,ID jest opisowe,
Dialogue: 0,0:00:43.76,0:00:46.69,Default,,0000,0000,0000,,wygląda na to, że wybiera\Nnagłówek u góry
Dialogue: 0,0:00:46.69,0:00:47.75,Default,,0000,0000,0000,,i zmienia czcionkę.
Dialogue: 0,0:00:47.97,0:00:51.42,Default,,0000,0000,0000,,Przewinę w dół i sprawdzę,\Nczy „h1” ma ID.
Dialogue: 0,0:00:51.45,0:00:53.18,Default,,0000,0000,0000,,Wszystko się zgadza.
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,Ostatnia reguła wybiera\Nwszystkie elementy klasy „fakt”.
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,Wiemy, że to klasa,\Nbo zaczyna się od kropki.
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,Aby dowiedzieć się,\Nktóry element korzysta
Dialogue: 0,0:01:02.96,0:01:05.23,Default,,0000,0000,0000,,z tej klasy, mogę sprawdzić,\Nco robi reguła,
Dialogue: 0,0:01:05.23,0:01:07.83,Default,,0000,0000,0000,,dodając obramowanie\Ni dopełnienie…
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,lub poszukać nazwy klasy\Nw kodzie HTML.
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,Widzę nazwę w tym akapicie.
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,I w tym też.
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,Dwa akapity\Nz jednoliniowymi faktami.
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,Dlatego mają obramowanie.
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,Klasy są świetne,
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,bo można nadać ten sam styl\Nwielu elementom.
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,Z klasami możemy zrobić więcej.
Dialogue: 0,0:01:25.35,0:01:27.06,Default,,0000,0000,0000,,Zaraz pokażę, co.
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,Mamy stronę o pączkach.
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,Nie są zbyt zdrowe!
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,Mogą być nawet bardzo niezdrowe!
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,I uzależniają\Nz powodu ogromnej ilości cukru.
Dialogue: 0,0:01:37.01,0:01:39.64,Default,,0000,0000,0000,,Jeśli robimy o nich całą stronę,
Dialogue: 0,0:01:39.64,0:01:42.42,Default,,0000,0000,0000,,powinniśmy ostrzec ludzi,\Nże są niezdrowe.
Dialogue: 0,0:01:42.54,0:01:47.26,Default,,0000,0000,0000,,Może damy ten fakt w czerwieni,\Nżeby naprawdę ostrzegał?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,Jak to zrobimy?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,Dodajmy właściwość „color”\Ndo reguły CSS „fact”.
Dialogue: 0,0:01:53.40,0:01:55.10,Default,,0000,0000,0000,,Zobaczmy co się wydarzyło.
Dialogue: 0,0:01:55.65,0:02:00.33,Default,,0000,0000,0000,,Oba fakty stały się czerwone,\Na drugi nie jest ostrzeżeniem.
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,Dotyczy tylko pisowni.
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,Nie chcemy, by był czerwony.
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,Możemy dodać ID,
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,ale gdybyśmy chcieli później\Npokolorować inne ostrzeżenia
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,i dodać nowe,
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,to musielibyśmy dodawać ID\Ni reguły dla nich.
Dialogue: 0,0:02:14.39,0:02:19.81,Default,,0000,0000,0000,,W tym przypadku najlepiej jest\Ndodać kolejną klasę do znacznika „p”.
Dialogue: 0,0:02:20.10,0:02:24.15,Default,,0000,0000,0000,,Przeglądarki pozwalają\Ndodać ich tyle, ile chcemy.
Dialogue: 0,0:02:24.54,0:02:28.53,Default,,0000,0000,0000,,Umieszczamy kursor\Npo nazwie ostatniej klasy,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,robimy spację i piszemy nazwę\Nnowej klasy, np. „ostrzeżenie”.
Dialogue: 0,0:02:33.98,0:02:36.33,Default,,0000,0000,0000,,Teraz zróbmy regułę ostrzeżenia
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,i włączmy w nią właściwość koloru.
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,Główny fakt jest czerwony,\Na drugi nie.
Dialogue: 0,0:02:44.22,0:02:45.41,Default,,0000,0000,0000,,Pięknie!
Dialogue: 0,0:02:45.85,0:02:49.28,Default,,0000,0000,0000,,Możemy nadać klasę\Nwielu elementom, jak wcześniej.
Dialogue: 0,0:02:49.64,0:02:54.12,Default,,0000,0000,0000,,Np. pokolorujemy pogrubiony tekst,\N„smażone w głębokim tłuszczu”,
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,damy to na czerwono,\Nbo takie smażenie
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,często jest nazywane niezdrowym.
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,Dodamy więc class="warning"
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,również czerwień.
Dialogue: 0,0:03:05.04,0:03:10.82,Default,,0000,0000,0000,,Zauważcie, że ostrzeżenie\Nma kolor czerwony
Dialogue: 0,0:03:10.82,0:03:14.65,Default,,0000,0000,0000,,oraz krawędzie - górną i dolną.
Dialogue: 0,0:03:14.80,0:03:17.54,Default,,0000,0000,0000,,Tak jest przy używaniu wielu klas.
Dialogue: 0,0:03:17.54,0:03:20.58,Default,,0000,0000,0000,,Przeglądarka spojrzy\Nna wszystkie reguły
Dialogue: 0,0:03:20.58,0:03:22.34,Default,,0000,0000,0000,,i zastosuje odpowiednie style.
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,Ale, przekazując sens,\Nnie poprzestawajmy na kolorze,
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,bo przecież są daltoniści.
Dialogue: 0,0:03:28.64,0:03:31.30,Default,,0000,0000,0000,,Niektórzy prawie nie widzą różnicy
Dialogue: 0,0:03:31.30,0:03:33.82,Default,,0000,0000,0000,,między czerwienią a czernią.\NMoże wy też!
Dialogue: 0,0:03:33.90,0:03:37.46,Default,,0000,0000,0000,,Zmieńmy klasę,\Nby wszyscy ją zauważyli.
Dialogue: 0,0:03:38.07,0:03:40.71,Default,,0000,0000,0000,,Ten kolor zmienimy w kolor tła,
Dialogue: 0,0:03:40.71,0:03:44.74,Default,,0000,0000,0000,,bo każdy widzi, gdy coś ma tło.
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,Niewielki kontrast, czerwień i czerń.
Dialogue: 0,0:03:47.56,0:03:51.30,Default,,0000,0000,0000,,A kontrast jest ważny,\Nby strona była czytelna.
Dialogue: 0,0:03:51.40,0:03:54.08,Default,,0000,0000,0000,,Zróbmy tu biały.
Dialogue: 0,0:03:54.78,0:03:56.81,Default,,0000,0000,0000,,Teraz mamy białe litery
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,i czerwone tło\Ndla tych, którzy widzą czerwień.
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,Zastosowaliśmy klasę, więc oba\Nostrzeżenia mają ten sam styl.
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,Dzięki elastyczności klas CSS
Dialogue: 0,0:04:07.79,0:04:10.74,Default,,0000,0000,0000,,możemy uratować świat\Nprzed pączkami.