mozilla
Wyniki wyszukiwania

    Kaskadowość i dziedziczenie

    Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców.

    Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu.

    Informacja: Kaskadowość i dziedziczenie

    Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania.

    Trzy główne źródła informacji o stylu tworzą kaskadę. Są to:

    • Domyślny styl przeglądarki dla danego języka znaczników
    • Styl określony przez użytkownika czytającego stronę
    • Styl podpięty do dokumentu przez jego autora

    Styl użytkownika modyfikuje domyślny styl przeglądarki. Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora.

    Przykład
    Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a.

    Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku userContent.css w profilu przeglądarki.

    Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki.

    Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a.

    Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów.

    Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY.

    Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki.

    Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu.

    Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej.

    Więcej szczegółów
    CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego !important.

    Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą.

    Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie w specyfikacji CSS.

    Zadanie: Używanie dziedziczenia

    Wyedytuj Twój przykładowy plik CSS.

    Dodaj tę linię poprzez skopiowanie i wklejenie jej. Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG:

    p {color: blue; text-decoration: underline;}
    

    Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P.

    Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P.

    Przed
    Cascading Style Sheets
    Po
    Cascading Style Sheets


    Wyzwanie
    Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone:
    Cascading Style Sheets


    Co dalej?

    Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

    Twój przykładowy arkusz stylów opisuje style dla znaczników P oraz STRONG, zmieniając styl odpowiednich elementów w Twoim dokumencie. Następna strona opisuje, jak określić styl w bardziej selektywny sposób: Selektory

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Sheppy, Verruckt, teoli, gandalf, Ptak82, Mgjbot, Takenbot, Anonymous, Witia
    Ostatnia aktualizacja: teoli,