Kaskadowość CSS to mechanizm decydujący, który styl zostanie zastosowany do elementu HTML, gdy kilka reguł dotyczy tego samego elementu lub tej samej właściwości.
W praktyce przeglądarka analizuje m.in.:
- źródło stylu,
- szczegółowość selektora,
- kolejność zapisania reguł,
- użycie stylu inline,
- ewentualnie !important.
Źródła stylów CSS
Najczęściej spotykane są trzy sposoby dodawania stylów:
- Zewnętrzny arkusz stylów:
<link rel="stylesheet" href="style.css">
- Wewnętrzny arkusz stylów w sekcji
head:
<style>
img { border-color: red; }
</style>
- Styl inline zapisany bezpośrednio w elemencie:
<img src="foto.jpg" style="margin: 15px">
Priorytet stylów
Przy tej samej ważności reguł styl inline ma zwykle wyższy priorytet niż style z arkusza wewnętrznego i zewnętrznego. Dlatego zapis:
<img style="margin: 15px">
nadpisze wcześniejsze ustawienie:
img { margin: 20px; }
Nadpisywanie pojedynczych właściwości
CSS nie musi nadpisywać całej wcześniejszej reguły. Może zmienić tylko jedną właściwość. Przykład:
img { border: 3px solid black; }
img { border-color: red; }
Efekt: ramka nadal ma grubość 3px i styl solid, ale jej kolor zostaje zmieniony na czerwony.
Znaczenie w zadaniach egzaminacyjnych
W pytaniach tego typu należy osobno analizować każdą właściwość, np. border, border-color, margin. Poprawny wynik zależy od tego, która reguła ma wyższy priorytet dla konkretnej właściwości.