1
00:00:00,831 --> 00:00:05,211
Wracamy na stronę
z listami sławnych obrazów.

2
00:00:05,211 --> 00:00:11,743
CSS zaczyna się od reguły rodziny
czcionek - wszędzie są bezszeryfowe.

3
00:00:11,743 --> 00:00:17,114
Potem jest reguła selektorów grupowych.
Zmienia rodzinę czcionek w „h1” i „h2”.

4
00:00:17,114 --> 00:00:24,737
Dalej - kilka reguł, których jeszcze
nie widzieliście. Wyglądają dziwnie.

5
00:00:24,737 --> 00:00:29,967
Zaczynają się od „a”,
po nim jest dwukropek i słowo.

6
00:00:29,967 --> 00:00:35,504
Co oznacza dwukropek?
Co wybierają te reguły?

7
00:00:35,504 --> 00:00:41,065
Wszystko, co zaczyna się dwukropkiem,
nazywamy pseudoklasą.

8
00:00:41,065 --> 00:00:48,002
Pseudoklasa wybiera elementy
wg informacji spoza strony

9
00:00:48,002 --> 00:00:51,826
lub tam, gdzie nie da się
zastosować innych selektorów.

10
00:00:51,826 --> 00:00:57,430
Tu użyję pseudoklas, by nadać styl
linkom zależnie od ich stanu.

11
00:00:57,430 --> 00:01:03,449
Pseudoklasa „link” wybierze wszystkie
linki, na które użytkownik nie kliknął.

12
00:01:03,449 --> 00:01:06,582
Większość przeglądarek
wyświetla je na niebiesko.

13
00:01:06,582 --> 00:01:10,405
Pseudoklasa „visited” wybierze
wszystkie linki już kliknięte.

14
00:01:10,405 --> 00:01:13,294
Większość przeglądarek
wyświetla je na fioletowo.

15
00:01:13,294 --> 00:01:16,121
Jeśli naprawdę chcemy,
możemy zmienić kolory.

16
00:01:16,121 --> 00:01:18,083
Niech to jednak będzie uzasadnione.

17
00:01:18,083 --> 00:01:22,954
Ludzie już kojarzą błękit i fiolet
z linkami wykorzystanymi i nie.

18
00:01:22,954 --> 00:01:25,549
Lubią też wiedzieć,
które strony odwiedzili.

19
00:01:25,549 --> 00:01:28,474
Nie zmieniajcie tego
bez dobrego powodu.

20
00:01:28,474 --> 00:01:31,092
Skasuję te dwie reguły.

21
00:01:31,092 --> 00:01:34,221
Uważam, że lepiej
przy nich nie majstrować.

22
00:01:34,221 --> 00:01:38,972
Następna reguła jest wesoła.
To „a:hover” (ang. unosić się).

23
00:01:38,972 --> 00:01:46,138
Ta pseudoklasa wybierze element,
gdy użytkownik jeździ po nim myszką.

24
00:01:46,138 --> 00:01:48,408
Tylko wtedy będą zastosowane
właściwości.

25
00:01:48,408 --> 00:01:53,353
Przerwijcie filmik
i ponajeżdżajcie na linki myszką.

26
00:01:53,353 --> 00:01:57,406
Proszę, ja zaczekam. Najedźcie…

27
00:01:57,406 --> 00:02:01,165
Widzieliście, jak tło zmieniło kolor?
Świetny efekt!

28
00:02:01,165 --> 00:02:05,073
Pseudoklasy „hover” można użyć
do każdego elementu.

29
00:02:05,073 --> 00:02:07,662
Tylko że to nie działa
na każdym sprzęcie.

30
00:02:07,662 --> 00:02:11,421
W komórce - nie, bo wyświetlacz
reaguje tylko na dotyk.

31
00:02:11,421 --> 00:02:15,298
Świetnie jest mieć taki efekt,
ale nie polegajcie na nim.

32
00:02:15,298 --> 00:02:20,503
Co z tymi dwiema regułami? 
Są podobne do „hover”,

33
00:02:20,503 --> 00:02:23,067
zależne od tego, co akurat
robi użytkownik.

34
00:02:23,067 --> 00:02:27,191
Pseudoklasa „active” wybiera
elementy aktywne.

35
00:02:27,191 --> 00:02:34,076
Np. gdy użytkownik klika na link,
tuż przed zmianą strony.

36
00:02:34,076 --> 00:02:38,614
Pseudoklasa „focus”
wybiera elementy zogniskowane,

37
00:02:38,614 --> 00:02:42,394
np. gdy za pomocą klawiatury
poruszacie się po interfejsie.

38
00:02:42,394 --> 00:02:47,744
Zatrzymajcie wykład, klikajcie linki,
poruszajcie się po stronie. Co będzie?

39
00:02:47,744 --> 00:02:51,497
Widzieliście, że tło zmieniło kolor?

40
00:02:51,497 --> 00:02:56,415
Wybrałam tę samą właściwość dla „hover”,
„active” i „focus”, bo robią to samo:

41
00:02:56,415 --> 00:02:58,842
pozwalają użytkownikowi
zauważyć link.

42
00:02:58,842 --> 00:03:03,655
Wielu projektantów właśnie dlatego
używa tu tych samych właściwości.

43
00:03:03,655 --> 00:03:07,114
A gdybym chciała zmienić
kolor tego tła?

44
00:03:07,114 --> 00:03:13,552
Mogę zmieniać każdy po kolei,

45
00:03:13,552 --> 00:03:15,885
albo zrobić to,
czego się nauczyliśmy:

46
00:03:15,885 --> 00:03:20,140
pogrupować selektory w jednej
regule, oddzielając je przecinkami.

47
00:03:20,140 --> 00:03:27,214
Damy tu przecinek. Napiszmy
„a:active”, a potem „a:focus”.

48
00:03:27,214 --> 00:03:37,418
Teraz mogę skasować te dwie
reguły i zmienić wszystko naraz. Ładnie.

49
00:03:37,418 --> 00:03:41,531
To pierwsze pseudoklasy,
które pokazaliśmy, ale nie ostatnie.

50
00:03:41,531 --> 00:03:45,123
Innych pseudoklas CSS
poszukajcie w Internecie,

51
00:03:45,123 --> 00:03:48,653
albo zaczekajcie,
aż opowiemy wam więcej.