Z pączków przerzućmy się na marchewkę,
jeden z najzdrowszych produktów.
I przysmak królików.
Wiecie, że marchewki
są nie tylko pomarańczowe?
Dawniej były fioletowe.
Wciąż takie istnieją.
Mamy tu stronę z listą kolorów
i zdaniem o fioletowych początkach.
Zastosowaliśmy klasy, by przedstawić
nazwy w odpowiednich kolorach.
Podoba mi się to w liście, ale nie wiem,
jak fiolet sprawdzi się w tekście.
Zrezygnuję z kolorowego tła
i wybiorę subtelniejsze odcienie.
Jak powiedzieć przeglądarce, by fiolet
tutaj wyglądał inaczej niż tutaj?
Nie nazwą klasy, bo jest taka sama.
Trzeba by wprowadzić nową.
Znacznik też jest ten sam: „strong”.
Nie użyjemy selektora typu
„element plus nazwa klasy”.
Czy jest tu jakaś inna różnica?
To jest „strong” wewnątrz „li”,
a ten „strong” siedzi w „p”.
Różnica tkwi
w znacznikach-rodzicach. Powyżej.
Skorzystamy z tego, by zrobić regułę CSS
z użyciem tzw. selektorów potomnych.
To sposób wyboru elementów
na podstawie pozycji w dokumencie.
Żeby wybrać tylko fioletowy
„strong” w akapicie,
napiszemy „p”, a potem spację
(jest bardzo ważna!)
i nazwę klasy: „.purple”.
Dodamy właściwości,
które złagodzą kolorystykę.
Kolor tła - przezroczyste.
To anuluje poprzednie ustawienia.
Dobrze: zmieniliśmy ten fiolet, nie
zmieniając reszty fioletowego tekstu.
Zawsze, gdy użyjemy klasy „fiolet”
w takim akapicie,
pojawi się styl zastosowany później.
Pomajstrujmy jeszcze
przy naszym dokumencie.
Chcemy nadać jakiś styl
tylko znacznikom „strong” w „li”.
Najpierw znacznik-rodzic: „li”,
potem spacja i „strong”.
Zmienimy interlinię,
porozsuwamy tekst bardziej.
Ładnie. Jeśli chcemy, możemy nawet
dodać „ul” przed „li”,
aby mieć pewność, że nie zadziała
na „strong” w „ol” wewnątrz „li”.
Aby używać selektorów potomnych, musicie
dobrze poznać strukturę dokumentu:
które znaczniki
znajdują się w których.
Jeśli robicie wcięcia, będzie łatwo,
bo wcięcia odzwierciedlają
hierarchię znaczników.
Mamy „ul”, wewnątrz jest „li”,
a jeszcze głębiej: „strong”.
Jeśli nie dbaliście o wcięcia,
poprawcie to,
żeby było wam łatwiej
zrozumieć strukturę strony
i na tej podstawie
zastosować selektory CSS.
Można używać
bardzo różnych selektorów.
Np. aby wyszukiwać dany typ znacznika
w elemencie o pewnym ID,
albo dane ID w elementach
należących do pewnej klasy.
Każda kombinacja,
której potrzebujecie.
Pamiętajcie: po zmianie struktury strony
mogą nie działać stare reguły CSS.
Stosujcie je rozważnie,
myśląc o przyszłości.
Aby uniezależnić się od struktury
strony, używajcie klas.
Wróćmy do reguł, które określiłam.
Przemyślmy je.
Pierwsza nadaje styl wszystkim
fioletowym elementom w akapitach.
Czy nowe akapity z fioletowymi
elementami też mają mieć tę właściwość?
Tak, bo myślę, że zawsze
będzie wyglądało to dobrze.
Potrzebuję precyzyjniejszej reguły?
Gdyby akapity zawsze należały do elementu
z klasy „article", mogłabym to dodać.
Na razie precyzyjniej się nie da.
Druga reguła daje elementom „strong”
w listach określoną interlinię.
Czy te elementy w „li”
zawsze mają być tak luźno?
Może nie. Ta reguła
chyba jest zbyt ogólna.
Nie jestem pewna,
więc dodam klasę do tego „ul”
i zmienię to w „ul.spacey”,
żeby ograniczyć zasięg reguły.
Rozwijając swoją stronę, będę mogła
uogólniać lub precyzować reguły.
Zyskaliście kolejne narzędzie w CSS!
Poćwiczcie, by móc używać go,
gdy będzie to potrzebne!