Vältämme koodin toistoa käyttämällä useita luokkia HTML- ja CSS-kielessä. CSS:n avulla voimme myös määrittää ja tyylittää molemmat luokat yhdessä ja käyttää useita luokkia yhdessä elementissä määrittämällä niille eri luokkatunnukset. Tätä lähestymistapaa voidaan noudattaa käyttämällä välilyönnillä erotettua syntaksia useiden luokkien lisäämiseksi yhteen HTML-elementtiin.
Tässä artikkelissa opimme lisäämään useita luokkia yhteen elementtiin.
Kuinka käyttää useita luokkia CSS:ssä?
Jos haluat käyttää kahta tai useampaa luokkaa yhdessä elementissä, kukin luokkatunnus erotetaan välilyönnillä.
Sinun on noudatettava seuraavaa syntaksia käyttääksesi useita luokkia yhdessä elementissä:
< h1 luokka = 'luokka_1 luokka_2 luokka_3' > luovutus... h >
Yhdessä HTML-elementissä voit sisällyttää useamman kuin yhden luokan erottamalla ne välilyönnillä. Tässä on esimerkki avuksesi.
Esimerkki: Useiden luokkien käyttäminen CSS:ssä
Alla olevassa esimerkissä luomme:
- Otsikko
-tunnisteen avulla ja anna luokan nimi ' otsikko ”.
- Seuraavaksi luomme toisen otsikon ja määritämme sen kahteen eri luokkaan: ' otsikko ' ja ' linja ”. Nämä luokkatunnukset on erotettu välilyönnillä:
HTML
h1 >
< h1 luokkaa = 'otsikkolinja' >
Useita luokkia sisään Yksi elementti
h1 >
Siirrytään nyt CSS-tiedostoon ja otetaan käyttöön joitain alla lueteltuja CSS-ominaisuuksia:
- Aseta otsikon taustaväri käyttämällä rgb()-funktiota ' (69, 51, 151) ”.
- Aseta kirjasintyyli ' kursivoitu ”otsikkoa varten.
HTML-luokassa ensimmäinen otsikko käyttää luokan nimeä ' otsikko ”. Joten määritetyssä luokassa määritetty tyyli toteutetaan ensimmäisessä otsikossa:
.otsikko {
taustaväri: rgb ( 69 , 51 , 151 ) ;
font-style: kursivoitu
}
Varten ' linja ”luokka, meillä on:
- Aseta otsikon väri käyttämällä rgb()-funktiota ' (255, 0, 0) ”.
- Käytä teksti-koriste-riviä nimellä ' korostaa ”.
Toinen otsikko käyttää molempien luokkien tyylejä: ' otsikko ' ja ' linja ”luokka:
.linja {väri: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:alleviivaus;
}
Tarkista tulos toteutuksen jälkeen:
Tulosteesta voit havaita, että toinen otsikko käyttää molempia CSS-luokkia.
Johtopäätös
Jos haluat käyttää useita luokkia yhdessä elementissä, käytä eri luokkatunnuksia välilyönneillä erotettuina. Tämän avulla voimme käyttää erilaisia CSS-ominaisuuksia kerralla. Sen avulla voimme käyttää luokkaa uudelleen, jos samanlaisia elementtejä on olemassa. Tässä artikkelissa selitettiin, kuinka käyttää useita luokkia yhdessä elementissä ja tyyliä se esimerkin kanssa.