Selektory i kaskada

Arkusz stylów CSS: selektory, kolory i tekst - Informatyka - liceum klasa 2 (HTML/CSS/JS)

Reguła CSS to **selektor** i lista deklaracji `właściwość: wartość;`. Najważniejsze selektory: - `p` - wszystkie elementy danego rodzaju, - `.wazne` - elementy z klasą (`class="wazne"`), wiele elementów może mieć tę samą klasę, - `#stopka` - element o identyfikatorze (`id="stopka"`), jeden na stronie, - `nav a` - odnośniki **wewnątrz** `nav` (selektor potomka), - `a:hover` - pseudoklasa: odnośnik, nad którym jest kursor myszy. Gdy kilka reguł ustawia to samo, wygrywa bardziej szczegółowa (id przed klasą, klasa przed elementem), a przy równej - późniejsza. To **kaskada**.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Gazetka</title>
  <style>
    p {
      color: #334155;
    }
    .wazne {
      color: #b91c1c;
      font-weight: bold;
    }
    #stopka {
      font-size: 0.8rem;
    }
    nav a {
      color: #4338ca;
      text-decoration: none;
    }
    nav a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Gazetka szkolna</h1>
  <nav>
    <a href="#sport">Sport</a>
    <a href="#kultura">Kultura</a>
  </nav>
  <p class="wazne">Jutro dzień otwarty szkoły.</p>
  <p>Drużyna siatkówki wygrała turniej powiatowy.</p>
  <p class="wazne">Zapisy na kółka do piątku.</p>
  <p id="stopka">Redakcja: klasa 2b</p>
</body>
</html>

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

Wszystkie lekcje kursu Informatyka - liceum klasa 2·Zaloguj się, aby zapisać postęp na koncie.