HTML-onderstrepingstag-tutorial met voorbeeld - Techno

HTML biedt verschillende stijlopties voor tekst. Het onderstrepen van HTML-tekst is er een van. Gewoon onderstrepen zal een rechte lijn onder de tekst tekenen zonder de onderste regel vast te leggen. In deze zelfstudie behandelen we HTML-tekst Leer hoe u kunt onderstrepen met tags, CSS-code, CSS-klasse en hoe u onderstrepingseigenschappen en alternatieven instelt.

Onderstreep tekst met tags.

HTML Biedt tags om tekst in HTML te onderstrepen. Er is een starttag voor onderstrepen en Wordt gebruikt om het einde van de onderstreping in te stellen. Underline-tags kunnen probleemloos worden gebruikt voor verschillende tekstsoorten zoals hyperlinks, vetgedrukte tekst, enz. In het volgende voorbeeld onderstrepen we een woord, een volledige zin of een hyperlink. Of de onderstreepte HTML-tag wordt ondersteund door alle belangrijke browsers zoals Google Chrome, Mozilla Firefox, Microsoft Edge, Safari of Opera.

<html>
<body>

 <h1>HTML Text Underline Example</h1>

 <p>I like <u>poftut.com</u></p>

 <p><u>I like poftut.com</u></p>

 <p>I like <u><a href="https://www.poftut.com">poftut.com</a></u></p>

 <p><u><a href="https://www.poftut.com">I like poftut.com</a></u></p>

</body>
</html>

Onderstreep tekst met CSS-tekst die de attributie verfraait.

Biedt CSS. text-decoration Naamsvermelding voor het onderstrepen van verschillende HTML-elementen. We kunnen het attribuut text decoreren gebruiken om HTML-tekst te onderstrepen. Stijlkenmerken voor tekstdecoratie kunnen worden gebruikt met verschillende HTML-tags of -elementen. In het volgende voorbeeld hebben we de tekst geselecteerd en onderstreept Gebruikte labels.

<html>
<body>

 <h1>HTML Text Underline Example</h1>

 <p>I like <span style="text-decoration:underline">poftut.com</span></p>

 <p><span style="text-decoration:underline">I like poftut.com</span></p>

 <p>I like <span style="text-decoration:underline"><a href="https://www.poftut.com">poftut.com</a></span></p>

 <p><span style="text-decoration:underline"><a href="https://www.poftut.com">I like poftut.com</a></span></p>

</body>
</html>

Onderstreep tekst met CSS-tekst die de attributie verfraait.

Tekst onderstrepen kleur en stijl instellen.

In sommige gevallen is het niet voldoende om alleen HTML-tekst te schetsen. We kunnen ook de stijl van de onderstreping inkleuren of veranderen. CSS-kenmerk text-decoration Kan worden gebruikt voor het stylen en kleuren van onderstrepingen met of zonder tags. Hieronder geven we de onderstreepte kleuren van HTML-tekst in rood, groen en stijl als golvend, gestreept, gestippeld en dubbel.

wavy Stijl zal geen rechte lijn creëren waar de lijn als golven zal golven.

dashed Stijl zal een gestippelde onderstreping creëren.

dotted De stijl is vergelijkbaar met de streepjes, maar de punten zullen kleiner zijn.

double De stijl zal twee onderstrepingen invoegen waar de standaard enkele onderstreping.

Rode en gestippelde onderstrepingen kunnen worden gebruikt om spelling, syntaxis of veelvoorkomende fouten aan te geven. Ook dotted

<html>
<body>

 <h1>HTML Text Underline Example</h1>

 <p>I like <u style="text-decoration: red underline">poftut.com</u></p>

 <p><u style="text-decoration: red wavy underline">I like poftut.com as wavy</u></p>

 <p><u style="text-decoration: green wavy underline">I like poftut.com as wavy</u></p>
 
 <p>I like <u style="text-decoration: red dashed underline">poftut.com as dashed</u></p>
 
 <p><u style="text-decoration: red dotted underline">I like poftut.com as wavy</u></p>
 
 <p><u style="text-decoration: red double underline">I like poftut.com as wavy</u></p>

</body>
</html>

Gebruik CSS-klasse voor onderstreping van HTML-tekst.

Het is geen goed idee om elke onderstreepte CSS-code te herschrijven. Een CSS-klasse kan worden gemaakt voor verschillende onderstrepingsgevallen en deze klasse kan worden gebruikt voor HTML-tekstonderstreping met andere HTML-tags. In het volgende voorbeeld zullen we verschillende CSS-klassen maken om de tekst gemakkelijk te onderstrepen, zoals onderstrepen-rood, onderstrepen groen.

<html>
<head>
 <style>
 .underline-red text-decoration: red underline;
 .underline-green text-decoration: green underline;
 </style>
</head>
<body>

 <h1>HTML Text Underline Example</h1>

 <p class="underline-red">I like poftut.com</p>
 
 <p class="underline-green">I like poftut.com</p>

</body>
</html>