Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Kaskadowość stylów ze względu na źródło

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:

  1. Style inline.
  2. Style osadzone.
  3. Zewnętrzne style (dołączone w elemencie link).
  4. Style użytkownika.
  5. 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.

Artykuł: Teoria emocji kolorów

Teoria emocji kolorów

Artykuł: DRAM Speculative Leadoff

DRAM Speculative Leadoff

Artykuł: Burst Mode DMA

Burst Mode DMA

Artykuł: Tryby DMA

Tryby DMA

Artykuł: DMA w kontekście historycznym

DMA w kontekście historycznym

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły