[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,Na tej stronie, używając języka CSS,
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,zmieniamy styl nagłówków\N„h2” i akapitów.
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,Wszystkie nagłówki są zielone,\Na akapity - fioletowe.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,A gdybyśmy chcieli wybrać\Ntylko pierwszy „h2”
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,lub zmienić styl\Ntylko w drugim akapicie?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Musimy jakoś powiedzieć\Nprzeglądarce,
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,które elementy wybieramy,
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,by nie zmieniała stylu\Nwe wszystkich, jak teraz.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,Jeden sposób - to wybór po ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,Nadajemy znacznikowi\Nniepowtarzalny ID
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,i informujemy CSS:
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,„Chcę zastosować te style\Ntylko do elementu z tym ID,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,do żadnych innych".
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Najpierw trzeba zmodyfikować HTML,
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,by dodać atrybuty ID\Ndo wybranych znaczników.
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,Zacznijmy od drugiego akapitu.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,Aby dodać atrybut ID,\Numieszczamy kursor
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,w pierwszym znaczniku „p”,\Nzaraz po „p”,
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,później spacja i wpisujemy: \Nid = ""
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Atrybutowi ID trzeba nadać wartość.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,Jakie ma być ID?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,Opisowe i niepowtarzalne.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Nic innego na stronie\Nnie może mieć takiego ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Skoro to piosenka o królikach,\Nnapiszę rabbits-song („kroliki-piosenka”).
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,W ID nie można wpisywać spacji.\NSłowa rozdziela się
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,za pomocą dywizów i podkreślników.
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,Ja lubię dywizy.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Akapit już można zidentyfikować.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,Dodajmy regułę CSS,\Nktóra go znajdzie.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Wróćmy do znacznika „style”,\Nby zacząć drugi etap.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,Dodamy nowy wiersz,\Npo ostatniej regule.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Pamiętajcie, pierwsza część\Nreguły CSS to selektor.
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,Mówi przeglądarce, co wybrać.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,Poprzednio używaliśmy\Nselektorów „h2” oraz „p”,
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,by wybrać wszystkie\Nznaczniki „h2” i „p” na stronie.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Aby selektor wybierał tylko elementy
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,z konkretnym ID,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,zaczniemy od kratki.
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Mówi to przeglądarce,\Nże dalej jest ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Teraz wpisujemy ID:\N„rabbits-song”.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,Reszta reguły\Npozostaje taka sama.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,Otwieramy i zamykamy klamry,
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,dodajemy właściwość,\Nnp. kolor tła
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,I już! Udało się!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Tylko akapit z piosenką\Nma żółte tło.
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,Pierwszy się nie zmienił.
Dialogue: 0,0:02:27.54,0:02:30.76,Default,,0000,0000,0000,,Teraz zmieńmy\Npierwszy nagłówek „h2”.
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,Pamiętacie pierwszy krok?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,Tak, trzeba zmienić HTML,
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,dodając atrybut „id”.
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,Kursor do znacznika początkowego,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,spacja, wpisujemy: id=""
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,a potem niepowtarzalne,\Nopisowe ID.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,Niech będzie:\N„rabbits-info-heading”.
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Teraz krok drugi.\NW znaczniku „style”
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,dodajemy nowy wiersz z kratką,
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,potem nasze ID, \Nczyli „rabbits-info-heading”
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,i właściwości w klamrach.
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,Kolor tła: fiolet.
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,Nie udało się. Wiecie, dlaczego?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Czy napisałam tak samo?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,rabbits-info-Heading, \Nrabbits-info-heading...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,Wyglądają tak samo.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Mogłabym porównać\Nliterę po literze,
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,aby znaleźć błąd,
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,wolę jednak wybrać ID z HTML,
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,skopiować je i wkleić.\NŻeby było identyczne.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,I… Udało się!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,Nagłówek „h2” ma tło.\NZauważyliście błąd?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Może. Tu było małe „h”.\NA tutaj wielkie „H”.
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,Przeglądarka nie uznała ich\Nza to samo.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Musi być małe „h”, jak w ID w HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,Bo w ID liczy się wielkość liter.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Wszędzie musi być ten sam zapis.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Ja w ID używam samych małych liter,
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,żeby się nie zastanawiać\Nnad wielkością.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Na koniec ostrzeżenie:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,ID muszą być niepowtarzalne.
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Gdy dwa znaczniki na stronie\Nmają takie samo ID,
Dialogue: 0,0:04:13.44,0:04:17.83,Default,,0000,0000,0000,,przeglądarka może zmienić oba\Nalbo tylko jeden.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,Nie zdawajcie się na przypadek.
Dialogue: 0,0:04:20.45,0:04:23.10,Default,,0000,0000,0000,,Niepowtarzalne, opisowe ID!