Jak změnit podtržení odkazu HTML na webové stránce

Tento článek vysvětluje několik způsobů, jak můžete pomocí CSS změnit výchozí vzhled textových odkazů na své webové stránce odstraněním podtržení, změnou na tečkovanou čáru nebo změnou jeho barvy. Jsou zahrnuty další informace pro změnu podtržení na přerušovanou čáru nebo dvojité podtržení.

Jak odstranit podtržení u textových odkazů

Ve výchozím nastavení mají webové prohlížeče určité Styly CSS že se vztahují na konkrétní prvky HTML. Pokud tato výchozí nastavení nepřepíšete vlastními styly stylů vašeho webu, použijí se výchozí hodnoty. Pro hypertextové odkazy, výchozí styl zobrazení je, že jakýkoli propojený text je modrý a podtržený. Pokud chcete, můžete změnit vzhled těchto podtržení nebo je úplně odstranit z vaší webové stránky.

Chcete-li odstranit podtržení z textových odkazů, použijte vlastnost CSS text-decoration. Zde je CSS, který k tomu napíšete:

a {text-decoration: none; }

S tímto jedním řádkem CSS odstraníte podtržení ze všech textových odkazů na vaší webové stránce. I když se jedná o velmi obecný styl (používá selektor prvků), má stále více specificity než výchozí styly prohlížečů. Protože tyto výchozí styly vytvářejí podtržení, je třeba je přepsat.

Upozornění na odstranění podtržení

Vizuálně může být odstranění podtržení přesně to, čeho chcete dosáhnout, ale měli byste být opatrní, když to uděláte také. Ať se vám líbí vzhled podtržených odkazů, nebo ne, nemůžete tvrdit, že je zřejmé, na který text je odkazováno a který ne. Pokud odstraníte podtržení nebo změníte výchozí barvu modrého odkazu, měli byste se ujistit, že je nahradíte styly, které stále umožňují vyniknout propojenému textu. Návštěvníci vašeho webu tak získají intuitivnější zážitek.

Nepodceňujte odkazy

Další upozornění na odkazy a podtržení, nepodtrhujte text, který není odkazem, jako způsob jeho zdůraznění. Lidé očekávali, že podtržený text bude odkazem, takže pokud podtrhnete obsah, abyste jej mohli přidat zvýraznění (místo toho, aby bylo zvýrazněno tučně nebo kurzívou), odešlete špatnou zprávu a web zaměníte uživatelů.

Jak změnit podtržení na tečky nebo pomlčky

Pokud chcete zachovat podtržení textového odkazu, ale změnit styl tohoto podtržení z výchozího vzhledu, což je „plná“ čára, můžete to udělat také. Místo této plné čáry můžete odkazy podtrhnout pomocí teček. Chcete-li to provést, podtržení stále odeberete, ale nahradíte jej vlastností stylu ohraničení dole:

a {text-decoration: none; spodní okraj: 1px tečkovaný; }

Protože jste odstranili standardní podtržení, tečkovaný je jediný, který se zobrazí.

Totéž můžete udělat, abyste získali pomlčky. Stačí změnit styl ohraničení dole na čárkovaný:

a {text-decoration: none; border-bottom: 1px dashed; }

Jak změnit barvu podtržení

Dalším způsobem, jak upozornit na své odkazy, je změna barvy podtržení. Jen se ujistěte, že barva odpovídá vaší barevné schéma.

a {text-decoration: none; spodní okraj: 1px plná červená; }

Dvojité podtržení

Trik při použití dvojitých podtržení spočívá v tom, že musíte změnit šířku ohraničení. Pokud vytvoříte 1px široké ohraničení, skončíte s dvojitým podtržením, které vypadá jako jedno podtržení.

a {text-decoration: none; spodní okraj: 3px dvojitý; }

Existující podtržení můžete také použít k vytvoření dvojitého podtržení s dalšími funkcemi, jako je například jedna z tečkovaných čar:

a {border-bottom: 1px double; }

Nezapomeňte na stavy odkazů

Styl ohraničení dole můžete přidat ke svým odkazům v různých stavech, například: vznášet se,: aktivní nebo: navštíveno. To může vytvořit příjemný zážitek ve stylu „převrácení“ pro návštěvníky, když použijete tuto pseudotřídu „vznášet se“. Chcete-li při přechodu kurzorem na odkaz zobrazit druhé tečkované podtržení:

a {text-decoration: none; }
a: hover {border-bottom: 1px dotted; }