• Artykuł

          

Encyklopedia: Jak dziedziczone są style - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-19

Dziedziczenie stylów polega na tym, że elementy znajdujące się niżej w hierarchii drzewa dokumentu (Rys. 1.) przejmują formatowanie elementów im nadrzędnych.

Rys. 1. Drzewo przykładowego dokumentu HTML.

Warunkiem dziedziczenia stylu jest brak przypisania podrzędnemu znacznikowi innego formatowania. Dla przykładu, jeżeli dla całego elementu body zostanie ustawiony czerwony kolor fontu, to akapity p oraz nagłówki hx, jeżeli nie został ustawiony dla nich osobny styl, również będą koloru czerwonego. Z tego względu właściwość dziedziczenia stylów jest bardzo przydatna i często wykorzystywana, ponieważ pozwala zaoszczędzić czas poprzez uniknięcie powielania kodu.

Z dziedziczeniem stylów związane jest pojęcie kaskadowości. Kaskadowość arkuszy stylów to ustalona hierarchia ważności źródeł definiowania stylu. Style mogą być umieszczone na trzy sposoby: w osobnym dokumencie, w nagłówku strony oraz inline – wewnątrz formatowanego znacznika (więcej na ten temat można przeczytać w części encyklopedii Jak umieścić CSS w HTML). W przypadku określenia stylu we wszystkich trzech źródłach, pierwszeństwo w formatowaniu elementu ma sposób jemu „bliższy”, to znaczy kolejno: styl inline, styl w nagłówku strony i na końcu, styl w osobnym dokumencie.

W przypadku określenia różnego stylu dla jednego elementu, w obrębie jednego arkusza, uwzględniony zostanie selektor bardziej szczegółowy. Dla przykładu, jeżeli ustawiony jest niebieski kolor fontu dla selektora p oraz zielony dla selektora p, to akapit ,należący do klasy zielony, będzie w kolorze zielonym, ponieważ jest bardziej precyzyjny.

Przykład

Przykład dziedziczenia koloru czerwonego przez akapity i nagłówek oraz pochylenia dla wszystkich akapitów (również dla akapitu z przypisanym id):

<html>
    <head>
    <title>Jak dziedziczone są style</title>
    <style type="text/css">
        body {color: red;}
        p {font-style: italic;}
        #akapit {color: blue;}
        h1 {text-decoration: underline;}
    </style>
    </head>
    <body>
    <h1>Nagłówek w odziedziczonym kolorze czerwonym i dodatkowo   podkreślony.</h1>
    <p>Akapit w odziedziczonym od body kolorze czerwonym oraz pochylony.</p>
    <p id="akapit">Akapit w przypisanym kolorze niebieskim i pochylony, jak   wszystkie akapity.</p>
</body>
</html>

Efekt działania przykładowego kodu został przedstawiony na Rys. 1.

Rys. 2. Przykład dziedziczenia stylów.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać style CSS w samouczku: