Klass vs ID
Cascading Style Sheets (CSS) on keel, mis kirjeldab märgistuskeelega kirjutatud dokumendi välimust ja vormingut. CSS-i kasutatakse laialdaselt HTML-is kirjutatud veebilehtede stiilimiseks. CSS võimaldab lisaks HTML-elementide stiilide rakendamisele määrata ka oma stiilivalijaid. Seda tehakse ID ja klassi valijate abil. Ühe kordumatu elemendi stiili määramisel kasutatakse ID-valijat. Elementide rühma stiili määramisel kasutatakse klassi valijat.
Mis on klass?
CSS-is saab klassivalijat kasutada oma stiili rakendamiseks elementide rühmale. Klassivalijat kasutatakse konkreetse stiili rakendamiseks sama klassiga elementide komplektile. CSS-is tähistab klassivalijat punkt (.). Järgnev on näide CSS-is määratletud klassivalijast.
.minu_klass {
värv: sinine;
fondi kaal: paks;
}
HTML võib viidata CSS-is määratletud klassile, kasutades atribuudiklassi, nagu allpool näidatud.
See on minu vorming
See on jälle minu vorming
Nagu ülal näidatud, võib sama klassi kasutada mitme elemendi jaoks ja üks element võib kasutada mitut klassi. Kui samas elemendis kasutatakse mitut klassi, lisatakse need klassi atribuudisse, mis on eraldatud tühikuga, nagu allpool näidatud.
See on minu vormindus, kasutades kahte klassi
Mis on ID?
CSS-is saab ID-valijat kasutada oma stiili rakendamiseks ühele ainulaadsele elemendile. CSS-is tuvastab ID-valija räsi (). Järgmine on CSS-is määratletud ID-valija näide.
minu_ID {
värv: punane;
text-align:right;
}
HTML võib viidata CSS-is määratletud ID-valijale, kasutades atribuudi ID-d, nagu allpool näidatud.
See on minu vormindus ID-valijast
ID-d on kordumatud. Seetõttu saab igal elemendil olla ainult üks ID ja igal lehel võib olla ainult üks selle konkreetse ID-ga element. ID-del on oluline omadus, mida saab brauseriga kasutada. Kui lehe URL sisaldab räsiväärtust (nt https://myweb.commy_id), proovib brauser automaatselt leida elemendi ID-ga „my_id” ja kerida selle elemendi kuvamiseks veebilehte. See on üks põhjus, miks lehel peaks olema üks selle konkreetse ID-ga element, et brauser saaks selle elemendi üles leida.
Mis vahe on klassil ja ID-l?
Kuigi nii klassi- kui ka ID-valijat saab kasutada oma stiili rakendamiseks veebilehe elementidele, on neil mõned olulised erinevused. Klassivalijat saab kasutada oma stiili rakendamiseks elementide rühmale, samas kui ID-valijat kasutatakse stiili rakendamiseks ühele ainulaadsele elemendile. ID-de kasutamisel saab igal elemendil olla ainult üks ID ja igal lehel võib olla ainult üks selle konkreetse ID-ga element, kuid klassi saab kasutada mitme elemendi jaoks ja üks element võib kasutada mitut klassi. Lisaks saab ID-d kasutada lehe automaatseks kerimiseks, et kuvada selle ID-ga element, kuid klassivalijaga pole see võimalik.
