Zajęcia HTML
Klasa jest atrybutem elementu HTML używanego do klasyfikacji podobnych elementów do stylizacji. Klasa może zawierać kilka właściwości związanych z CSS i JavaScript, które mają być używane do różnych elementów HTML. Podstawowym użyciem atrybutów klas jest dodanie właściwości klasy arkusza stylów do elementu HTML. Jednak JavaScript można również wywołać za pomocą atrybutu klasy. Ten artykuł zawiera następujące wyniki uczenia się:
- Utwórz klasę
- Jak używać klasy w HTML
Jak utworzyć klasę HTML
Klasa HTML można utworzyć za pomocą atrybutu klasy w elementach HTML. Zajęcia są zdefiniowane, aby stworzyć kilka grup, które można użyć o tych samych właściwościach stylizacji. Do utworzenia klasy HTML w elemencie HTML można użyć następującej składni: element HTML:
Nazwa klasy jest wrażliwy. Ponadto, jeśli chcesz zdefiniować wiele klas dla jednego elementu, musisz dodać przestrzeń między nazwami klas.
Przykład 1: Pojedyncza klasa w elemencie HTML
Poniższy kod HTML definiuje atrybut klasowy w
Tag html.
Powitanie
Klasa o nazwie „podstawowa” jest zdefiniowana w
etykietka. Obraz kodu znajduje się poniżej:
Przykład 2: Wiele klas w jednym elemencie HTML
Kod podany poniżej kojarzy pojedynczy element HTML z wieloma klasami.
Notatka: W radzeniu sobie z wieloma klasami w elemencie HTML nazwy klas muszą być oddzielone przestrzenią, w przeciwnym razie można by to uznać za pojedynczą klasę. Ponadto nazwy klas są zdefiniowane przez użytkownika, abyś mógł wybrać dowolny z nich lub utworzyć własne.
Powitanie
Dolina technologii
Powyższy kod pokazuje, że
tag jest powiązany z klasą „podstawową”, podczas gdy
Tag ma dwie klasy „wtórne” i „trzeciorzędne”
Obraz kodu jest dołączony tutaj:
Jak połączyć klasę HTML z CSS
Jednym z głównych celów klas HTML jest stylizacja elementów w sposób zbiorowy. Na przykład kojarzymy kilka elementów HTML o tej samej nazwie klasy i definiujemy właściwości stylizacji według nazwy klasy. Te style byłyby rozpowszechniane wszędzie tam, gdzie zdefiniowano określoną nazwę klasy. Można wykonać następujące kroki, aby użyć klasy HTML do tworzenia stylów:
- Rozpocznij tag
- Użyj następującej składni, aby połączyć klasę z CSS
Nazwa klasy odnosi się do klasy, którą zdefiniowałeś w kodzie HTML i zaczyna się od kropki, jak pokazano w powyższej składni.
Przykład 3: Korzystanie z pojedynczej klasy HTML w CSS
Zilustrujmy połączenie pojedynczej klasy HTML z CSS. Kod napisany poniżej korzysta z pojedynczej klasy z HTML i CSS:
Witamy w Linuxhint
- Klasa HTML jest nazwana „nutą” w
etykietka
- Wzywając to w tagu, napisz „.UWAGA ”, a następnie zdefiniował właściwości stylizacji wewnątrz kręconych aparatów ortodontycznych, jak widać w powyższym kodzie. Poniższy obraz zawiera kod napisany w edytorze:
Wyjście strony internetowej powyższego kodu HTML znajduje się poniżej:
Przykład 4: Korzystanie z wielu klas HTML w CSS
Jak omówiono we wcześniejszej części przewodnika, wiele klas można również użyć w jednym elemencie HTML. Kod podany poniżej praktykuje dwie klasy w CSS, a następnie używają ich w jednym elemencie HTML.
Witamy w Linuxhint! wiodący dostawca treści
Kod HTML opisano poniżej:
- Trzy klasy HTML są używane jako „Bod”, „Col” i „Fon”
- Klasa „BOD” jest zdefiniowana w tagu, podczas gdy „col” i „fon” są zdefiniowane w
etykietka
Ponieważ w dwóch klasach są używane w
tag, w ten sposób zostaną oddzielone przez przestrzeń, aby
uzyskuje właściwości obu klas.
Poniższy obraz pokazuje kod:
Wyjście kodu na stronie internetowej pokazano poniżej:
Wniosek
Atrybut klasy HTML służy do kategoryzacji elementu HTML. Za pomocą klas HTML elementy HTML mogą być stylizowane w sposób zbiorowy. Ten artykuł zawiera opisowy przewodnik na temat klas HTML i ich powiązania z CSS. Zilustrowaliśmy kilka przykładów, które przedstawiają tworzenie klas HTML i łączą je z CSS. Stwierdzono, że integracja klas HTML z CSS jest główną zaletą klas HTML.