Stijlklassen en ID's gebruiken in HTML en CSS

click fraud protection

Het bouwen van goed gestileerde websites op het web van vandaag vereist een diep begrip van Trapsgewijze stijlbladen. Pas een reeks CSS-stijlen toe op uw HTML-document om de look-and-feel van uw webpagina te bepalen.

Klasse- en ID-kenmerken

Ontwerpers moeten soms een stijl toepassen op alleen sommige van de elementen in een document, maar niet alle instanties van dat element. Om deze gewenste stijlen te bereiken, gebruikt u de klasse en ID kaart HTML-kenmerken. Deze attributen zijn globale attributen die van toepassing zijn op bijna alle HTML-tag- dus of u nu indelingen, alinea's, koppelingen, lijsten of een van de andere stukjes HTML in uw document opmaakt, u kunt zich wenden tot klasse- en ID-kenmerken om u te helpen deze taak te volbrengen!

Klassenkiezers

De klassenkiezer stelt verschillende stijlen in op hetzelfde element of dezelfde tag in een document. Als u bijvoorbeeld bepaalde delen van uw tekst als waarschuwing in een andere kleur wilt weergeven, wijst u uw alinea's toe met klassen zoals deze:

instagram viewer
p { kleur: #0000ff; }
p.alert { kleur: #ff0000; }

Deze stijlen zouden de kleur vanalle alinea's naar blauw (#0000ff), maar elke alinea met een class-attribuut van alarmeren zou in plaats daarvan in rood gestileerd zijn (#ff0000). Dit komt omdat het class-attribuut een hogere specificiteit heeft dan de eerste CSS-regel, die alleen een tagkiezer gebruikt. Bij het werken met CSS, zal een meer specifieke regel een minder specifieke overschrijven. Dus in dit voorbeeld bepaalt de meer algemene regel de kleur van alle alinea's, maar de tweede, meer specifieke regel overschrijft die instelling alleen in sommige alinea's.

Hier is hoe dit kan worden gebruikt in sommige HTML-opmaak:


Deze alinea zou in blauw worden weergegeven, wat de standaard is voor de pagina.



Deze paragraaf zou ook in het blauw zijn.



En deze alinea zou in rood worden weergegeven omdat het class-attribuut de standaard blauwe kleur van de stijl van de elementselector zou overschrijven.

In dat voorbeeld is de stijl van p.alert zou alleen van toepassing zijn op alinea-elementen die dat gebruiken alarmeren klasse. Om die klasse voor meerdere HTML-elementen te gebruiken, verwijdert u het HTML-element vanaf het begin van de stijlaanroep, als volgt:

.alert {achtergrondkleur: #ff0000;}

Deze klasse is nu beschikbaar voor elk element dat deze nodig heeft. Elk stuk van uw HTML met een class-attribuutwaarde van alarmeren krijgt nu deze stijl. In de onderstaande HTML hebben we zowel een alinea als een kop op niveau twee die de. gebruiken alarmeren klasse. Beide hebben een achtergrondkleur rood:


Deze paragraaf zou in het rood worden geschreven.

Op websites van tegenwoordig worden class-attributen vaak gebruikt voor de meeste elementen, omdat ze vanuit een specificiteitsperspectief gemakkelijker zijn om mee te werken dan ID's. U zult zien dat de meeste huidige HTML-pagina's worden gevuld met klasseattributen, waarvan sommige vaak in een document worden herhaald en andere die slechts één keer voorkomen.

ID-kiezers

Het ID selector een specifieke stijl een naam geven zonder deze te associëren met een tag of iets anders HTML-element.

Ga uit van een indeling in uw HTML-opmaak die informatie over een gebeurtenis bevat. Je zou deze divisie een. kunnen geven ID-kenmerk van evenementen schets die scheiding vervolgens met een zwarte rand van 1 pixel breed:

#event { border: 1px solid #000; }

De uitdaging met ID-kiezers is dat ze niet kunnen worden herhaald in een HTML-document. Ze moeten uniek zijn (u kunt dezelfde ID op meerdere pagina's van uw site gebruiken, maar slechts één keer in elk afzonderlijk HTML-document). Dus voor drie evenementen die allemaal deze rand nodig hebben, moet je ID-attributen identificeren van: evenement1, evenement2, en evenement3 en stijl ze allemaal. Het zou daarom veel gemakkelijker zijn om het bovengenoemde class-attribuut van te gebruiken evenement en style ze allemaal tegelijk.

Complicaties van ID-kenmerken

Een andere uitdaging met ID-attributen is dat ze een hogere specificiteit hebben dan klasseattributen. Om een ​​eerder vastgestelde stijl te negeren, kan het moeilijk zijn om dit te doen als u te veel op ID's hebt vertrouwd. Veel webontwikkelaars zijn verhuisd van ID's gebruiken in hun opmaak, zelfs als ze die waarde maar één keer willen gebruiken, en in plaats daarvan zijn overgestapt op de minder specifieke klasseattributen voor bijna alle stijlen.

Het enige gebied waar ID-kenmerken een rol spelen, is wanneer u een pagina wilt maken met ankerlinks op de pagina. Overweeg bijvoorbeeld een website in parallax-stijl die alle inhoud op één pagina bevat met links die naar verschillende delen van die pagina 'springen'. ID-attributen en tekstlinks gebruiken deze ankerlinks. Voeg de waarde van dat attribuut toe, voorafgegaan door de # symbool, naar de href attribuut van de link, zoals dit:

Dit is de link

Wanneer erop wordt geklikt of wordt aangeraakt, springt deze link naar het deel van de pagina dat dit ID-kenmerk heeft. Als geen enkel element op de pagina deze ID-waarde gebruikt, zou de link niets doen.

Om in-page koppelingen op een site te maken, is het gebruik van ID-attributen vereist, maar u kunt zich nog steeds wenden tot klassen voor algemene CSS-stylingdoeleinden. Dit is hoe ontwerpers tegenwoordig pagina's markeren: ze gebruiken zoveel mogelijk klassekiezers en wenden zich alleen tot ID's wanneer ze het attribuut nodig hebben om niet alleen als een haak voor CSS te fungeren, maar ook als een in-page link.

instagram story viewer