[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:02.16,Default,,0000,0000,0000,,Umiemy już stworzyć
Dialogue: 0,0:00:02.16,0:00:04.12,Default,,0000,0000,0000,,kompletną stronę internetową,
Dialogue: 0,0:00:04.12,0:00:07.95,Default,,0000,0000,0000,,z tekstem i obrazami,\Nale czegoś brakuje: stylu.
Dialogue: 0,0:00:07.95,0:00:09.40,Default,,0000,0000,0000,,Moja strona wygląda tak,
Dialogue: 0,0:00:09.40,0:00:10.98,Default,,0000,0000,0000,,jak te, które tworzycie wy.
Dialogue: 0,0:00:10.98,0:00:13.69,Default,,0000,0000,0000,,Czarny tekst, białe tło,\Ntaka sama czcionka,
Dialogue: 0,0:00:13.69,0:00:15.85,Default,,0000,0000,0000,,układ od góry do dołu.
Dialogue: 0,0:00:15.85,0:00:18.02,Default,,0000,0000,0000,,Ale przecież widzieliście,\Nże strony
Dialogue: 0,0:00:18.02,0:00:20.23,Default,,0000,0000,0000,,bardzo różnią się między sobą.
Dialogue: 0,0:00:20.23,0:00:21.61,Default,,0000,0000,0000,,Na stronie Khan Academy
Dialogue: 0,0:00:21.61,0:00:24.65,Default,,0000,0000,0000,,są różne kolory, czcionki\No różnym kroju i rozmiarze.
Dialogue: 0,0:00:24.65,0:00:26.82,Default,,0000,0000,0000,,Zróbmy teraz coś takiego.
Dialogue: 0,0:00:26.82,0:00:29.90,Default,,0000,0000,0000,,Zatrzymajcie ten wykład\Ni obejrzyjcie parę stron.
Dialogue: 0,0:00:29.90,0:00:31.62,Default,,0000,0000,0000,,Czym się różnią?
Dialogue: 0,0:00:31.62,0:00:35.01,Default,,0000,0000,0000,,Co w ich stylu\Nwam się podoba, a co nie?
Dialogue: 0,0:00:35.01,0:00:37.20,Default,,0000,0000,0000,,Zaczekam.
Dialogue: 0,0:00:38.05,0:00:40.75,Default,,0000,0000,0000,,Musicie wiedzieć,\Njak różne mogą być strony,
Dialogue: 0,0:00:40.75,0:00:43.23,Default,,0000,0000,0000,,bo niedługo sami wymyślicie,
Dialogue: 0,0:00:43.23,0:00:45.44,Default,,0000,0000,0000,,jak odróżnić swoją stronę\Nod innych,
Dialogue: 0,0:00:45.44,0:00:48.54,Default,,0000,0000,0000,,tak, by wyrażała was samych
Dialogue: 0,0:00:48.54,0:00:51.20,Default,,0000,0000,0000,,i podobała się użytkownikom.
Dialogue: 0,0:00:51.20,0:00:53.00,Default,,0000,0000,0000,,Żeby uatrakcyjnić naszą stronę,
Dialogue: 0,0:00:53.00,0:00:55.46,Default,,0000,0000,0000,,nauczymy się nowego języka, CSS.
Dialogue: 0,0:00:55.46,0:00:57.88,Default,,0000,0000,0000,,CSS to skrót od\N„Cascading Style Sheets”
Dialogue: 0,0:00:57.88,0:00:59.76,Default,,0000,0000,0000,,i określa style,\Nktórych użyjemy
Dialogue: 0,0:00:59.76,0:01:01.74,Default,,0000,0000,0000,,w różnych częściach naszej strony.
Dialogue: 0,0:01:01.74,0:01:06.31,Default,,0000,0000,0000,,Umieszczamy CSS w HTML,\Nmimo że jest on innym językiem.
Dialogue: 0,0:01:06.31,0:01:08.02,Default,,0000,0000,0000,,Musimy się nauczyć języka CSS;
Dialogue: 0,0:01:08.02,0:01:11.16,Default,,0000,0000,0000,,nie mylmy go z HTML.
Dialogue: 0,0:01:11.16,0:01:13.96,Default,,0000,0000,0000,,Zobaczymy, jak za pomocą CSS\Nzmieniać wygląd strony:
Dialogue: 0,0:01:13.96,0:01:16.70,Default,,0000,0000,0000,,czcionki, rozmiary i układ.
Dialogue: 0,0:01:16.70,0:01:20.55,Default,,0000,0000,0000,,Na początek coś wesołego. Kolor.
Dialogue: 0,0:01:20.55,0:01:22.18,Default,,0000,0000,0000,,Może damy niektóre nagłówki
Dialogue: 0,0:01:22.18,0:01:25.53,Default,,0000,0000,0000,,w kolorze trawiastozielonym?
Dialogue: 0,0:01:25.53,0:01:28.40,Default,,0000,0000,0000,,Aby zacząć,\Nwstawiamy znacznik „style”
Dialogue: 0,0:01:28.40,0:01:30.52,Default,,0000,0000,0000,,u góry strony.
Dialogue: 0,0:01:31.84,0:01:34.46,Default,,0000,0000,0000,,Znacznik „style”\Nto sygnał dla przeglądarki,
Dialogue: 0,0:01:34.46,0:01:37.39,Default,,0000,0000,0000,,że wszystko wewnątrz to CSS.
Dialogue: 0,0:01:37.39,0:01:40.06,Default,,0000,0000,0000,,Dla jasności użyję parsera CSS
Dialogue: 0,0:01:40.06,0:01:43.10,Default,,0000,0000,0000,,zamiast parsera HTML.
Dialogue: 0,0:01:43.46,0:01:48.31,Default,,0000,0000,0000,,Tu dodamy regułę stylu CSS.
Dialogue: 0,0:01:48.31,0:01:50.89,Default,,0000,0000,0000,,Ma ona selektor,\Nmówiący przeglądarce,
Dialogue: 0,0:01:50.89,0:01:54.06,Default,,0000,0000,0000,,której części strony dotyczy styl,
Dialogue: 0,0:01:54.06,0:01:56.79,Default,,0000,0000,0000,,a deklaracje wskazują,\Njaki styl zastosować.
Dialogue: 0,0:01:56.79,0:02:00.34,Default,,0000,0000,0000,,Chcąc zmienić wszystkie\Nnagłówki „h2”,
Dialogue: 0,0:02:00.34,0:02:03.100,Default,,0000,0000,0000,,wpisujemy „h2” w selektorze.
Dialogue: 0,0:02:03.100,0:02:06.01,Default,,0000,0000,0000,,Później wstawiamy klamry.
Dialogue: 0,0:02:06.01,0:02:08.48,Default,,0000,0000,0000,,Upewnijcie się,\Nże wstawiliście klamry.
Dialogue: 0,0:02:08.48,0:02:10.15,Default,,0000,0000,0000,,Inaczej nic z tego nie będzie.
Dialogue: 0,0:02:10.15,0:02:12.80,Default,,0000,0000,0000,,W środku umieścimy deklaracje
Dialogue: 0,0:02:12.80,0:02:14.40,Default,,0000,0000,0000,,z właściwościami i wartościami.
Dialogue: 0,0:02:14.40,0:02:19.24,Default,,0000,0000,0000,,Do zmiany koloru tekstu\Nużywamy właściwości „color”.
Dialogue: 0,0:02:19.24,0:02:22.90,Default,,0000,0000,0000,,Dalej dwukropek\Ni trzeba wpisać wartość.
Dialogue: 0,0:02:22.90,0:02:25.78,Default,,0000,0000,0000,,Informujemy przeglądarkę,\Nktóry wyświetlić kolor.
Dialogue: 0,0:02:25.78,0:02:28.71,Default,,0000,0000,0000,,Moglibyśmy wpisać „green”\N(zielony).
Dialogue: 0,0:02:29.31,0:02:32.20,Default,,0000,0000,0000,,Przeglądarka zrozumie,\Nbo to typowy kolor.
Dialogue: 0,0:02:32.20,0:02:33.83,Default,,0000,0000,0000,,Ale ja nie chciałam zieleni,
Dialogue: 0,0:02:33.83,0:02:35.93,Default,,0000,0000,0000,,tylko zieleń trawiastą.
Dialogue: 0,0:02:35.93,0:02:39.42,Default,,0000,0000,0000,,Wpiszę „trawiastozielony”…
Dialogue: 0,0:02:39.42,0:02:42.40,Default,,0000,0000,0000,,Przeglądarka się pogubiła.\NWyświetli nagłówki
Dialogue: 0,0:02:42.40,0:02:45.66,Default,,0000,0000,0000,,na czarno, bo nie zna\Ntrawiastej zieleni.
Dialogue: 0,0:02:45.66,0:02:48.45,Default,,0000,0000,0000,,Żeby określić kolor,
Dialogue: 0,0:02:48.45,0:02:51.64,Default,,0000,0000,0000,,korzystajmy z palety RGB.
Dialogue: 0,0:02:51.64,0:02:54.15,Default,,0000,0000,0000,,Może słyszeliście o niej\Nna plastyce.
Dialogue: 0,0:02:54.15,0:02:55.100,Default,,0000,0000,0000,,Bez obaw,\Nnie musicie być ekspertami:
Dialogue: 0,0:02:55.100,0:02:58.81,Default,,0000,0000,0000,,przygotowaliśmy próbnik kolorów.
Dialogue: 0,0:02:58.81,0:03:03.81,Default,,0000,0000,0000,,Wystarczy zamienić to\Nna „rgb()”
Dialogue: 0,0:03:04.08,0:03:06.56,Default,,0000,0000,0000,,Wyskoczy próbnik wyboru koloru,
Dialogue: 0,0:03:06.56,0:03:09.33,Default,,0000,0000,0000,,w którym najeżdżacie\Nna wybrany kolor myszką
Dialogue: 0,0:03:09.33,0:03:12.40,Default,,0000,0000,0000,,i od razu widzicie,\Njak będzie wyglądać.
Dialogue: 0,0:03:12.40,0:03:14.87,Default,,0000,0000,0000,,Gdy znajdziecie dla siebie\Nkolor, kliknijcie.
Dialogue: 0,0:03:14.87,0:03:17.02,Default,,0000,0000,0000,,Wiecie, co oznaczają trzy liczby
Dialogue: 0,0:03:17.02,0:03:20.41,Default,,0000,0000,0000,,w nawiasie RGB?
Dialogue: 0,0:03:20.41,0:03:22.93,Default,,0000,0000,0000,,Czerwień, zieleń i błękit.
Dialogue: 0,0:03:22.93,0:03:25.82,Default,,0000,0000,0000,,Składniki wybranego koloru.
Dialogue: 0,0:03:26.46,0:03:29.93,Default,,0000,0000,0000,,Dobre jest to,\Nże selektor „h2” w CSS
Dialogue: 0,0:03:29.93,0:03:33.94,Default,,0000,0000,0000,,zmieni kolor wszystkich\Nnagłówków „h2” na stronie.
Dialogue: 0,0:03:33.94,0:03:36.53,Default,,0000,0000,0000,,Możemy zmienić\Nwiele nagłówków naraz,
Dialogue: 0,0:03:36.53,0:03:40.36,Default,,0000,0000,0000,,wszystkie będą zielone,
Dialogue: 0,0:03:40.36,0:03:43.48,Default,,0000,0000,0000,,jednakowe na całej stronie.
Dialogue: 0,0:03:43.48,0:03:45.12,Default,,0000,0000,0000,,Poznając CSS, dowiecie się,
Dialogue: 0,0:03:45.12,0:03:47.48,Default,,0000,0000,0000,,jak inaczej zmieniać\Nwygląd części strony,
Dialogue: 0,0:03:47.48,0:03:50.02,Default,,0000,0000,0000,,np. tylko jednego nagłówka „h2”.
Dialogue: 0,0:03:50.02,0:03:54.41,Default,,0000,0000,0000,,Tego rodzaju selektory\Ndają dużo możliwości.
Dialogue: 0,0:03:54.41,0:03:56.32,Default,,0000,0000,0000,,Teraz - inna reguła stylu CSS.
Dialogue: 0,0:03:56.32,0:03:59.21,Default,,0000,0000,0000,,Zrobimy tło w kolorze\Nbłękitu nieba.
Dialogue: 0,0:03:59.21,0:04:02.06,Default,,0000,0000,0000,,Jak zmienić kolor tła strony?
Dialogue: 0,0:04:02.06,0:04:05.81,Default,,0000,0000,0000,,Który znacznik obejmuje ją całą?
Dialogue: 0,0:04:05.81,0:04:07.20,Default,,0000,0000,0000,,Nie „h1”.
Dialogue: 0,0:04:07.20,0:04:10.57,Default,,0000,0000,0000,,Ani „p”, ani „image”.
Dialogue: 0,0:04:10.57,0:04:13.17,Default,,0000,0000,0000,,To „body”. Pamiętacie?
Dialogue: 0,0:04:13.17,0:04:16.20,Default,,0000,0000,0000,,To, co widoczne,\Nzawsze jest w znaczniku „body”.
Dialogue: 0,0:04:16.20,0:04:18.38,Default,,0000,0000,0000,,Chcąc zmienić styl całej strony,
Dialogue: 0,0:04:18.38,0:04:22.62,Default,,0000,0000,0000,,używamy selektora,\Nby wybrać ten znacznik.
Dialogue: 0,0:04:22.62,0:04:25.41,Default,,0000,0000,0000,,Wpiszemy „body”.
Dialogue: 0,0:04:26.90,0:04:31.28,Default,,0000,0000,0000,,Zamiast „color” wpiszemy\N„background-color” (kolor tła),
Dialogue: 0,0:04:31.71,0:04:36.36,Default,,0000,0000,0000,,dalej dwukropek i „rgb()”.
Dialogue: 0,0:04:36.36,0:04:41.05,Default,,0000,0000,0000,,Wyskakuje próbnik kolorów,\Nwybieram błękit,
Dialogue: 0,0:04:41.05,0:04:45.65,Default,,0000,0000,0000,,który kojarzy się z królikami\Ni pierzastymi chmurami.
Dialogue: 0,0:04:45.65,0:04:46.66,Default,,0000,0000,0000,,I już!
Dialogue: 0,0:04:46.66,0:04:49.37,Default,,0000,0000,0000,,Spójrzcie na moją piękną stronę!
Dialogue: 0,0:04:49.37,0:04:51.49,Default,,0000,0000,0000,,CSS może zmieniać\Nsetki właściwości
Dialogue: 0,0:04:51.49,0:04:54.12,Default,,0000,0000,0000,,oprócz koloru czcionki i tła,
Dialogue: 0,0:04:54.12,0:04:56.74,Default,,0000,0000,0000,,ale te były dobre na początek.
Dialogue: 0,0:04:56.76,0:04:59.16,Default,,0000,0000,0000,,Kiedy skończę,\Npobawcie się kolorami,
Dialogue: 0,0:04:59.16,0:05:01.53,Default,,0000,0000,0000,,pozmieniajcie tę stronę,
Dialogue: 0,0:05:01.53,0:05:04.04,Default,,0000,0000,0000,,żeby nabrała waszego stylu.
Dialogue: 0,0:05:04.04,0:05:06.49,Default,,0000,0000,0000,,Dobrze? Start!