Hierarchia stylów (Cascading Style Sheets)

Jedną z najważniejszych cech CSS (Cascading Style Sheets) jest jego kaskadowa natura. Kaskadowość w CSS oznacza, że style mogą być nakładane z różnych źródeł i łączone według określonych zasad. Te zasady hierarchii stylów określają, które style zostaną zastosowane, jeśli istnieje konflikt.

Kaskadowość

Kaskadowość w CSS oznacza, że przeglądarka łączy style z różnych źródeł i stosuje je do elementów strony według ustalonej kolejności. Jeśli na dany element ma wpływ wiele reguł CSS, to hierarchia decyduje, która z nich będzie miała pierwszeństwo.

Specyficzność selektorów

Specyficzność określa, jak precyzyjny jest dany selektor. Im bardziej szczegółowy selektor, tym większy jego priorytet.

Hierarchia specyficzności wygląda następująco:

• Selektory tagów HTML (np. p, h1) - najmniejsza specyficzność.
• Selektory klas (np. .nazwa-klasy) - wyższa specyficzność niż selektory tagów.
• Selektory ID (np. #nazwa-id) - mają wyższy priorytet niż klasy i tagi.
• Styl inline (np. style="color: red;") - ma największą specyficzność, wyższą niż ID, klasy i tagi.

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Ważność (!important)

Atrybut !important nadpisuje wszystkie inne zasady, niezależnie od specyficzności selektora. Powinien być używany ostrożnie, ponieważ może utrudniać debugowanie kodu.

p {
    color: blue !important;
}

Kolejność deklaracji

Jeśli dwie reguły mają tę samą specyficzność, to styl, który pojawi się później w kodzie, nadpisze wcześniejszy.

W poniższym przypadku tekst będzie niebieski, ponieważ druga reguła pojawia się później i nadpisuje poprzednią.

p {
    color: green;
}
p {
    color: blue;
}

Źródła stylów

W CSS style mogą pochodzić z różnych źródeł, takich jak:

• Przeglądarkowe style domyślne - Każda przeglądarka ma domyślne style dla elementów (np. przeglądarka automatycznie ustawia marginesy dla nagłówków).
• Style użytkownika - Style dodawane przez użytkownika, np. arkusze stylów osób z problemami wzroku.
• Style autora - Style definiowane przez twórcę strony internetowej (czyli to, co piszemy w naszym CSS).

Podsumowanie hierarchii stylów

Hierarchia stylów w CSS jest kluczowa dla zrozumienia, jak style są stosowane i dlaczego niektóre reguły mają wyższy priorytet. Podstawowe zasady obejmują:

• Specyficzność selektorów.
• Kolejność deklaracji.
• Zastosowanie !important.
• Kaskadowość z różnych źródeł.