Да бисмо избегли понављање кода, користимо више класа у ХТМЛ-у и ЦСС-у. Са ЦСС-ом, такође можемо да дефинишемо и стилизујемо обе класе заједно и да користимо више класа у једном елементу тако што ћемо им доделити различите ИД-ове класа. Овај приступ се може пратити коришћењем синтаксе раздвојене размаком за додавање више класа једном ХТМЛ елементу.
У овом чланку ћемо научити како додати више класа једном елементу.
Како користити више класа у ЦСС-у?
Да бисте користили две или више класа у једном елементу, сваки ИД класе ће бити одвојен размаком.
Морате да пратите следећу синтаксу да бисте користили више класа у једном елементу:
< х1 класа = 'цласс_1 цласс_2 цласс_3' > предаје... х >
У један ХТМЛ елемент можете укључити више од једне класе тако што ћете их одвојити размаком. За вашу удобност, ево примера.
Пример: Коришћење више класа у ЦСС-у
У доњем примеру ћемо креирати:
- Наслов који користи ознаку <х1> и додељује назив класе “ наслова ”.
- Затим ћемо креирати још један наслов и доделити га двема различитим класама: „ наслова ' и ' линија ”. Ови ИД-ови класа су раздвојени размаком:
ХТМЛ
х1 >
< х1 класа = 'линија наслова' >
Мултипле Цлассес ин Један елемент
х1 >
Сада, пређимо на ЦСС датотеку и применимо нека ЦСС својства наведена у наставку:
- Поставите боју позадине за наслов користећи ргб() функцију као „ (69, 51, 151) ”.
- Подесите стил фонта ' курзив ” за наслов.
У ХТМЛ класи, први наслов користи име класе „ наслова ”. Дакле, стил наведен у наведеној класи биће имплементиран на првом наслову:
.хеадинг {боја позадине: ргб ( 69 , 51 , 151 ) ;
фонт-стиле:италиц
}
За ' линија ” класе, имамо:
- Подесите боју наслова помоћу функције ргб() као „ (255, 0, 0) ”.
- Примијените тект-децоратион-лине као „ подвући ”.
Други наслов ће користити стилове обе класе: „ наслова ' и ' линија ' класа:
.лине {боја: ргб ( 255 , 0 , 0 ) ;
тект-децоратион-лине:ундерлине;
}
Након имплементације, проверите резултат:
Из излаза можете приметити да други наслов користи обе ЦСС класе.
Закључак
Да бисте користили више класа на једном елементу, користите различите ИД-ове класа одвојене размацима. Користећи ово, можемо применити различита ЦСС својства одједном. Омогућава нам да поново користимо класу тамо где постоје слични елементи. Овај чланак је објаснио како да користите више класа у једном елементу и да га стилизујете заједно са примером.