Upang maiwasan ang pag-uulit ng code, gumagamit kami ng maraming klase sa HTML at CSS. Sa CSS, maaari rin nating tukuyin at i-istilo ang parehong mga klase nang magkasama at gumamit ng maraming klase sa isang elemento sa pamamagitan ng pagtatalaga sa kanila ng iba't ibang mga class id. Ang diskarte na ito ay maaaring sundan sa pamamagitan ng paggamit ng space-separated syntax upang magdagdag ng maraming klase sa isang HTML element.
Sa artikulong ito, matututunan natin kung paano magdagdag ng maraming klase sa isang elemento.
Paano Gumamit ng Maramihang Mga Klase sa CSS?
Upang gumamit ng dalawa o higit pang mga klase sa isang elemento, ang bawat class id ay paghihiwalayin ng isang puwang.
Kailangan mong sundin ang sumusunod na syntax upang gumamit ng maraming klase sa isang elemento:
< h1 klase = 'class_1 class_2 class_3' > pag-abot... h >
Sa isang elemento ng HTML, maaari kang magsama ng higit sa isang klase sa pamamagitan ng paghihiwalay sa kanila ng isang puwang. Para sa iyong kaginhawaan, narito ang isang halimbawa.
Halimbawa: Paggamit ng Maramihang Klase sa CSS
Sa halimbawa sa ibaba, gagawa kami ng:
- Isang heading gamit ang
tag at italaga ang pangalan ng klase ' heading ”.
- Susunod, gagawa kami ng isa pang heading at itatalaga ito sa dalawang magkaibang klase: “ heading 'at' linya ”. Ang mga class id na ito ay pinaghihiwalay ng isang puwang:
HTML
h1 >
< h1 klase = 'linya ng pamagat' >
Maramihang Klase sa Isang Elemento
h1 >
Ngayon, lumipat tayo sa CSS file at ilapat ang ilang mga katangian ng CSS na nakalista sa ibaba:
- Itakda ang kulay ng background sa heading gamit ang rgb() function bilang “ (69, 51, 151) ”.
- Itakda ang estilo ng font ' italic ” para sa heading.
Sa HTML class, ang unang heading ay gumagamit ng class name na “ heading ”. Kaya, ang estilo na tinukoy sa tinukoy na klase ay ipapatupad sa unang heading:
.heading {
kulay ng background: rgb ( 69 , 51 , 151 ) ;
font-style:italic
}
Para sa ' linya ” klase, mayroon kaming:
- Itakda ang kulay ng heading gamit ang rgb() function bilang “ (255, 0, 0) ”.
- Ilapat ang text-decoration-line bilang ' salungguhit ”.
Gagamitin ng pangalawang heading ang mga istilo ng parehong klase: “ heading 'at' linya 'klase:
.linya {kulay: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Pagkatapos ng pagpapatupad, suriin ang kinalabasan:
Mula sa output, maaari mong obserbahan na ang pangalawang heading ay gumagamit ng parehong mga klase ng CSS.
Konklusyon
Upang gumamit ng maraming klase sa iisang elemento, gumamit ng iba't ibang class id na pinaghihiwalay ng mga puting espasyo. Gamit ito, maaari naming ilapat ang iba't ibang mga katangian ng CSS nang sabay-sabay. Nagbibigay-daan ito sa amin na muling gamitin ang klase kung saan umiiral ang mga katulad na elemento. Ipinaliwanag ng artikulong ito kung paano gumamit ng maraming klase sa isang elemento at i-istilo ito kasama ng isang halimbawa.