logo

Hoe tekst onderstrepen in CSS?

CSS Tekstdecoratie-eigenschap: -

Onderstrepingen kunnen worden gebruikt om belangrijke tekst te markeren. Het U-element en de CSS-tekstdecoratie-eigenschap zijn de twee meest gebruikte technieken om tekst op webpagina's te onderstrepen.

Beide zijn eenvoudig te gebruiken, maar het U-element biedt semantische waarde aan de betekenis. Een andere kan op aanvraag worden weergegeven, waardoor het eenvoudig wordt om de onderstrepingsstatus te wijzigen door simpelweg CSS-klassen aan de tekst toe te voegen.

Of onderstrepingen al dan niet nuttig zijn om betekenis of toegankelijkheid uit te drukken, is een kwestie van discussie. Onderstrepen is een natuurlijke benadering om een ​​grotere waarde voor de gebruikerservaring te bieden wanneer kleur alleen niet voldoende is om betekenis uit te drukken.

Het attribuut tekstdecoratie biedt een alternatieve manier om tekst te onderstrepen. De hyperlinktekst kan ook worden gebruikt om onderstrepingen te vervangen door bovenlijnen.

Een bovenlijn is het tegenovergestelde van onderstrepen. Er wordt een regel toegevoegd aan de bovenkant van de tekst.

We kunnen alle onderstreepte en bovenstrepende waarden gebruiken voor dezelfde klassedefinitie. De eigenschap text-decoration bepaalt hoe de tekst op verschillende manieren wordt gepresenteerd. Wanneer tekstversiering is ingesteld op onderstrepen, wordt de tekst binnen de component onderstreept.

Tekstdecoratie CSS-eigenschappen zijn fantastisch voor tekst, maar ze kunnen beperkt zijn qua ontwerp en zijn niet van toepassing op niet-tekstuele inhoudstypen. Onderstrepingen kunnen ook worden gemaakt met CSS-randkenmerken.

bestand geopend in Java

Het attribuut tekstdecoratie is de meest eenvoudige manier om tekst te onderstrepen. Het belangrijkste nadeel van tekstdecoratie is dat deze niet configureerbaar is.

De eigenschap tekstversiering maakt gebruik van onderstreping, bovenlijn, doorlijning of een combinatie van lijnen om geselecteerde tekst te markeren.

De inhoud wordt onderstreept met het kenmerk text-decoration-line. Bovenlijn, onderstreping en doorlijning zijn de drie opties voor dit attribuut. In CSS wordt het attribuut onderstrepen gebruikt om de tekst te markeren. De onderstreping wordt onder de inlinetekst met deze waarde getekend.

Over onderliggende tekstelementen heen worden tekstversieringen getekend. Dat houdt in dat wanneer een element een tekstdecoratie definieert, de decoratie niet kan worden verwijderd door een onderliggend element.

boolean om Java te stringen

Er wordt geen lijn getrokken en eventuele bestaande decoraties worden verwijderd.

Onderstrepen: er wordt een lijn van 1px over de basislijn van de tekst getrokken.

Lijn door: op het 'middelste' punt van de tekst, wordt er een 1px-lijn overheen ingevoegd.

Bovenlijn: voegt een 1px-lijn toe direct boven het 'bovenste' punt van de tekst over de tekst.

Erven: erft de onderscheiding van de ouders.

Tekstdecoratie wordt gespecificeerd via de eigenschap text-decoration, wat een afkorting is voor:

java vervang alles
  • tekstdecoratielijn (verplicht)
  • tekst-decoratie-kleur
  • tekst-decoratie-stijl
  • tekst-decoratie-dikte

bovenlijn, onderstreping, onderstreping-overlijn, doorlijn valt onder tekst-decoratielijn.

Effen, gestippeld, gestippeld, golvend, dubbel valt onder tekstdecoratiestijl.

Kleur in decimale waarde, hexadecimale waarde of overnemen valt onder tekst-decoratie-kleur.

De eigenschap border-bottom is een alternatief voor tekstdecoratie. We kunnen ook border-bottom gebruiken om opvulling te bieden.

Syntaxis: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

Laten we nu naar een voorbeeld kijken en het gebruik van de eigenschap tekstdecoratie begrijpen.

Tekstversiering: onderstreping bovenlijn

Voorbeeld: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

Uitgang:

Hoe tekst onderstrepen in CSS?