Jak odstranit podtržení odkazů? Vlastnosti CSS text-decoration

12. 3. 2019

Odkazy jsou nedílnou součástí jakékoli webové stránky. Mohou být jak textové, tak i tlačítka. Tento článek bude obsahovat pouze textové odkazy.

Není žádným tajemstvím, že v HTML všechny prvky nevypadají velmi čistě a design je upřímně řečeno špatný.

Nejdůležitější částí odkazu, který zasahuje do vytváření odkazů, je podtržítko. Nyní pochopíme, jak odstranit podtrhávání odkazů v CSS.

Vytváření propojení

Chcete-li prokázat funkci této metody, musíte vytvořit odkaz. To pomůže standardní HTML 5.

Chcete-li vytvořit odkaz, musíte použít párovou značku "a", která není blokem. Proto, aby byly odkazy umístěny na samostatných linkách, je nutné je uzavřít do značek odstavců (p). Můžete také použít funkci zobrazení: blok pro každý odkaz.

Začněte vytvářet odkazy. Do dokumentu HTML zadáme několik značek. Mezi zaváděcími a zavíracími značkami napíšeme název našeho odkazu, který se zobrazí na naší stránce.

Kromě toho má značka "a" řadu atributů. Atribut href je povinný, bez nějž nebude odkaz sledován. Označuje cestu k stránce nebo souboru, ke kterému náš odkaz vede.

V uvedeném příkladu nebudou použity žádné další odkazy, proto můžete zadat standardní hodnotu #.

Tento odkaz je vytvořen, nyní musí být stylizovaný. Existuje několik způsobů, jak odstranit podtržené odkazy v CSS:

  1. Atribut stylu (umístěný uvnitř značky).
  2. Značka stylu (umístěná v hlavním bloku).
  3. Externí styly připojení pomocí značky odkazu.

Chcete-li zrušit podtržení odkazu v CSS, můžete použít libovolnou z těchto metod, ale připojíte se k externím stylům a považujete za nejvhodnější.

HTML kód

Tip: Při stylování webové stránky upřednostněte externí odkazy.

Stylové odkazy v CSS

V uvedeném příkladu bude použito externí propojení. Otevřete soubor CSS, ve kterém změníme návrh odkazů.

Kromě odkazů na této stránce není nic. Proto použijeme značku "a" jako volič. Pokud dáváte přednost, můžete přidat třídy pro každý odkaz, ale to je volitelné.

Napište selektor "a", ve kterém bude zapsána vlastnost dekorace textu: none;

Jedna jednoduchá vlastnost dekorace textu se používá k odstranění podtržení pomocí CSS.

Textová výzdoba obsahuje řadu dalších hodnot. S ním můžete vytvořit horní podtržítko, ale je zřídka používán.

Chcete-li odstranit podtržení odkazu, v dokumentu CSS zadejte následující kód:

Kód CSS

Pro zjednodušení kódu můžete použít jednoduchý styl atributu. V příkladu úplná stránka není zastoupena v plnohodnotném návrhu, takže tuto metodu můžete použít.

Nejdůležitější věcí není natřít celou stránku HTML takovými způsoby. V tomto kódu můžete velmi snadno zmást.

Změna indukovaného odkazu v CSS

Předpokládejme, že chcete, aby vazby v normálním stavu podtržítka zůstaly a zmizely, když se vznášíte. Chcete-li odstranit nebo nastavit podtržení pro odkaz při pohybu myší, použije CSS pseudotřídu ": hover". Zde je příklad:

Kód CSS pro indukovaný odkaz

Styly mohou být použity nejen na indukované spojení, ale také na aktivované nebo navštívené. Chcete-li to provést, použijte pseudotřídy ": active" a ": visited".