Kaskada i dziedziczenie

Arkusze, które nie wykorzystują kaskady, a tylko używają selektora klasy są przezywane przez webmasterów „cierpiące na classitis

Arkusz stylów jest „aplikowany” na dokument wg reguł kaskadydziedziczenia.

Kaskada Bug w IE6

Kaskada decyduje, które właściwości zostaną zaaplikowane. Jeśli kilka reguł pasuje do danego elementu w dokumencie, to nałożą się wg ich ważności. Właściwości z najważniejszych reguł przykryją właściwości z mniej ważnych.

 p.wazny {color: red}
 p {color:blue; background: yellow;}

 <p class="wazny">ten tekst będzie czerwony na żółtym tle</p>

 Selektor p.wazny jest bardziej szczegółowy, niż p. Przez to pierwsza reguła jest ważniejsza od drugiej i akapit będzie miał czerwony kolor tekstu. Ponieważ kaskada jest osobna dla każdej właściwości, akapit będzie miał także ustalony kolor tła nadany w mniej ważnej regule, bo nie został on zmieniony w ważniejszej. 

ważność autor-user. Zmieniła się w CSS21.

Ważność określa kolejno:

!important
reguły oznaczone jako ważne mają pierwszeństwo
precyzja selektora
im bardziej precyzyjny selektor, tym ważniejszy.
kolejność dołączania arkuszy
później dołączone arkusze są ważniejsze.
kolejność danej reguły
późniejsze nadpisują wcześniejsze p {color: #f00 !important;} jest ważniejsze, niż: ul#menu > li > a {color:#0ff;} ponieważ !important nadaje większą ważność pierwszej regule, niż precyzja selektora drugiej. p {background: #0ff url(foo.png) 50% 50% no-repeat;} p {background-color: #f00;} Paragrafy będą miały czerwone tło z wyśrodkowaną na nim grafiką. Pierwsza reguła ustali wszystkie wartości dla tła, a druga zmieni z nich tylko kolor.

Co zrobić, gdy nie widać jakiejś reguły?

Najpierw za wartościami właściwości dodaj !important:

 .przyklad {color:red !important;}

Jeśli to pomaga, to znaczy, że w którymś z arkuszy jest bardziej precyzyjny selektor pasujący do tego samego elementu. Nie kasuj !important, zostaw tak jak było.

Jeśli to nie pomaga, to upewnij się, że selektor na pewno pasuje do tego elementu w dokumencie, którego się spodziewasz. Możesz mieć gdzieś literówkę albo używać selektorów w nieodpowiedniej kolejności. Możesz nadać elementowi identyfikator i użyć selektora identyfikatora — to prosty zestaw, który najpewniej zadziała.

 <p id="to-na-pewno-ten">test</p>

 #to-na-pewno-ten {color:red;}

Jeśli wszystko nie działa, usuń błędy.

Precyzja selektorów

Najmniejszą precyzję i tym samym ważność ma selektor ogólny (*). W dalszej kolejności, najogólniejsze są selektory zawierające nazwy elementów i pseudoelementów (p, :first-letter...). Dokładniejsze od nich są selektory atrybutów, klas i pseudoklas ([type=submit], .abc, :hover...). Jeszcze bardziej precyzyjne są selektory identyfikatorów (#abc). Nad wszystkimi selektorami góruje atrybut style elementów HTML (często używany za pośrednictwem Javascript), i właściwości z !important.

Ważność selektora złożonego z kilku selektorów prostych jest sumą precyzji jego składników.

Jeśli zatem chcemy porównać precyzję dwóch selektorów, możemy to zrobić tak:

  1. Policzyć ilość identyfikatorów — im więcej, tym selektor dokładniejszy.
  2. Jeśli jest tyle samo, policzyć ilość klas, pseudoklas i innych atrybutów — im więcej, tym dokładniej.
  3. Jeśli jest tyle samo, policzyć ilość elementów i pseudoelementów — im więcej, tym precyzyjniej.

Kilka przykładów uporządkowanych od najogólniejszego do najdokładniejszego:

 *
 li
 li:first-line
 ul ol+li
 h1 + *[rel=up]
 ul ol li.red
 li.red.level
 #x34y
 style=""
 !important

Dziedziczenie

W typowym arkuszu stylów nie przypisuje się wszystkich właściwości wszystkim elementom (np. ustawia się preferowany krój czcionki tylko dla <html>). Pozostałe elementy otrzymują swoje właściwości przez dziedziczenie, czyli przekazanie właściwości z elementu-rodzica do elementu-dziecka.

Nie wszystkie właściwości są domyślnie dziedziczone. Np. krój i wielkość pisma jest, ale tło i obramowanie — nie. Wymusić dziedziczenie można podając inherit jako wartość. IE


Zmodyfikowano: 20.11.2011, 01:48
submit