Odstranit podtržení vazby nebo vytvořit podtržené dotykové nebo dvojité podtržené vazby
Ve výchozím nastavení prohlížeče webu mají určité styly CSS, které platí pro určité prvky HTML. Pokud tyto výchozí hodnoty nepřepíšete pomocí vlastních stylů stránek, použije se výchozí nastavení. U hypertextových odkazů je výchozí styl zobrazení, že jakýkoli propojený text bude modrý a podtržený. Prohlížeč tak činí, aby návštěvníci webu mohli snadno vidět, jaký text je spojen. Mnoho webových designérů se nestará o tyto výchozí styly, zvláště ty, které zdůrazňují. Naštěstí CSS usnadňuje změnu vzhledu těchto podtržení nebo jejich úplné odstranění.
Odstranění podtržení textových odkazů
Podtržený text může být náročnější, když si přečtete text, který není podtržen. Navíc mnoho návrhářů jednoduše nestará o vzhled podtržených textových odkazů. V těchto případech pravděpodobně budete chtít tyto podtržení zcela odstranit.
Chcete-li odstranit podtržení z textových odkazů, použijete textovou výzdobu vlastností CSS. Zde je CSS, který byste napsali, abyste to udělali:
a {text-decoration: none; }}
Tímto jedním řádkem CSS byste odstranili podtržení ze všech textových odkazů. I když je to velmi obecný styl (používá selektor prvků), stále má více specifičnosti než standardní styly prohlížečů. Protože tyto výchozí styly vytvářejí podtržení, je třeba je přepsat.
Upozornění při odstraňování podtržení
Vizuálně, odstranění podtržení může být přesně to, co chcete dosáhnout, ale měli byste být opatrní, když to uděláte stejně. Ať už se vám líbí vzhled podtržených odkazů nebo ne, nemůžete tvrdit, že zjevují, jaký text je spojen a co není. Pokud odstraníte podtržení nebo změníte výchozí barvu modrého odkazu, měli byste se ujistit, že je nahrazujete styly, které stále umožňují, aby odkazovaný text vystupoval. To vám umožní intuitivnější zážitek návštěvníků vašeho webu.
Nepodceňujte žádné odkazy
Další opatrnost na odkazy a podtržení nezdůrazňuje text, který není odkazem jako způsob, jak jej zdůraznit. Lidé mohou očekávat, že podtržený text bude odkazem, takže pokud zdůrazníte obsah, abyste přidali důraz (namísto toho, že je to tučné nebo kurzívní), posíláte špatnou zprávu a zaměňujete uživatele webu.
Změňte podtržení na body nebo pomlčky
Pokud chcete podtrhnout textový odkaz, ale změnit styl tohoto podtržení z výchozího vzhledu, což je řádek "soldi", můžete to také provést. Namísto této pevné linky můžete použít tečky k podtržení vazeb. Chcete-li to provést, bude stále odstranit podtržení, ale nahradíte ji vlastností stylu ohraničení dolů:
a {text-decoration: none; okraj: 1px bodkovaný; }}Protože jste odstranili standardní podtržení, je tečkovaná jediná, která se zobrazí.
Můžete udělat totéž, abyste získali pomlčky. Stačí změnit styl spodního okraje na přerušovanou:
a {text-decoration: none; okraj: dolní 1px; }}Změna barvy podtržení
Dalším způsobem, jak upozornit na vaše odkazy, je změnit barvu podtržení. Jen se ujistěte, že barva odpovídá barevnému schématu .
a {text-decoration: none; okraj: 1px červená; }}Dvojité podtržení
Trik k použití dvojitého podtržení je, že musíte změnit šířku hranice. Vytvoříte-li 1px širokou hranici, skončíte s dvojitým podtržením, které vypadá jako jediné podtržení.
a {text-decoration: none; okraj: 3px dvojitý; }}Můžete také použít existující podtržení, abyste vytvořili dvojité podtržení s dalšími funkcemi, například s jedním řádkováním:
a {border-bottom: 1px double; }}Nezapomeňte na odkazy
Do svých odkazů můžete přidat styly ohraničení dolů v různých stavech, jako například: podržet,: aktivní nebo: navštívili. To může vytvořit příjemný zážitek ve stylu "převrácení" pro návštěvníky, když použijete pseudotřídní "hover". Chcete-li vytvořit druhý podtržený bod, objeví se při přesunutí kurzoru nad odkaz:
a {text-decoration: none; } a: podržte {border-bottom: 1px bodkovaný; }}Původní článek Jennifer Krynin. Upravil Jeremy Girard