Kaskada: która reguła wygrywa

CSS: kolory, tekst i selektory - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Gdy kilka reguł ustawia ten sam element, decyduje kaskada. Po pierwsze dziedziczenie: kolor i krój z body przechodzą na elementy w środku. Po drugie ważność selektora: id wygrywa z klasą, a klasa ze znacznikiem. Po trzecie kolejność: przy równej ważności wygrywa reguła zapisana niżej. Dlatego ostatni akapit jest niebieski, choć ma też klasę uwaga. Zamień miejscami dwie reguły p i sprawdź, co się zmieni.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Kaskada</title>
  <style>
    body {
      font-family: Verdana, sans-serif;
      color: black;
    }
    p {
      color: green;
    }
    p {
      color: gray;
    }
    .uwaga {
      color: red;
    }
    #ostatni {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Kaskada w praktyce</h1>
  <p>Zwykły akapit: kolor z reguły dla p.</p>
  <p class="uwaga">Akapit z klasą: klasa jest ważniejsza niż znacznik.</p>
  <p class="uwaga" id="ostatni">Akapit z klasą i id: id wygrywa.</p>
  <h2>Nagłówek h2 dziedziczy krój z body</h2>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.