CSS/Dziedziczenie i kaskadowość

Kaskada

Ważnym pojęciem w CSS jest kaskada - której to standard ten zawdzięcza też nazwę.

Można zawrzeć styl elementu w kilku miejscach. Na przykład oddzielając go innymi definicjami:

 .zielony { background-color: green; }
 
 .pogrubiony { font-weight: bold; }
 
 .zielony { font-family: sans-serif; }

Pewien problem pojawia się, gdy kilka selektorów dotyczy danego elementu:

 p { margin: 10px 0 5px; }
 p.zielony { background-color: green; }

W tym wypadku element <p class="zielony"> będzie miał zarówno zmieniony margines jak i tło. Po prostu interpreter CSS (w naszym przypadku - przeglądarka internetowa) dopasowuje po kolei kolejne selektory do znalezionego elementu - jest to właśnie kaskada. W naszym przypadku pasują oba - więc oba zostaną dopasowane. Co jednak, gdy umieścimy w różnych selektorach sprzeczne informacje?

 p { background-color: white; }
 p.zielony { background-color: green; }

W tym momencie interpreter będzie kierował się zasadą: obowiązujący jest styl położony najbliżej elementu, to znaczy taki, który najdokładniej go opisuje (kolejno, według istotności: przez identyfikator, klasę, położenie wobec innych elementów, sam element). Tym razem to drugi selektor lepiej opisuje element <p class="zielony"> i dlatego nasz paragraf będzie miał zielone tło. Ostatecznie, gdy interpreter ma wątpliwości, bierze ostatni w kolejności wystąpienia w pliku selektor. Niestety, w praktyce przeglądarki bardzo różnie stosują zasadę kaskady i jedyną radą jest dobre testowanie stron i unikanie niejednoznaczności.

Należy podkreślić, że rozwiązywanie konfliktów odbywa się tylko w odniesieniu do skonfliktowanych atrybutów, pojawiających się w różnych selektorach więcej niż raz - wszystkie pozostałe są stosowane wprost.

Dziedziczenie

Oprócz kaskady na ostateczny wygląd danego elementu strony ma wpływ również jego umiejscowienie względem innych elementów.

Jeżeli np. do elementu DIV zostanie przypisany czerwony kolor czcionki, to ten kolor zostanie odziedziczony przez wszystkie elementy znajdujące się wewnątrz tego DIV'a.

<div style="color:red;"> <p>akapit w DIV-ie. <b>Pogrubienie</b></p> <div>inny DIV</div> <tt>Tekst drukowany</tt> </div>

akapit w DIV-ie. Pogrubienie inny DIV Tekst drukowany

Dana cecha będzie dziedziczona dopóki, któryś z elementów nie zmodyfikuje jej. Wtedy też nowa zmodyfikowana cecha będzie dziedziczona dalej, przez elementy podrzędne.

<div style="color:red;"> <p style="color:blue">niebieski akapit w DIV-ie. <b>Pogrubienie</b></p> <div>inny DIV</div> <tt>Tekst drukowany</tt> </div>

niebieski akapit w DIV-ie. Pogrubienie inny DIV Tekst drukowany

Dyrektywa !important

Zarówno kaskada jak i dziedziczenie określają porządek przyjmowania stylów przez elementy. Ów porządek może zostać zmieniony przez dodanie dyrektywy !important na końcu wartości danego atrybutu, ale tuż przed średnikiem:

p {text-decoration: underline !important;}

Powyższy przykład spowoduje, że wszystkie akapity zostaną podkreślone i to niezależnie od tego gdzie będzie się znajdował arkusz.