CSS – kaskadowość i dziedziczenie


 

KASKADOWOŚĆ STYLÓW

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł.

Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się „bliżej” formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:

  1. Styl lokalny (inline)
  2. Rozciąganie stylu (SPAN)
  3. Wydzielone bloki (DIV)
  4. Wewnętrzny arkusz stylów
  5. Import stylów do wewnętrznego arkusza
  6. Zewnętrzny arkusz stylów
  7. Import stylów do zewnętrznego arkusza
  8. (Atrybuty prezentacyjne HTML – np. align=”…”, bgcolor=”…”, color=”…”, height=”…”, width=”…” i inne)

Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane elementom bezpośrednio w kodzie HTML, mimo iż wydawać by się mogło, że powinna tutaj zachodzić zasada taka jak w przypadku stylu lokalnego.

Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.

 

Łamanie kaskadowości

Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.

Przykład:

Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:

h6 { color: blue !important; background-color: green }

 

 

to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)

<h6 style="color: red; background-color: yellow">
	Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz niebieskiego, 
        mimo wstawienia stylu inline.
	Natomiast tło pozostaje żółte.
</h6>

 

 

 

 

 

otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.