Atrybut class może zawierać nazwę jednej lub kilku klas. Klasy są wykorzystywane przez kod CSS oraz JavaScript do wybierania specyficznych elementów.
Jak używać atrybut class?
W języku html class definiuje jedną lub kilka klass w danym elemencie.
class często jest wykożystywana do nadawania stylów elementom. Może ona być rónież wykorzystywana przez kod JavaScript do manipulowania elementami.
W poniższym przykładzie znajdują się dwa kontenery div, którym nadaliśmy klasę kontener-1. Arkusze stylów odnoszą się do klas za pośrednictwem jej nazwy, która jest poprzedzona kropką - w tym wypadku będzie to .kontener-1. Ponadto style dla klasy definiuje się między nawiasami { i }.
class może być użyty na dowolnym elemencie. W przypadku klass, wielkość liter ma znaczenie, dlatego zwracaj uwagę na wielkość liter. Więcej na ten temat dowiesz się w kursie CSS.Kilka klas
HTML pozwala na wykorzystywanie kilku klas przez jeden element.
Aby dodać kilka klas do elementu HTML, należy oddzielić ich nazwy spacją. Obrazuje to poniższy przykład.
Nadpisywanie klas
Jeżeli element posiada kilka klas, a niektóre style nakładają się na siebie, to klasa znajdująca się na końcu arkusza nadpisze poprzednie style.
Dla przykładu, jeżeli element będzie miał klasę red i blue, to element przyjmie kolor klasy zdefiniowanej na końcu arkusza. Możesz to łatwo sprawdzić zmieniając sekcję head poniższego przykładu.
Zwróć uwagę, że poza nadaniem koloru, tekst jest wyśrodkowany poprzez klasę red oraz pogrubiony przez klasę blue. Nadpisywanie stylu ma miejsce tylko wtedy, gdy wchodzą one ze sobą w konflikt.
Używanie class w JavaScript
Ten kurs nie jest poświęcony JavaScript, więc jeżeli ten przykład będzie niejasny to nie przejmuj się. Więcej na temat pisania kodu w JavaScript, dowiesz się w osobnym kursie.
Ważne, abyś zapamiętał, że JavaScript lub w skrócie JS, może znaleźć elementy HTML za pomocą nazwy klasy - służy do tego funkcja getElementsByClassName.