[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.08,Default,,0000,0000,0000,,Spójrzmy na naszą stronę.
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,Ma nagłówki,
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,akapit z opisem królików
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,oraz kilka innych akapitów
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,z tekstem mojej ulubionej\Npiosenki o królikach.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,Zmieniliśmy styl pierwszego\Nakapitu za pomocą ID.
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Skoro jest kilka akapitów\Nze słowami,
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,niech wszystkie mają żółte tło.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,Jak to uzyskać, wykorzystując\Nto, co już wiemy?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,Najpierw nauczyliśmy się
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,wybierania wszystkich znaczników\Ndanego typu,
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,np. jak z selektorem „p”.
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,Zmieniał się kolor wszystkich\Nakapitów, nie tylko z piosenką.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Potrzebujemy\Nczegoś konkretniejszego.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Nauczyliśmy się wybierać\Nznaczniki z określonym ID,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,np. z ID „kroliki-piosenka”.
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,Ale wybraliśmy\Ntylko pierwszy akapit.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,Nie dodamy tego ID\Ndo innych akapitów:
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,nie wolno przypisywać jednego\NID różnym znacznikom.
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,Gdybyśmy chcieli wybrać\Ninne akapity,
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,musielibyśmy dać każdemu\Nnowe ID
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,(np. „tekst-piosenki2” \Ni „tekst-piosenki3"),
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,bo każde ID jest inne.
Dialogue: 0,0:01:07.36,0:01:09.81,Default,,0000,0000,0000,,I trzeba by do każdego\Ndodać reguły.
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,Dalibyśmy radę,\Nale ile przy tym pracy!
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,Dodając nowy wers do piosenki,
Dialogue: 0,0:01:14.69,0:01:17.28,Default,,0000,0000,0000,,musielibyśmy dodawać\Nnowe ID do HTML,
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,i jeszcze jedno do reguł CSS.
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,Dodawanie setek wierszy\Nbyłoby wyczerpujące!
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Wiecie, co?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,Jest lepszy sposób. Klasy.
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,Klasa to sposób
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,przypisania elementu do grupy.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,Można przypisać ich tyle,\Nile się chce.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Aby dodać klasę, zaczynamy\Nod atrybutu, jak przy ID.
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,Skasuję to ID,\Nbo mam wpisać nowe.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Kursor jest w znaczniku\Npoczątkowym „p”.
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,Dodaję spację i piszę: \Nclass = ""
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,Teraz potrzebujemy nazwy.
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,Ładnej, opisowej.
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,Powiedzmy „teksty-piosenek”.
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,Wpisałam.
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,Co jeszcze powinno\Nnależeć do tej klasy?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,Cała reszta akapitów z tekstami.
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,Zejdźmy niżej
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,i dodajmy atrybut\Nkażdej z klas akapitu:
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,„teksty-piosenek”.
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Świetnie. Już możemy\Ndodać regułę CSS.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,Wracamy do znacznika\N„style”
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,i kasuję selektor ID,\Nktóry wpisaliśmy wcześniej,
Dialogue: 0,0:02:24.57,0:02:25.77,Default,,0000,0000,0000,,bo teraz będzie inny.
Dialogue: 0,0:02:26.16,0:02:28.59,Default,,0000,0000,0000,,Musimy przygotować selektor klasy.
Dialogue: 0,0:02:28.93,0:02:34.04,Default,,0000,0000,0000,,W tym celu użyjemy kropki.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Za nią napiszemy nazwę\Nklasy: teksty-piosenek.
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,I dalej jak zwykle: klamry,\Nwłaściwość, dwukropek, wartość.
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,I już!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,Wszystkie teksty\Nsą na żółtym tle.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,A gdybyśmy napisali duże „S”?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,Nic z tego.
Dialogue: 0,0:02:56.49,0:02:58.95,Default,,0000,0000,0000,,Przy klasach także\Nliczy się wielkość.
Dialogue: 0,0:02:58.97,0:03:01.77,Default,,0000,0000,0000,,To ważne, czy litery są\Nwielkie czy małe.
Dialogue: 0,0:03:01.77,0:03:03.56,Default,,0000,0000,0000,,Jak przy ID.
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,A gdybyśmy zamiast kropki\Nużyli kratki?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,Nie działa.
Dialogue: 0,0:03:09.77,0:03:13.08,Default,,0000,0000,0000,,Przeglądarka uznaje\N„teksty-piosenek” za ID,
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,a nie mogąc znaleźć\Natrybutu ID,
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,rezygnuje.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,Co będzie, jeśli w nazwach\Nznajdą się spacje?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Też niedobrze.
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,W nazwach klas nie wolno\Nich używać.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,Jak się dowiecie,
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,w CSS spacja oznacza\Ncoś bardzo konkretnego.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,Poprawmy to.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,Jeszcze raz.
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,Chcąc dodać klasę,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,wymyślamy nazwę
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,i wpisujemy ją do atrybutu\Nklasy w HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,Piszemy regułę stylu,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,zaczynając od kropki\Ni nazwy klasy.
Dialogue: 0,0:03:55.22,0:03:58.43,Default,,0000,0000,0000,,Teraz wasz CSS ma klasę!