Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Atrybut klasy HTML


Atrybut HTML classsłuży do określenia klasy elementu HTML.

Wiele elementów HTML może dzielić tę samą klasę.


Korzystanie z atrybutu klasy

Atrybut jest classczęsto używany do wskazania nazwy klasy w arkuszu stylów. Może być również używany przez JavaScript do uzyskiwania dostępu do elementów o określonej nazwie klasy i manipulowania nimi.

W poniższym przykładzie mamy trzy <div>elementy z classatrybutem o wartości „miasto”. Wszystkie trzy <div> elementy będą miały jednakowy styl zgodnie z .city definicją stylu w sekcji head:

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

W poniższym przykładzie mamy dwa <span>elementy z classatrybutem o wartości „notatka”. Oba <span> elementy będą miały jednakowy styl zgodnie z .note definicją stylu w sekcji nagłówka:

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Wskazówka: Atrybutu classmożna użyć w dowolnym elemencie HTML.

Uwaga: w nazwie klasy rozróżniana jest wielkość liter!

Wskazówka: Więcej informacji o CSS znajdziesz w naszym samouczku CSS .



Składnia dla klasy

Aby stworzyć klasę; wpisz kropkę (.), a następnie nazwę klasy. Następnie zdefiniuj właściwości CSS w nawiasach klamrowych {}:

Przykład

Utwórz klasę o nazwie „miasto”:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Wiele klas

Elementy HTML mogą należeć do więcej niż jednej klasy.

Aby zdefiniować wiele klas, oddziel nazwy klas spacją, np. <div class="city main">. Styl elementu będzie zgodny ze wszystkimi określonymi klasami.

W poniższym przykładzie pierwszy <h2>element należy zarówno do cityklasy, jak i do mainklasy, i otrzyma style CSS z obu klas: 

Przykład

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Różne elementy mogą dzielić tę samą klasę

Różne elementy HTML mogą wskazywać na tę samą nazwę klasy.

W poniższym przykładzie zarówno <h2>i <p> wskazuje na klasę „city” i będą miały ten sam styl:

Przykład

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Użycie atrybutu klasy w JavaScript

Nazwa klasy może być również używana przez JavaScript do wykonywania określonych zadań dla określonych elementów.

JavaScript może uzyskać dostęp do elementów o określonej nazwie klasy za pomocą getElementsByClassName()metody:

Przykład

Kliknij przycisk, aby ukryć wszystkie elementy o nazwie klasy „miasto”:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Nie martw się, jeśli nie rozumiesz kodu z powyższego przykładu.

Dowiesz się więcej o JavaScript w naszym rozdziale HTML JavaScript lub możesz przestudiować nasz samouczek JavaScript .


Podsumowanie rozdziału

  • Atrybut HTML classokreśla jedną lub więcej nazw klas dla elementu
  • Klasy są używane przez CSS i JavaScript do wybierania i uzyskiwania dostępu do określonych elementów
  • Atrybut może być użyty w classdowolnym elemencie HTML
  • W nazwie klasy rozróżniana jest wielkość liter
  • Różne elementy HTML mogą wskazywać na tę samą nazwę klasy
  • JavaScript może uzyskać dostęp do elementów o określonej nazwie klasy za pomocą getElementsByClassName() metody

Ćwiczenia HTML

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Utwórz selektor klasy o nazwie „specjalny”.

Dodaj właściwość koloru z wartością „niebieski” wewnątrz klasy „specjalnej”.

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">Mój akapit</p>

</body>
</html>