[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,Wracamy na stronę\Nz listami sławnych obrazów.
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,CSS zaczyna się od reguły rodziny\Nczcionek - wszędzie są bezszeryfowe.
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,Potem jest reguła selektorów grupowych.\NZmienia rodzinę czcionek w „h1” i „h2”.
Dialogue: 0,0:00:17.11,0:00:24.74,Default,,0000,0000,0000,,Dalej - kilka reguł, których jeszcze\Nnie widzieliście. Wyglądają dziwnie.
Dialogue: 0,0:00:24.74,0:00:29.97,Default,,0000,0000,0000,,Zaczynają się od „a”,\Npo nim jest dwukropek i słowo.
Dialogue: 0,0:00:29.97,0:00:35.50,Default,,0000,0000,0000,,Co oznacza dwukropek?\NCo wybierają te reguły?
Dialogue: 0,0:00:35.50,0:00:41.06,Default,,0000,0000,0000,,Wszystko, co zaczyna się dwukropkiem,\Nnazywamy pseudoklasą.
Dialogue: 0,0:00:41.06,0:00:48.00,Default,,0000,0000,0000,,Pseudoklasa wybiera elementy\Nwg informacji spoza strony
Dialogue: 0,0:00:48.00,0:00:51.83,Default,,0000,0000,0000,,lub tam, gdzie nie da się\Nzastosować innych selektorów.
Dialogue: 0,0:00:51.83,0:00:57.43,Default,,0000,0000,0000,,Tu użyję pseudoklas, by nadać styl\Nlinkom zależnie od ich stanu.
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,Pseudoklasa „link” wybierze wszystkie\Nlinki, na które użytkownik nie kliknął.
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,Większość przeglądarek\Nwyświetla je na niebiesko.
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,Pseudoklasa „visited” wybierze\Nwszystkie linki już kliknięte.
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,Większość przeglądarek\Nwyświetla je na fioletowo.
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,Jeśli naprawdę chcemy,\Nmożemy zmienić kolory.
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,Niech to jednak będzie uzasadnione.
Dialogue: 0,0:01:18.08,0:01:22.95,Default,,0000,0000,0000,,Ludzie już kojarzą błękit i fiolet\Nz linkami wykorzystanymi i nie.
Dialogue: 0,0:01:22.95,0:01:25.55,Default,,0000,0000,0000,,Lubią też wiedzieć,\Nktóre strony odwiedzili.
Dialogue: 0,0:01:25.55,0:01:28.47,Default,,0000,0000,0000,,Nie zmieniajcie tego\Nbez dobrego powodu.
Dialogue: 0,0:01:28.47,0:01:31.09,Default,,0000,0000,0000,,Skasuję te dwie reguły.
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,Uważam, że lepiej\Nprzy nich nie majstrować.
Dialogue: 0,0:01:34.22,0:01:38.97,Default,,0000,0000,0000,,Następna reguła jest wesoła.\NTo „a:hover” (ang. unosić się).
Dialogue: 0,0:01:38.97,0:01:46.14,Default,,0000,0000,0000,,Ta pseudoklasa wybierze element,\Ngdy użytkownik jeździ po nim myszką.
Dialogue: 0,0:01:46.14,0:01:48.41,Default,,0000,0000,0000,,Tylko wtedy będą zastosowane\Nwłaściwości.
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,Przerwijcie filmik\Ni ponajeżdżajcie na linki myszką.
Dialogue: 0,0:01:53.35,0:01:57.41,Default,,0000,0000,0000,,Proszę, ja zaczekam. Najedźcie…
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,Widzieliście, jak tło zmieniło kolor?\NŚwietny efekt!
Dialogue: 0,0:02:01.16,0:02:05.07,Default,,0000,0000,0000,,Pseudoklasy „hover” można użyć\Ndo każdego elementu.
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,Tylko że to nie działa\Nna każdym sprzęcie.
Dialogue: 0,0:02:07.66,0:02:11.42,Default,,0000,0000,0000,,W komórce - nie, bo wyświetlacz\Nreaguje tylko na dotyk.
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,Świetnie jest mieć taki efekt,\Nale nie polegajcie na nim.
Dialogue: 0,0:02:15.30,0:02:20.50,Default,,0000,0000,0000,,Co z tymi dwiema regułami? \NSą podobne do „hover”,
Dialogue: 0,0:02:20.50,0:02:23.07,Default,,0000,0000,0000,,zależne od tego, co akurat\Nrobi użytkownik.
Dialogue: 0,0:02:23.07,0:02:27.19,Default,,0000,0000,0000,,Pseudoklasa „active” wybiera\Nelementy aktywne.
Dialogue: 0,0:02:27.19,0:02:34.08,Default,,0000,0000,0000,,Np. gdy użytkownik klika na link,\Ntuż przed zmianą strony.
Dialogue: 0,0:02:34.08,0:02:38.61,Default,,0000,0000,0000,,Pseudoklasa „focus”\Nwybiera elementy zogniskowane,
Dialogue: 0,0:02:38.61,0:02:42.39,Default,,0000,0000,0000,,np. gdy za pomocą klawiatury\Nporuszacie się po interfejsie.
Dialogue: 0,0:02:42.39,0:02:47.74,Default,,0000,0000,0000,,Zatrzymajcie wykład, klikajcie linki,\Nporuszajcie się po stronie. Co będzie?
Dialogue: 0,0:02:47.74,0:02:51.50,Default,,0000,0000,0000,,Widzieliście, że tło zmieniło kolor?
Dialogue: 0,0:02:51.50,0:02:56.42,Default,,0000,0000,0000,,Wybrałam tę samą właściwość dla „hover”,\N„active” i „focus”, bo robią to samo:
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,pozwalają użytkownikowi\Nzauważyć link.
Dialogue: 0,0:02:58.84,0:03:03.66,Default,,0000,0000,0000,,Wielu projektantów właśnie dlatego\Nużywa tu tych samych właściwości.
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,A gdybym chciała zmienić\Nkolor tego tła?
Dialogue: 0,0:03:07.11,0:03:13.55,Default,,0000,0000,0000,,Mogę zmieniać każdy po kolei,
Dialogue: 0,0:03:13.55,0:03:15.88,Default,,0000,0000,0000,,albo zrobić to,\Nczego się nauczyliśmy:
Dialogue: 0,0:03:15.88,0:03:20.14,Default,,0000,0000,0000,,pogrupować selektory w jednej\Nregule, oddzielając je przecinkami.
Dialogue: 0,0:03:20.14,0:03:27.21,Default,,0000,0000,0000,,Damy tu przecinek. Napiszmy\N„a:active”, a potem „a:focus”.
Dialogue: 0,0:03:27.21,0:03:37.42,Default,,0000,0000,0000,,Teraz mogę skasować te dwie\Nreguły i zmienić wszystko naraz. Ładnie.
Dialogue: 0,0:03:37.42,0:03:41.53,Default,,0000,0000,0000,,To pierwsze pseudoklasy,\Nktóre pokazaliśmy, ale nie ostatnie.
Dialogue: 0,0:03:41.53,0:03:45.12,Default,,0000,0000,0000,,Innych pseudoklas CSS\Nposzukajcie w Internecie,
Dialogue: 0,0:03:45.12,0:03:48.65,Default,,0000,0000,0000,,albo zaczekajcie,\Naż opowiemy wam więcej.