Selektor typu w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest selektor typu w CSS?

Selektor typu w CSS wskazuje elementy HTML na podstawie ich nazwy znacznika. Oznacza to, że zapisujesz nazwę elementu, np. p, h1, h2, div, table, a reguła CSS zostanie zastosowana do wszystkich takich elementów w dokumencie.

Przykład

h2 {
  background-color: green;
}

Ten zapis oznacza: zastosuj zielone tło do wszystkich elementów <h2> na stronie.

Nie oznacza to zmiany tła całej strony ani koloru tekstu. Właściwość background-color odpowiada za kolor tła, a selektor h2 wskazuje wyłącznie nagłówki drugiego poziomu.

Inne przykłady selektorów typu

p {
  color: blue;
}

Zmienia kolor tekstu wszystkich akapitów <p> na niebieski.

body {
  background-color: yellow;
}

Ustawia żółte tło całej strony, ponieważ selektorem jest body.

h1 {
  font-size: 32px;
}

Zmienia rozmiar czcionki wszystkich nagłówków <h1>.

Ważne na egzaminie

W regule CSS trzeba odróżniać:

  • selektor — wskazuje, czego dotyczy styl, np. h2,
  • właściwość — określa, co zmieniamy, np. background-color,
  • wartość — określa ustawienie, np. green.

Dla zapisu h2 { background-color: green; } poprawna interpretacja to: zielone tło nagłówków drugiego poziomu.