Standaard is tekstinhoud die aan HTML is gekoppeld met behulp van het element "anchor", gestileerd met een onderstrepingsteken. Vaak kiezen webontwerpers ervoor om deze standaardstijl te verwijderen door de onderstreping te verwijderen.
Veel ontwerpers geven niet om het uiterlijk van onderstreepte tekst, vooral in dichte blokken met veel links. Al die onderstreepte woorden kunnen de leesstroom van een document echt doorbreken. Velen hebben betoogd dat die onderstreepingen woorden moeilijker maken om te onderscheiden en snel te lezen vanwege de manier waarop onderstrepen de natuurlijke lettervormen verandert.
Er zijn echter legitieme voordelen om deze onderstrepingen op tekstlinks te behouden. Wanneer u bijvoorbeeld door grote tekstblokken bladert, maken onderstreepte koppelingen in combinatie met het juiste kleurcontrast het gemakkelijk voor lezers om een pagina onmiddellijk te scannen en te zien waar de links zich bevinden.
Als u beslist om links uit de tekst te verwijderen (een eenvoudig proces dat we binnenkort behandelen), moet u manieren vinden om die tekst te stijlen om toch te differentiëren wat een link is van wat platte tekst is. Dit gebeurt meestal met dat voornoemde kleurcontrast, maar kleur alleen kan een probleem vormen voor bezoekers met visuele beperkingen zoals kleurenblindheid. Afhankelijk van hun specifieke vorm van kleurenblindheid kan het contrast volledig verloren gaan, waardoor ze het verschil tussen gelinkte en niet-gekoppelde tekst niet kunnen zien. Dit is de reden waarom de onderstreepte tekst nog steeds wordt beschouwd als de beste manier om links weer te geven.
Dus hoe schakel je een onderstreping uit als je dat nog steeds wilt? Aangezien dit een visueel kenmerk is waar we ons zorgen over maken, zullen we ons wenden tot het gedeelte van onze website dat alle dingen visualiseert - CSS.
Gebruik Cascading Style Sheets om de onderstrepingen op links uit te schakelen
In de meeste gevallen wilt u geen onderstreping uitschakelen op slechts één tekstlink. In plaats daarvan vereist uw ontwerpstijl waarschijnlijk dat u onderstreepingen van alle links verwijdert. U doet dit door stijlen aan uw externe stijlpagina toe te voegen.
een { tekstdecoratie: geen;}
Dat is het! Die ene simpele regel CSS zou de onderstreping uitschakelen (die de CSS-eigenschap daadwerkelijk gebruikt voor "tekst-decoratie") op alle links. Je zou ook specifieker kunnen worden met deze stijl. Als u bijvoorbeeld alleen de onderstreping of de koppelingen in het element 'nav' wilt uitschakelen, kunt u schrijven: nav a { tekstdecoratie: geen;}
Nu zouden tekstlinks op de pagina de standaard onderstreping krijgen, maar die in de nav zouden het hebben verwijderd. Een ding dat veel webontwerpers doen, is om de link weer in te schakelen wanneer iemand over de tekst zweeft. Dit zou gedaan worden met behulp van de: hover CSS pseudo-klasse, zoals deze: een { tekstdecoratie: geen;}a: hover { text-decoration: onderstrepen;} Als alternatief voor het aanbrengen van wijzigingen in een externe stylesheet, kunt u de stijlen ook rechtstreeks in HTML aan het element zelf toevoegen. Het probleem met deze methode is dat het stijlinformatie in uw HTML-structuur plaatst, wat geen best practice is. Stijl (CSS) en structuur (HTML) moeten gescheiden worden gehouden. Als u alle tekstlinks van een site wilt laten verwijderen door de onderstreping toe te voegen, zou het toevoegen van deze stijlinformatie aan elke koppeling op individuele basis betekenen dat er behoorlijk wat extra markup wordt toegevoegd aan de code van uw site. Deze bloat op de pagina kan de laadtijd van een site vertragen en het algehele paginabeheer veel uitdagender maken. Om deze redenen verdient het de voorkeur om altijd naar een externe stijlpagina te schakelen voor alle stylingsbehoeften van de pagina. Hoe gemakkelijk het ook is om de onderstreping van de tekstlinks van een webpagina te verwijderen, u moet ook rekening houden met de gevolgen hiervan. Hoewel het inderdaad het uiterlijk van een pagina kan opruimen, kan dit ten koste gaan van de algehele bruikbaarheid. Houd hier rekening mee wanneer u de volgende keer de eigenschappen van een 'tekstdecoratie' van een pagina wilt wijzigen. Inline CSS gebruiken
In Closing
