-
Wracamy na stronę
z listami sławnych obrazów.
-
CSS zaczyna się od reguły rodziny
czcionek - wszędzie są bezszeryfowe.
-
Potem jest reguła selektorów grupowych.
Zmienia rodzinę czcionek w „h1” i „h2”.
-
Dalej - kilka reguł, których jeszcze
nie widzieliście. Wyglądają dziwnie.
-
Zaczynają się od „a”,
po nim jest dwukropek i słowo.
-
Co oznacza dwukropek?
Co wybierają te reguły?
-
Wszystko, co zaczyna się dwukropkiem,
nazywamy pseudoklasą.
-
Pseudoklasa wybiera elementy
wg informacji spoza strony
-
lub tam, gdzie nie da się
zastosować innych selektorów.
-
Tu użyję pseudoklas, by nadać styl
linkom zależnie od ich stanu.
-
Pseudoklasa „link” wybierze wszystkie
linki, na które użytkownik nie kliknął.
-
Większość przeglądarek
wyświetla je na niebiesko.
-
Pseudoklasa „visited” wybierze
wszystkie linki już kliknięte.
-
Większość przeglądarek
wyświetla je na fioletowo.
-
Jeśli naprawdę chcemy,
możemy zmienić kolory.
-
Niech to jednak będzie uzasadnione.
-
Ludzie już kojarzą błękit i fiolet
z linkami wykorzystanymi i nie.
-
Lubią też wiedzieć,
które strony odwiedzili.
-
Nie zmieniajcie tego
bez dobrego powodu.
-
Skasuję te dwie reguły.
-
Uważam, że lepiej
przy nich nie majstrować.
-
Następna reguła jest wesoła.
To „a:hover” (ang. unosić się).
-
Ta pseudoklasa wybierze element,
gdy użytkownik jeździ po nim myszką.
-
Tylko wtedy będą zastosowane
właściwości.
-
Przerwijcie filmik
i ponajeżdżajcie na linki myszką.
-
Proszę, ja zaczekam. Najedźcie…
-
Widzieliście, jak tło zmieniło kolor?
Świetny efekt!
-
Pseudoklasy „hover” można użyć
do każdego elementu.
-
Tylko że to nie działa
na każdym sprzęcie.
-
W komórce - nie, bo wyświetlacz
reaguje tylko na dotyk.
-
Świetnie jest mieć taki efekt,
ale nie polegajcie na nim.
-
Co z tymi dwiema regułami?
Są podobne do „hover”,
-
zależne od tego, co akurat
robi użytkownik.
-
Pseudoklasa „active” wybiera
elementy aktywne.
-
Np. gdy użytkownik klika na link,
tuż przed zmianą strony.
-
Pseudoklasa „focus”
wybiera elementy zogniskowane,
-
np. gdy za pomocą klawiatury
poruszacie się po interfejsie.
-
Zatrzymajcie wykład, klikajcie linki,
poruszajcie się po stronie. Co będzie?
-
Widzieliście, że tło zmieniło kolor?
-
Wybrałam tę samą właściwość dla „hover”,
„active” i „focus”, bo robią to samo:
-
pozwalają użytkownikowi
zauważyć link.
-
Wielu projektantów właśnie dlatego
używa tu tych samych właściwości.
-
A gdybym chciała zmienić
kolor tego tła?
-
Mogę zmieniać każdy po kolei,
-
albo zrobić to,
czego się nauczyliśmy:
-
pogrupować selektory w jednej
regule, oddzielając je przecinkami.
-
Damy tu przecinek. Napiszmy
„a:active”, a potem „a:focus”.
-
Teraz mogę skasować te dwie
reguły i zmienić wszystko naraz. Ładnie.
-
To pierwsze pseudoklasy,
które pokazaliśmy, ale nie ostatnie.
-
Innych pseudoklas CSS
poszukajcie w Internecie,
-
albo zaczekajcie,
aż opowiemy wam więcej.
