Selektor klasy w CSS

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

Selektor klasy służy do przypisywania stylów CSS elementom HTML oznaczonym określoną klasą. W arkuszu stylów nazwę klasy poprzedza się kropką, np. .format2.

Składnia

.nazwaKlasy {
  właściwość: wartość;
}

Przykład:

.format2 {
  text-decoration: line-through;
}

Taki zapis oznacza, że każdy element HTML z atrybutem class="format2" otrzyma dekorację tekstu w postaci przekreślenia.

Użycie w HTML

<p class="format2">formatowanie</p>

W tym przykładzie akapit zostanie sformatowany zgodnie z regułą CSS dla klasy .format2.

Ważne zasady

  • W CSS klasę zapisuje się z kropką: .format2.
  • W HTML w atrybucie class podaje się samą nazwę: format2, bez kropki.
  • Jedna klasa może być użyta dla wielu elementów.
  • Jeden element HTML może mieć kilka klas, np. class="format2 wyróżnienie".

Przykład egzaminacyjny

Jeżeli w CSS występuje zapis:

.format1 { text-decoration: overline; }
.format2 { text-decoration: line-through; }
.format3 { text-decoration: underline; }
.format4 { text-decoration: none; }

a na ilustracji tekst jest przekreślony, właściwą klasą jest .format2, ponieważ line-through oznacza przekreślenie tekstu.