Standaard is tekstinhoud die is gekoppeld aan HTML het gebruik van het of "anker" element is opgemaakt met een onderstreping. Vaak kiezen webontwerpers ervoor om deze standaardstijl te verwijderen door de onderstreping te verwijderen.
Redenen voor en tegen de onderstreping
Veel ontwerpers geven niet om het uiterlijk van onderstreepte tekst, vooral niet in dichte blokken inhoud met veel links. Al die onderstreepte woorden kunnen de leesstroom van een document echt doorbreken. Velen hebben betoogd dat die onderstrepingen het juist moeilijker maken om woorden te onderscheiden en sneller te lezen vanwege de manier waarop onderstreping de natuurlijke lettervormen verandert.
Er zijn echter legitieme voordelen aan het behouden van deze onderstrepingen op tekstlinks. Wanneer u bijvoorbeeld door grote blokken tekst bladert, maken onderstreepte links in combinatie met het juiste kleurcontrast het voor lezers gemakkelijk om onmiddellijk een pagina te scannen en te zien waar de links zich bevinden.
Als je besluit om links uit de tekst te verwijderen (een eenvoudig proces dat we binnenkort zullen bespreken), zorg er dan voor dat je manieren vindt om die tekst op te maken om nog steeds onderscheid te maken tussen wat een link is en wat platte tekst is. Dit wordt meestal gedaan met kleurcontrast, maar alleen kleur 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 gekoppelde en niet-gekoppelde tekst niet kunnen zien. Daarom wordt de onderstreepte tekst nog steeds beschouwd als de beste manier om links weer te geven.
Dus hoe schakel je een onderstreping uit als je dat nog steeds wilt doen? Aangezien dit een visueel kenmerk is waar we ons zorgen over maken, zullen we ons wenden tot het deel van onze website dat alle visuele zaken afhandelt - CSS.
Cascading Style Sheets gebruiken om de onderstrepingen op links uit te schakelen
In de meeste gevallen wilt u een onderstreping niet uitschakelen op slechts één tekstlink. In plaats daarvan vereist uw ontwerpstijl waarschijnlijk dat u onderstrepingen uit alle links verwijdert. U zou dit doen door stijlen toe te voegen aan uw externe stylesheet.
een {
tekstdecoratie: geen;
}
Dat is het! Die ene simpele regel van CSS zou de onderstreping uitschakelen (die eigenlijk de CSS-eigenschap gebruikt voor "tekstdecoratie") op alle links.
Je zou ook specifieker kunnen worden met deze stijl. Als u bijvoorbeeld alleen de onderstreping of de links in het "nav" -element wilt uitschakelen, kunt u schrijven:
nav een {
tekstdecoratie: geen;
}
Nu zouden tekstlinks op de pagina de standaard onderstreping krijgen, maar die in de nav zouden het laten verwijderen.
Een ding dat veel webontwerpers kiezen, is om de link weer "aan" te zetten wanneer iemand over de tekst zweeft. Dit zou gedaan worden met de :hover CSS pseudo-klasse, soortgelijk:
een {
tekstdecoratie: geen;
}
een: zweef {
tekstdecoratie: onderstrepen;
}
Inline CSS gebruiken
Als alternatief voor het aanbrengen van wijzigingen in een externe stylesheet, kunt u de stijlen ook rechtstreeks aan het element zelf toevoegen in HTML.
Het probleem met deze methode is dat het stijlinformatie in je HTML-structuur plaatst, wat geen best practice is. Stijl (CSS) en structuur (HTML) moeten gescheiden worden gehouden.
Als u wilt dat alle tekstlinks van een site de onderstreping hebben verwijderd, voegt u deze stijlinformatie toe aan: elke link op individuele basis zou betekenen dat er een behoorlijke hoeveelheid extra opmaak wordt toegevoegd aan die van uw site code. Deze opgeblazen pagina's kunnen de laadtijd van een site vertragen en het algemene paginabeheer veel uitdagender maken. Om deze redenen verdient het de voorkeur om altijd een externe stylesheet te gebruiken voor alle paginastijlbehoeften.
tot slot
Hoe eenvoudig het ook is om de onderstreping van de tekstlinks van een webpagina te verwijderen, u moet zich ook bewust zijn van de gevolgen hiervan. Hoewel het inderdaad het uiterlijk van een pagina kan opschonen, kan dit ten koste gaan van de algehele bruikbaarheid. Houd hier rekening mee de volgende keer dat u overweegt de "tekstdecoratie"-eigenschappen van een pagina te wijzigen.