Kaskadowość
Kaskadowość, czyli "cascading", to fundamentalna cecha języka CSS (Cascading Style Sheets), która odgrywa kluczową rolę w określaniu, które style mają zastosowanie do elementów na stronie internetowej. Kaskadowość definiuje, jak różne style i reguły są łączone, rozstrzyga konflikty między nimi i ustala, które style ostatecznie zostaną zastosowane do elementów.
Kaskadowość w CSS opiera się na trzech głównych zasadach:
Źródło - Style mogą pochodzić z różnych źródeł, takich jak style inline (w linii), arkusze stylów wewnętrzne, zewnętrzne arkusze stylów oraz style użytkownika i przeglądarki. Kaskadowość określa hierarchię tych źródeł i decyduje, które style będą miały pierwszeństwo.
Specyficzność - Każda reguła stylu ma określoną specyficzność, która jest oparta na selektorach użytych w regule. Specyficzność pomaga rozstrzygnąć konflikty, gdy różne reguły próbują zastosować style do tego samego elementu. Reguła o wyższej specyficzności ma pierwszeństwo przed regułą o niższej specyficzności.
Kolejność - Kiedy dwie lub więcej reguł ma taką samą specyficzność, kaskadowość uwzględnia kolejność, w jakiej reguły są zdefiniowane. Styl umieszczony później w kodzie ma pierwszeństwo przed stylem wcześniejszym.
Dzięki zasadom kaskadowości w CSS możemy precyzyjnie kontrolować, jakie style zostaną zastosowane do poszczególnych elementów na stronie. Daje nam to elastyczność i możliwość tworzenia spójnych i atrakcyjnych wizualnie projektów stron internetowych.
Na dany element mogą działać style pochodzące z różnych miejsc:
domyślne style przeglądarki - przeglądarka narzuca swoje arkusze stylów. Styl użytkownika modyfikuje domyślny styl przeglądarki.
zewnętrzny arkusz stylów
1<head>
2 <link rel="stylesheet" href="styles.css">
3</head>- wewnętrzy arkusz stylów w HTML
1<head>
2 <style>
3 .my-paragraph {
4 color: blue;
5 }
6 </style>
7</head>- style inline w HTML
1<p style="color: red;">Treść akapitu</p>Możemy więc ostylować jeden element z różnych miejsc. W przypadku, gdy na jeden element działa styl z różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w następującej kolejności:
- Domyślne ustawienia przeglądarki
- Zewnętrzny arkusz stylów
- Wewnętrzny arkusz stylów
- Styl inline
- Styl !important - antypattern
Porządek wyświetlania elementów na stronie może zostać zmieniony przez dodanie dyrektywy !important na końcu wartości danego atrybutu: qwe dyrektywy !
1p {
2 background-color: red !important;
3}Powyższy przykład spowoduje, że wszystkie akapity zostaną podkreślone i to niezależnie od tego, gdzie będzie się znajdował arkusz.
A co jeśli używamy tego samego miejsca, ale innego selektora?
Grupa pierwsza - priorytet najważniejszy - selektor id (
#element.elementelementSelektory
*,>+~