czwartek,
Kaskadowość stylów ze względu na źródło
Zrozumienie kaskady stylów CSS pozwala świadomie kontrolować wygląd elementów strony internetowej.
Dobrym wprowadzeniem do tematu powinien być poniższy przykład. Zastosowano w nim dwie metody dołączenia stylów, style lokalne (inline) oraz osadzone. Wszystkie deklaracje mają taki sam selektor (p) i dotyczą tej samej własności (koloru tekstu). Następuje tutaj swoisty konflikt i przeglądarka musi to jakoś zinterpretować. Jaki ostatecznie będzie kolor tekst z poniższego przykładu?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaskada stylów</title>
<style>
p { color: orange;}
p { color: pink;}
</style>
</head>
<body>
<p style="color: blue; color: black;">Lorem ipsum, dolor sit amet.</p>
</body>
</html>
Tekst zostanie wyświetlony w kolorze czarnym, ale ważniejsza jest odpowiedź na pytanie „dlaczego tak się stało?”. Po pierwsze w danym źródle najwyższy priorytet ma ostatnia deklaracja, wynika z tego, że w stylach osadzonych kolor tekstu zdefiniowano jako różowy, w stylach inline czarny. Pozostało do rozstrzygnięcia, które źródło jest ważniejsze. Na szczęście istnieje reguła, która jest honorowana przez przeglądarki. Narzucono następującą kolejność stylów, w kolejności od najważniejszego do najmniej ważnego:
- Style inline.
- Style osadzone.
- Zewnętrzne style (dołączone w elemencie link).
- Style użytkownika.
- Style przeglądarki.
Zwróć uwagę, że w materiale uwzględniono jedynie deklaracje z identycznym selektorem bez wymuszonej ważności stylów. W przypadku dołączenia np. klas i deklaracji ich dotyczących kaskada stanie się mniej oczywista. Tematyka kaskady stylów CSS będzie kontynuowana w kolejnych materiałach.
