Aby uniknąć powtarzania kodu, używamy wielu klas w HTML i CSS. Dzięki CSS możemy również zdefiniować i stylizować obie klasy razem i używać wielu klas w jednym elemencie, przypisując im różne identyfikatory klasy. Po takim podejściu można po użyciu składni rozdzielonej przez przestrzeń, aby dodać wiele klas do jednego elementu HTML.

W tym artykule dowiemy się, jak dodawać wiele klas do jednego elementu.

Jak korzystać z wielu klas w CSS?

Aby użyć dwóch lub więcej klas w jednym elemencie, każdy identyfikator klasy będzie oddzielony przestrzenią.

Musisz śledzić następującą składnię, aby użyć wielu klas w jednym elemencie:

Resying…

W jednym elemencie HTML możesz dołączyć więcej niż jedną klasę, oddzielając je przestrzenią. Dla Twojej wygody, oto przykład.

Przykład: Korzystanie z wielu klas w CSS

W poniższym przykładzie utworzymy:

• Nagłówek za pomocą

  Tag i przypisz nazwę klasy „nagłówek".

• Następnie utworzymy kolejny nagłówek i przypisamy go do dwóch różnych klas: „nagłówek" I "linia". Te identyfikatory klas są oddzielone przestrzenią:

Html

Wiele klas w jednym elemencie

Przejdźmy teraz do pliku CSS i zastosuj niektóre właściwości CSS wymienione poniżej:

• Ustaw kolor tła na nagłówek za pomocą funkcji rgb () jako „(69, 51, 151)".
• Ustaw styl czcionki „italski„Za nagłówek.

W klasie HTML pierwszy nagłówek wykorzystuje nazwę klasy „nagłówek". Tak więc styl określony w określonej klasie zostanie zaimplementowany na pierwszym nagłówku:

.nagłówek
kolor tła: RGB (69, 51, 151);
Style czcionki: Kursywa

Dla "linia„Klasa, mamy:

• Ustaw kolor nagłówka za pomocą funkcji rgb () jako „(255, 0, 0)".
• Zastosuj linię dekoracji tekstu jako „podkreślać".

Drugi nagłówek wykorzysta style obu klas: „nagłówek" I "linia" klasa:

.linia
Kolor: RGB (255, 0, 0);
Linia dekoracji tekstu: Podkreśl;

Po wdrożeniu sprawdź wynik:

Z wyjścia można zauważyć, że drugi nagłówek wykorzystuje obie klasy CSS.

Wniosek

Aby użyć wielu klas na jednym elemencie, użyj różnych identyfikatorów klas oddzielonych białymi przestrzeniami. Korzystając z tego, możemy zastosować różne właściwości CSS jednocześnie. Pozwala nam ponownie wykorzystać klasę, w której istnieją podobne elementy. W tym artykule wyjaśniono, jak korzystać z wielu klas w jednym elemencie i stylizować go wraz z przykładem.