Lubię muzea, ale nie mam czasu chodzić tam co dzień.
Na szczęście piękne obrazy mogę znaleźć w Internecie.
Także w Khan Academy, w sekcji historii sztuki.
Zrobiłam stronę z listami słynnych obrazów,
z nagłówkiem i listami dla każdego stylu oraz z linkami do artykułów o obrazach.
Żeby strona była bardziej elegancka, artystyczna,
Za pomocą reguł CSS zmieniłam czcionkę nagłówków - „h1” i „h2”.
Podoba mi się „cursive”, ale „fantasy” będzie lepsza, więc to zmienię.
Och, i tutaj też zmienię, bo są dwie reguły.
Życzę sobie, żeby wszystkie nagłówki korzystały z jednej rodziny czcionek.
Nie chcę za każdym razem zmieniać czcionki w dwóch miejscach.
Jak to rozwiązać? Z dwu reguł CSS zrobić jedną.
Zastanówcie się chwilę.
Zaproponujecie, by dodać tę samą klasę do „h1” i „h2”?
To by się udało i mielibyśmy jedną regułę CSS dla tej klasy.
Utrudnilibyśmy sobie jednak życie,
bo musielibyśmy dodawać tę klasę do każdego nowego „h1” i „h2”.
Jest lepszy sposób. Pogrupujemy selektory, używając przecinków.
Dodamy przecinek po „h1” i napiszemy „h2”.
Możemy skasować drugą regułę, bo wcieliliśmy ją w pierwszą.
I już! Strona wygląda tak samo.
Teraz mogę eksperymentować z rodziną czcionek, robiąc zmianę w 1 miejscu.
Zmieniam krój na „cursive” - i zmieniły się wszystkie nagłówki!
Uważajcie na przecinek. Selektory oddzielamy przecinkiem, nie spacją.
Spacji używamy do selektorów potomnych, a to jest coś zupełnie innego.
Grupowanie jest świetne do eliminowania powtórzeń.
Ale nie grupujcie dwóch selektorów tylko dlatego, że mają te same właściwości.
Grupujcie je, gdy chcecie, żeby zawsze miały te same właściwości.
Zwykle dlatego, że są sobie bliskie znaczeniowo.
Tu selektor dotyczy wszystkich nagłówków, bo chcę je zrobić w jednym stylu.
Poznacie jeszcze jedno częste zastosowanie grupowania selektorów.