CSS – kaskadowość i dziedziczenie

 w strony www  Tagi CSS / strony www przez

 

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.

 

Drzewo dokumentu i dziedziczenie

Drzewo elementów umieszczonych w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root).

Jeżeli nasza strona ma następującą strukturę:

<html> 
  <head> 
    <title>...</title> 
  </head> 
  <body> 
    <h1>...</h1> 
    <p>...</p> 
    <table> 
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr>
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr> 
    </table> 
  </body> 
</html>

to jej drzewo wygląda następująco:

Drzewo dokumentu

gdzie:

  • Element TABLE jest dzieckiem elementu BODY.
  • Element TABLE jest potomkiem elementu HTML oraz BODY.
  • Element TABLE jest rodzicem dwóch elementów TR.
  • Element TABLE jest przodkiem czterech elementów TD oraz dwóch TR.
  • Element TABLE jest bratem elementów H1 oraz P.
  • Elementy H1 oraz P są braćmi poprzedzającymi elementu TABLE.
  • Element TABLE jest bratem następującym elementów H1 oraz P.
  • Element TABLE jest elementem poprzedzającym elementu TR oraz TD.
  • Element TABLE jest elementem następującym elementu BODY oraz HTML.

Elementy leżące niżej w hierarchii drzewa dokumentu, zawierają się wewnątrz znaczników nadrzędnych, np. znaczniki <body> oraz </body> muszą być umiejscowione pomiędzy znacznikami <html> i </html>, które są nadrzędne dla wszystkich innych (root).

 

Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom.

 

Właściwości, które są dziedziczone:

  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • text-align

Właściwości, które nie są dziedziczone:

  • background
  • border
  • margin
  • padding
  • width
  • height