Aby uniknąć powtarzania kodu, używamy wielu klas w HTML i CSS. Dzięki CSS możemy również definiować i stylizować obie klasy razem oraz używać wielu klas w jednym elemencie, przypisując im różne identyfikatory klas. Takie podejście można zastosować, używając składni rozdzielanej spacjami, aby dodać wiele klas do jednego elementu HTML.
W tym artykule dowiemy się, jak dodać 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 spacją.
Aby używać wielu klas w jednym elemencie, musisz przestrzegać następującej składni:
< klasa h1 = „klasa_1 klasa_2 klasa_3” > przekazanie... h >
W pojedynczym elemencie HTML możesz dołączyć więcej niż jedną klasę, oddzielając je spacją. Dla Twojej wygody, oto przykład.
Przykład: używanie wielu klas w CSS
W poniższym przykładzie stworzymy:
- Nagłówek wykorzystujący znacznik
i przypisz nazwę klasy „ nagłówek ”.
- Następnie utworzymy kolejny nagłówek i przypiszemy go do dwóch różnych klas: „ nagłówek ' oraz ' linia ”. Te identyfikatory klas są oddzielone spacją:
HTML
h1 >
< h1 klasa = 'linia nagłówka' >
Wiele klas w Jeden element
h1 >
Przejdźmy teraz do pliku CSS i zastosujmy niektóre właściwości CSS wymienione poniżej:
- Ustaw kolor tła nagłówka za pomocą funkcji rgb() jako „ (69, 51, 151) ”.
- Ustaw styl czcionki „ italski ” dla nagłówka.
W klasie HTML pierwszy nagłówek wykorzystuje nazwę klasy „ nagłówek ”. Tak więc styl określony w określonej klasie zostanie zaimplementowany w pierwszym nagłówku:
.nagłówek {
kolor tła: rgb ( 69 , 51 , 151 ) ;
styl czcionki: kursywa
}
Dla ' linia klasy, mamy:
- Ustaw kolor nagłówka za pomocą funkcji rgb() jako „ (255, 0, 0) ”.
- Zastosuj tekst-decoration-line jako „ podkreślać ”.
Drugi nagłówek będzie wykorzystywał style obu klas: „ nagłówek ' oraz ' linia ' klasa:
.linia {kolor: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:podkreślenie;
}
Po wdrożeniu sprawdź wynik:
Z wyników możesz zauważyć, że drugi nagłówek wykorzystuje obie klasy CSS.
Wniosek
Aby użyć wielu klas w jednym elemencie, użyj różnych identyfikatorów klas oddzielonych białymi spacjami. Korzystając z tego, możemy jednocześnie zastosować różne właściwości CSS. Pozwala nam na ponowne wykorzystanie klasy, w której istnieją podobne elementy. W tym artykule wyjaśniono, jak używać wielu klas w jednym elemencie i stylizować go wraz z przykładem.