Class attribute

Die attribute class ken een of meer klasse vir 'n element (onder 'n element word daar 'n etiket verstaan).

Dit word gedoen sodat 'n mens dan met CSS na 'n groep elemente kan verwys wat dieselfde klas het, en sekere eienskappe daarvoor kan toepas (bv., verander tekskleur, lettergrootte, ens.).

Daar is ook die id attribute, wat soos die attribute class toelaat om elemente op 'n HTML-bladsy te kies.

Die verskil tussen die attribute class en die id attribute is dat class 'n groep elemente kies (selfs al is dit net aan een element gegee - dit kan later aan 'n ander gegee word), terwyl id 'n unieke element kies (daar moet nie meer as een element met so 'n id op die webbladsy wees nie, anders is daar 'n konflik).

Hoe weet jy wat om aan 'n element te gee - 'n klas of 'n id? 'n Klas word gegee aan elemente wat herhaal op die webbladsy (om nie dieselfde CSS-kode meer as een keer te skryf nie). Selfs al is die element tans uniek, maar jy voel dat soortgelyke elemente later kan verskyn - gee aan hierdie element 'n klas. As jy seker is dat so 'n element uniek is - gee dan aan hom 'n id. Alhoewel daar tans 'n neiging is om aan alle elemente 'n klas te gee, en id vir JavaScript te laat, is dit nie algemeen aanvaar nie.

Meer as een klas kan aan 'n element gegee word; in hierdie geval moet hulle met 'n spasie geskei word.

Klasname moet uit Engels letters, syfers, sonder spasies bestaan (spasie skei klasse van mekaar; in plaas daarvan kan 'n onderstreep of koppelteken gebruik word). Klasse moet nie met 'n syfer begin nie (in HTML5 kan dit al, maar dit sal nie in ouer blaaiers werk nie).

Klasname moet in Engels gegee word (en nie in Russies nie, net met Engelse letters!). Name moet sinvol wees, en die wese van die klas weerspieël.

Voorbeeld

Kom ons gee aan alle paragrawe met klas test 'n rooi tekskleur:

<p class="test">Paragraaf met klas test.</p>
<p>Beheerparagraaf sonder klas.</p>

.test {
	color: red;
}

Voorbeeld . Verskeie klasse vir 'n element

En hier gee ons aan die eerste paragraaf verskeie klasse - test1 en test2 (skryf hulle met 'n spasie). Klas test1 gee rooi tekskleur, en klas test2 gee lettergrootte van 20px. Aan die tweede paragraaf is slegs klas test1 gegee (hierdie paragraaf sal rooi word), en aan die derde paragraaf - klas test2 (hierdie paragraaf sal 'n lettergrootte van 20px hê). Die eerste paragraaf, wat twee klasse het, sal gelyktydig beide rooi kleur en 'n lettergrootte van 20px hê:

<p class="test1 test2">Paragraaf met twee klasse test1 en test2.</p>
<p class="test1">Paragraaf met klas test1.</p>
<p class="test2">Paragraaf met klas test2.</p>
<p>Beheerparagraaf sonder klasse.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Sien ook

die attribute id,
wat unieke identifikators aan elemente gee