0:00:00.831,0:00:05.211
Wracamy na stronę[br]z listami sławnych obrazów.

0:00:05.211,0:00:11.743
CSS zaczyna się od reguły rodziny[br]czcionek - wszędzie są bezszeryfowe.

0:00:11.743,0:00:17.114
Potem jest reguła selektorów grupowych.[br]Zmienia rodzinę czcionek w „h1” i „h2”.

0:00:17.114,0:00:24.737
Dalej - kilka reguł, których jeszcze[br]nie widzieliście. Wyglądają dziwnie.

0:00:24.737,0:00:29.967
Zaczynają się od „a”,[br]po nim jest dwukropek i słowo.

0:00:29.967,0:00:35.504
Co oznacza dwukropek?[br]Co wybierają te reguły?

0:00:35.504,0:00:41.065
Wszystko, co zaczyna się dwukropkiem,[br]nazywamy pseudoklasą.

0:00:41.065,0:00:48.002
Pseudoklasa wybiera elementy[br]wg informacji spoza strony

0:00:48.002,0:00:51.826
lub tam, gdzie nie da się[br]zastosować innych selektorów.

0:00:51.826,0:00:57.430
Tu użyję pseudoklas, by nadać styl[br]linkom zależnie od ich stanu.

0:00:57.430,0:01:03.449
Pseudoklasa „link” wybierze wszystkie[br]linki, na które użytkownik nie kliknął.

0:01:03.449,0:01:06.582
Większość przeglądarek[br]wyświetla je na niebiesko.

0:01:06.582,0:01:10.405
Pseudoklasa „visited” wybierze[br]wszystkie linki już kliknięte.

0:01:10.405,0:01:13.294
Większość przeglądarek[br]wyświetla je na fioletowo.

0:01:13.294,0:01:16.121
Jeśli naprawdę chcemy,[br]możemy zmienić kolory.

0:01:16.121,0:01:18.083
Niech to jednak będzie uzasadnione.

0:01:18.083,0:01:22.954
Ludzie już kojarzą błękit i fiolet[br]z linkami wykorzystanymi i nie.

0:01:22.954,0:01:25.549
Lubią też wiedzieć,[br]które strony odwiedzili.

0:01:25.549,0:01:28.474
Nie zmieniajcie tego[br]bez dobrego powodu.

0:01:28.474,0:01:31.092
Skasuję te dwie reguły.

0:01:31.092,0:01:34.221
Uważam, że lepiej[br]przy nich nie majstrować.

0:01:34.221,0:01:38.972
Następna reguła jest wesoła.[br]To „a:hover” (ang. unosić się).

0:01:38.972,0:01:46.138
Ta pseudoklasa wybierze element,[br]gdy użytkownik jeździ po nim myszką.

0:01:46.138,0:01:48.408
Tylko wtedy będą zastosowane[br]właściwości.

0:01:48.408,0:01:53.353
Przerwijcie filmik[br]i ponajeżdżajcie na linki myszką.

0:01:53.353,0:01:57.406
Proszę, ja zaczekam. Najedźcie…

0:01:57.406,0:02:01.165
Widzieliście, jak tło zmieniło kolor?[br]Świetny efekt!

0:02:01.165,0:02:05.073
Pseudoklasy „hover” można użyć[br]do każdego elementu.

0:02:05.073,0:02:07.662
Tylko że to nie działa[br]na każdym sprzęcie.

0:02:07.662,0:02:11.421
W komórce - nie, bo wyświetlacz[br]reaguje tylko na dotyk.

0:02:11.421,0:02:15.298
Świetnie jest mieć taki efekt,[br]ale nie polegajcie na nim.

0:02:15.298,0:02:20.503
Co z tymi dwiema regułami? [br]Są podobne do „hover”,

0:02:20.503,0:02:23.067
zależne od tego, co akurat[br]robi użytkownik.

0:02:23.067,0:02:27.191
Pseudoklasa „active” wybiera[br]elementy aktywne.

0:02:27.191,0:02:34.076
Np. gdy użytkownik klika na link,[br]tuż przed zmianą strony.

0:02:34.076,0:02:38.614
Pseudoklasa „focus”[br]wybiera elementy zogniskowane,

0:02:38.614,0:02:42.394
np. gdy za pomocą klawiatury[br]poruszacie się po interfejsie.

0:02:42.394,0:02:47.744
Zatrzymajcie wykład, klikajcie linki,[br]poruszajcie się po stronie. Co będzie?

0:02:47.744,0:02:51.497
Widzieliście, że tło zmieniło kolor?

0:02:51.497,0:02:56.415
Wybrałam tę samą właściwość dla „hover”,[br]„active” i „focus”, bo robią to samo:

0:02:56.415,0:02:58.842
pozwalają użytkownikowi[br]zauważyć link.

0:02:58.842,0:03:03.655
Wielu projektantów właśnie dlatego[br]używa tu tych samych właściwości.

0:03:03.655,0:03:07.114
A gdybym chciała zmienić[br]kolor tego tła?

0:03:07.114,0:03:13.552
Mogę zmieniać każdy po kolei,

0:03:13.552,0:03:15.885
albo zrobić to,[br]czego się nauczyliśmy:

0:03:15.885,0:03:20.140
pogrupować selektory w jednej[br]regule, oddzielając je przecinkami.

0:03:20.140,0:03:27.214
Damy tu przecinek. Napiszmy[br]„a:active”, a potem „a:focus”.

0:03:27.214,0:03:37.418
Teraz mogę skasować te dwie[br]reguły i zmienić wszystko naraz. Ładnie.

0:03:37.418,0:03:41.531
To pierwsze pseudoklasy,[br]które pokazaliśmy, ale nie ostatnie.

0:03:41.531,0:03:45.123
Innych pseudoklas CSS[br]poszukajcie w Internecie,

0:03:45.123,0:03:48.653
albo zaczekajcie,[br]aż opowiemy wam więcej.