„Prawidłowe odwołania do elementów; wdrażanie dziedziczenia; zastępowanie dziedziczenia przez stosowanie dyrektywy !important, określanie stylu elementów na podstawie pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).”
To już ostatni wpis poświęcony egzaminowi 70-480, a o większości elementów wymienionych w opisie podrozdziału wspominałem w poprzednim artykule. Opowiem dziś zatem tylko o dziedziczeniu w CSS oraz nadpisywaniu styli.
Dziedziczenie w CSS
Dziedziczenie w CSS możliwe jest za pomocą selektorów zależnych, o których była pokrótce mowa w poprzednim wpisie.
Spójrzmy na przykład (zerknij na strukturę HTML, a potem style CSS):
Kontenerowi div ustawiony został styl, który nadaje czerwony kolor dla tekstu. Następnie wykorzystano selektor zależny div p, który dodatkowo zwiększa czcionkę oraz dodaje podkreślenie tekstu dla elementów p, które znajdują się bezpośrednio wewnątrz div. W strukturze HTML mamy dwa krótkie teksty – pierwszy bezpośrednio w elemencie blokowym div, a drugi w paragrafie. Rezultatem jest czerwony kolor tekstu znajdującego się bezpośrednio w bloku div oraz również czerwony kolor tekstu znajdujący się w paragrafie oraz dodatkowo większa czcionka i podkreślenie. Widać wyraźnie, że kolor czerwony dla tekstu, ustawiony dla elementu nadrzędnego jest dziedziczony przez elementy znajdujące się wewnątrz struktury, które nie nadpisały tego stylu.
Więcej szczegółów w specyfikacji W3C: http://www.w3.org/TR/CSS21/cascade.html
Nadpisywanie styli CSS
Spójrzmy od razu na przykład (zerknij na strukturę HTML, a potem style CSS):
Widzimy tutaj, że dla elementu div.container ustawiony został kolor tekstu na czerwony. W środku znajduje się kolejny element div.inside, który ma ustawiony kolor tekstu na niebieski. Tekst, który znajduje się poza tym wewnętrznym elementem div posiada rzeczywiście kolor czerwony, a tekst znajdujący się wewnątrz elementu .inside posiada kolor niebieski.
By wymusić styl również dla elementów podrzędnych wykorzystać możemy wyrażenie !important. Nie powinno być ono jednak nadużywane i najlepiej jest go unikać i tworzyć właściwą strukturę HTML, która nie będzie wymagała takich rozwiązań.
Spójrzmy na przykład wymuszenia stylu dla elementów podrzędnych. Jest to ten sam przykład, co wyżej, z tą różnicą, że tym razem dla bloku .container nałożony został styl, który zawiera wyrażenie !important:
Podsumowanie
I to byłoby na tyle :) Powodzenia w przygotowaniach do egzaminu 70-480 i na samym egzaminie. Jest to dopiero początek drogi w wielkim świecie WWW.
