Klass vs ID
Kaskaadstiililehed (CSS) on keel, mis kirjeldab märgistuskeelt kasutades kirjutatud dokumendi välimust ja vormingut. CSS-i kasutatakse laialdaselt HTML-is kirjutatud veebilehtede kujundamiseks. CSS võimaldab lisaks HTML-elementide stiilide rakendamisele ka oma stiilivalijaid täpsustada. Selleks kasutatakse ID ja klassi valijaid. Ühe ainulaadse elemendi stiili määramisel kasutatakse ID-valijat. Elementide rühma stiili määramisel kasutatakse klassi valijat.
Mis on klass?
CSS-is saab klassi valijat kasutada oma stiili rakendamiseks elementide rühmale. Klassivalijat kasutatakse konkreetse stiili rakendamiseks sama klassiga elementide komplektile. CSS-is tuvastatakse klassi valija punktiga (.). Järgnevalt on toodud CSS-is määratletud klassi valija näide.
.minu klass {
värv: sinine;
fondi kaal: paks;
}
HTML võib viidata CSS-is määratletud klassile, kasutades allpool näidatud atribuudiklassi.
See on minu vormindus
See on jälle minu vormindus
Nagu eespool näidatud, võib sama klassi kasutada mitme elemendi jaoks ja üks element võib kasutada mitut klassi. Kui ühes elemendis kasutatakse mitut klassi, lisatakse klassid tühikuga eraldatud klassi atribuuti, nagu on näidatud allpool.
See on minu vormindamine kahe klassi abil
Mis on ID?
CSS-is saab ID-valijat kasutada oma stiili rakendamiseks ühele ainulaadsele elemendile. CSS-is identifitseeritakse ID-valija räsi (#) abil. Järgnevalt on toodud CSS-is määratletud ID-valija näide.
#my_ID {
värv: punane;
teksti joondamine: paremale;
}
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 võib 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.com#my_id), proovib brauser elemendi ID-ga “my_id” automaatselt üles leida ja kerib selle elemendi kuvamiseks veebilehte. See on üks põhjus, miks lehel peaks olema üks konkreetse ID-ga element, et brauser saaks selle elemendi üles leida.
Mis vahe on klassil ja isikutunnistusel?
Kuigi nii klassi valijat kui ka ID valijat saab kasutada oma stiili rakendamiseks veebisaidi elementidele, on neil mõned olulised erinevused. Kursuse valijat saab kasutada elementide rühmale oma stiili rakendamiseks, ID valijat kasutatakse stiili rakendamiseks ühele ainulaadsele elemendile. ID-de kasutamisel võib igal elemendil olla ainult üks ID ja igal lehel võib olla ainult üks selle konkreetse ID-ga element, kuid klassi võiks 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 klassi valijaga pole see võimalik.
