Co oznacza "kaskada" w kaskadowych arkuszach stylów?

Kaskadowe arkusze stylów lub CSS są tak skonfigurowane, że możesz mieć wiele właściwości wpływających na ten sam element. Niektóre z tych właściwości mogą ze sobą kolidować. Na przykład możesz ustawić kolor czcionki na czerwono na znaczniku akapitu, a następnie, później, ustawić kolor czcionki na niebieski. W jaki sposób przeglądarka wie, jaki kolor tworzą akapity? O tym decyduje kaskada.

Rodzaje arkuszy stylów

Istnieją trzy różne typy arkuszy stylów:

1. Arkusze stylów autora
   1. Są to arkusze stylów stworzone przez autora strony internetowej. Są tym, o czym większość ludzi myśli, kiedy myślą o arkuszach stylów CSS.
2. Arkusze stylów użytkownika
   1. Arkusze stylu użytkownika są ustawiane przez użytkownika strony internetowej. Dzięki nim użytkownik ma większą kontrolę nad wyświetlaniem stron.
3. Arkusze stylów agentów użytkownika
   1. Są to style, które przeglądarka internetowa stosuje do strony, aby pomóc wyświetlić tę stronę. Na przykład w XHTML większość wizualnych programów użytkownika wyświetla tag jako tekst pisany kursywą. Jest to zdefiniowane w arkuszu stylów agenta użytkownika.

Właściwości zdefiniowane w każdym z powyższych arkuszy stylów mają wagę. Domyślnie arkusz stylów autora ma największą wagę, a następnie arkusz stylów użytkownika, a na koniec arkusz stylów użytkownika. Jedynym wyjątkiem jest ważna reguła w arkuszu stylów użytkownika. Ma to większą wagę niż arkusz stylów autora.

Kaskadowe zamówienie

Aby rozwiązać konflikty, przeglądarki internetowe używają następującej kolejności sortowania, aby określić, który styl ma pierwszeństwo i będzie używany:

1. Najpierw poszukaj wszystkich deklaracji dotyczących danego elementu i przypisanego typu nośnika.
2. Następnie spójrz na arkusz stylów, z którego pochodzi. Jak wyżej, pierwsze arkusze stylów autora, następnie użytkownik, a następnie agent użytkownika. Dzięki! Ważnym stylom użytkowników mającym wyższy priorytet niż autor! Ważne style.
3. Im bardziej konkretny jest selektor, tym większy będzie jego priorytet. Na przykład styl na "div.co p" będzie miał wyższy priorytet niż tylko na znaczniku "p".
4. Na koniec sortuj reguły według kolejności, w jakiej zostały zdefiniowane. Reguły zdefiniowane później w drzewie dokumentu mają wyższy priorytet niż zdefiniowane wcześniej. Reguły z importowanego arkusza stylów są rozpatrywane przed regułami bezpośrednio w arkuszu stylów.