[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:05.43,Default,,0000,0000,0000,,Z pączków przerzućmy się na marchewkę,\Njeden z najzdrowszych produktów.
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,I przysmak królików.
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,Wiecie, że marchewki\Nsą nie tylko pomarańczowe?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,Dawniej były fioletowe.\NWciąż takie istnieją.
Dialogue: 0,0:00:13.54,0:00:19.54,Default,,0000,0000,0000,,Mamy tu stronę z listą kolorów\Ni zdaniem o fioletowych początkach.
Dialogue: 0,0:00:19.54,0:00:25.27,Default,,0000,0000,0000,,Zastosowaliśmy klasy, by przedstawić\Nnazwy w odpowiednich kolorach.
Dialogue: 0,0:00:25.27,0:00:31.90,Default,,0000,0000,0000,,Podoba mi się to w liście, ale nie wiem,\Njak fiolet sprawdzi się w tekście.
Dialogue: 0,0:00:31.90,0:00:36.22,Default,,0000,0000,0000,,Zrezygnuję z kolorowego tła\Ni wybiorę subtelniejsze odcienie.
Dialogue: 0,0:00:36.22,0:00:43.78,Default,,0000,0000,0000,,Jak powiedzieć przeglądarce, by fiolet\Ntutaj wyglądał inaczej niż tutaj?
Dialogue: 0,0:00:43.78,0:00:49.30,Default,,0000,0000,0000,,Nie nazwą klasy, bo jest taka sama.\NTrzeba by wprowadzić nową.
Dialogue: 0,0:00:49.30,0:00:52.92,Default,,0000,0000,0000,,Znacznik też jest ten sam: „strong”.
Dialogue: 0,0:00:52.92,0:00:58.01,Default,,0000,0000,0000,,Nie użyjemy selektora typu\N„element plus nazwa klasy”.
Dialogue: 0,0:00:58.01,0:01:00.66,Default,,0000,0000,0000,,Czy jest tu jakaś inna różnica?
Dialogue: 0,0:01:00.66,0:01:06.38,Default,,0000,0000,0000,,To jest „strong” wewnątrz „li”,
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,a ten „strong” siedzi w „p”.
Dialogue: 0,0:01:10.98,0:01:15.58,Default,,0000,0000,0000,,Różnica tkwi\Nw znacznikach-rodzicach. Powyżej.
Dialogue: 0,0:01:15.58,0:01:21.10,Default,,0000,0000,0000,,Skorzystamy z tego, by zrobić regułę CSS\Nz użyciem tzw. selektorów potomnych.
Dialogue: 0,0:01:21.10,0:01:25.22,Default,,0000,0000,0000,,To sposób wyboru elementów\Nna podstawie pozycji w dokumencie.
Dialogue: 0,0:01:25.22,0:01:30.62,Default,,0000,0000,0000,,Żeby wybrać tylko fioletowy\N„strong” w akapicie,
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,napiszemy „p”, a potem spację\N(jest bardzo ważna!)
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,i nazwę klasy: „.purple”.
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,Dodamy właściwości,\Nktóre złagodzą kolorystykę.
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,Kolor tła - przezroczyste.\NTo anuluje poprzednie ustawienia.
Dialogue: 0,0:01:50.31,0:01:58.80,Default,,0000,0000,0000,,Dobrze: zmieniliśmy ten fiolet, nie\Nzmieniając reszty fioletowego tekstu.
Dialogue: 0,0:01:58.80,0:02:02.88,Default,,0000,0000,0000,,Zawsze, gdy użyjemy klasy „fiolet”\Nw takim akapicie,
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,pojawi się styl zastosowany później.
Dialogue: 0,0:02:05.32,0:02:09.59,Default,,0000,0000,0000,,Pomajstrujmy jeszcze\Nprzy naszym dokumencie.
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,,Chcemy nadać jakiś styl\Ntylko znacznikom „strong” w „li”.
Dialogue: 0,0:02:15.73,0:02:23.14,Default,,0000,0000,0000,,Najpierw znacznik-rodzic: „li”,\Npotem spacja i „strong”.
Dialogue: 0,0:02:23.14,0:02:28.07,Default,,0000,0000,0000,,Zmienimy interlinię,\Nporozsuwamy tekst bardziej.
Dialogue: 0,0:02:28.07,0:02:34.07,Default,,0000,0000,0000,,Ładnie. Jeśli chcemy, możemy nawet\Ndodać „ul” przed „li”,
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,aby mieć pewność, że nie zadziała\Nna „strong” w „ol” wewnątrz „li”.
Dialogue: 0,0:02:38.52,0:02:43.81,Default,,0000,0000,0000,,Aby używać selektorów potomnych, musicie\Ndobrze poznać strukturę dokumentu:
Dialogue: 0,0:02:43.81,0:02:46.10,Default,,0000,0000,0000,,które znaczniki\Nznajdują się w których.
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,Jeśli robicie wcięcia, będzie łatwo,
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,bo wcięcia odzwierciedlają\Nhierarchię znaczników.
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,,Mamy „ul”, wewnątrz jest „li”,
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,a jeszcze głębiej: „strong”.
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,Jeśli nie dbaliście o wcięcia,\Npoprawcie to,
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,żeby było wam łatwiej\Nzrozumieć strukturę strony
Dialogue: 0,0:03:07.02,0:03:10.61,Default,,0000,0000,0000,,i na tej podstawie\Nzastosować selektory CSS.
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,Można używać\Nbardzo różnych selektorów.
Dialogue: 0,0:03:13.60,0:03:19.02,Default,,0000,0000,0000,,Np. aby wyszukiwać dany typ znacznika\Nw elemencie o pewnym ID,
Dialogue: 0,0:03:19.02,0:03:22.46,Default,,0000,0000,0000,,albo dane ID w elementach\Nnależących do pewnej klasy.
Dialogue: 0,0:03:22.46,0:03:25.33,Default,,0000,0000,0000,,Każda kombinacja,\Nktórej potrzebujecie.
Dialogue: 0,0:03:25.33,0:03:32.23,Default,,0000,0000,0000,,Pamiętajcie: po zmianie struktury strony\Nmogą nie działać stare reguły CSS.
Dialogue: 0,0:03:32.23,0:03:37.18,Default,,0000,0000,0000,,Stosujcie je rozważnie,\Nmyśląc o przyszłości.
Dialogue: 0,0:03:37.18,0:03:41.30,Default,,0000,0000,0000,,Aby uniezależnić się od struktury\Nstrony, używajcie klas.
Dialogue: 0,0:03:41.30,0:03:45.61,Default,,0000,0000,0000,,Wróćmy do reguł, które określiłam.\NPrzemyślmy je.
Dialogue: 0,0:03:45.61,0:03:51.38,Default,,0000,0000,0000,,Pierwsza nadaje styl wszystkim\Nfioletowym elementom w akapitach.
Dialogue: 0,0:03:51.38,0:03:57.59,Default,,0000,0000,0000,,Czy nowe akapity z fioletowymi\Nelementami też mają mieć tę właściwość?
Dialogue: 0,0:03:57.59,0:04:02.37,Default,,0000,0000,0000,,Tak, bo myślę, że zawsze\Nbędzie wyglądało to dobrze.
Dialogue: 0,0:04:02.37,0:04:04.40,Default,,0000,0000,0000,,Potrzebuję precyzyjniejszej reguły?
Dialogue: 0,0:04:04.40,0:04:11.19,Default,,0000,0000,0000,,Gdyby akapity zawsze należały do elementu\Nz klasy „article", mogłabym to dodać.
Dialogue: 0,0:04:11.19,0:04:14.25,Default,,0000,0000,0000,,Na razie precyzyjniej się nie da.
Dialogue: 0,0:04:14.25,0:04:21.18,Default,,0000,0000,0000,,Druga reguła daje elementom „strong”\Nw listach określoną interlinię.
Dialogue: 0,0:04:21.18,0:04:26.04,Default,,0000,0000,0000,,Czy te elementy w „li”\Nzawsze mają być tak luźno?
Dialogue: 0,0:04:26.04,0:04:30.98,Default,,0000,0000,0000,,Może nie. Ta reguła\Nchyba jest zbyt ogólna.
Dialogue: 0,0:04:30.98,0:04:36.78,Default,,0000,0000,0000,,Nie jestem pewna,\Nwięc dodam klasę do tego „ul”
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,i zmienię to w „ul.spacey”,
Dialogue: 0,0:04:42.03,0:04:44.65,Default,,0000,0000,0000,,żeby ograniczyć zasięg reguły.
Dialogue: 0,0:04:44.65,0:04:49.84,Default,,0000,0000,0000,,Rozwijając swoją stronę, będę mogła\Nuogólniać lub precyzować reguły.
Dialogue: 0,0:04:49.84,0:04:53.62,Default,,0000,0000,0000,,Zyskaliście kolejne narzędzie w CSS!
Dialogue: 0,0:04:53.62,0:04:57.88,Default,,0000,0000,0000,,Poćwiczcie, by móc używać go,\Ngdy będzie to potrzebne!