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!