CSS/Budowa i działanie stylów

Z Wikibooks, biblioteki wolnych podręczników.

[edytuj] Kaskadowość

Kaskadowość w CSS definiuje hierarchię źródeł stylów.

Polega ono na tym, że w pierwszej kolejności brane są pod uwagę style pochodzące z zewnętrznego pliku.Te z kolei mogą zostać nadpisane przez style zdefiniowane w nagłówku dokumentu.Style zdefiniowane w ciele dokumentu (jego konkretnych elementach) znajdują się na końcu tego "łańcuszka" jak znajdujące się najbliżej opisywanego elementu strony.

Do zrobienia: podać przykład

[edytuj] 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>

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>

[edytuj] 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.