Několik tipů pro odstranění podtržení odkazů HTML pomocí CSS

Uspořádání libovolného informativního textu zahrnuje zahrnutí sémantických hypertextových odkazů nebo kotev. Tyto prvky jsou doplněny značkou "a" (kotva). Moderní prohlížeče ve výchozím nastavení zobrazují podobný prvek se spodním podtržením. Často návrháři nebo weboví návrháři dávají přednost nebo změnu tohoto stylu nebo vůbec ho odstraní.

V některých případech je to skutečně nutné. Například v hustém referenčním bloku, kde nadbytečný návrh pouze přetěžuje vnímání a komplikuje čtení dokumentu. V některých případech je však vhodné udržovat text a odkazy oddělené. Pokud návrh stránky zcela vylučuje takové formátování, pak stojí za to použít jakýkoli jiný druh výběru takových prvků. Nejběžnějším typem delineace je dnes barevný kontrast kotev v textu. Je to efektivní. Jediným malým mínusem takové možnosti bude problém výběru textu pro lidi, kteří nemohou vnímat různé barvy (barevná slepota). Ale je to tak nízké procento uživatelů, že může být zanedbáváno.


Pokud bylo nicméně rozhodnuto o odstranění podtržení odkazů, pak budou vyžadovány určité znalosti o struktuře vytvoření webové stránky, jmenovitě CSS.

Vymažte podtržítka odkazů na webu

Pro člověka, který má zkušenosti s webdesignem a zejména v CSS, odstranění podtržítků odkazů nebude zvláštní úlohou. Chcete-li to provést, stačí najít a najít soubory webuotevřený soubor, který je zodpovědný za stylový design. Obvykle je v kořenovém adresáři a má příponu .css. Oddělovač odkazů můžete odstranit pomocí jednoduchého kódu:


a {text-decoration: none; } Tento malý řádek odstraní všechny prvky napsané značkou "a" celé stránky. Co když však nemáte přístup k souboru CSS? V tomto případě je vhodné použít štítek stylu na začátku dokumentu. Funguje stejným způsobem jako soubor CSS. Chcete-li aplikovat styly, je třeba na začátku dokumentu (nebo HTML stránky) přidat návrh, který má obvyklé pravidla stylů CSS.
Tyto styly platí pouze pro určitou stránku. Nebudou pracovat v jiných částech nebo dokumentech webu.

Vymažte podtržení odkazů při vznášedlování

Ale co když musíte odstranit podtržení odkazu při vznášení? CSS nám může pomoci v tomto případě. Kód bude vypadat takto: a: hover {text-decoration: none; } Pseudo-class ": hover" je zodpovědný za zdobení prvků při pohybu kurzorem. Spojením těchto dvou možností můžeme podtržení odkazu zobrazit pouze při vznášení se, jinak bude vše vypadat jako prostý text: a {text-decoration: none; } a: podržte {text-decoration: underline; }

Použití identifikátorů a tříd

Jak je vidět z výše uvedeného, ​​je snadné změnit stylizaci položky na webu nebo html dokumentu. Nevýhody takových variant jsou nemožnost selektivní aplikace stylu: nikoliv celého místa nebodokumentu, ale na konkrétní odkaz.
Existuje několik možností řešení tohoto problému. Odkazy na podtržítky odkazů můžete odstranit neaktivním způsobem. I když se kategoricky nedoporučuje dělat, pokud jde o optimalizaci webu. Chcete-li to provést, musíte zadat možnost Styl přímo v tagu odkazu: Druhá možnost je přijatelnější. Zadejte prvek do další třídy nebo id a již tyto voliče přidělujeme styl, který potřebujeme: Pak je vše provedeno na válcované straně. V souboru CSS můžeme odstranit podtržítka odkazů tím, že použijeme styl, který je pro nás známý pro danou třídu nebo identifikátor, podle vašeho výběru. Třída je napsána s tečkou před jejím jménem: .none_decoration {text-decoration: none; } Identifikátor je označen znakem #: # none_decoration {text-decoration: none; } Toto pravidlo se vztahuje jak na soubor CSS, tak na značku stylu

Změní styl zobrazení odkazu v textu

Kromě možnosti odstranit podtržítka odkazu vám CSS umožňuje použít i jiné typy stylingu. Weboví designéři nebo grafici často používají barvu hlavního textu k odlišení referenčního textu.
Proveďte to celkem jednoduché: a {color: * zadejte požadovanou barvu v libovolném formátu (* červená, # c2c2c2 rgb (1323365) *) *; } Podobná stylizace se používá podle stejných pravidel, jaká jsou popsána pro zrušení vazby. Pravidla CSS jsou v tomto případě totožná. Změna barvy odkazu a odvolání podtržítka lze použít jako samostatnou stylizaci (odkaz zůstane podtržený, ale změní barvu ze standardní modře nanezbytné pro vás).

, který nahrazuje standardní styling

Další poznámky jako poslední. Spíše než zrušit podtržení odkazů CSS umožňuje nahradit výchozí hodnoty designu. Je to dost, aby nahradit tyto hodnoty do návrhu textu dekorování: text-dekorace ve stylu:
  • Pokud budete potřebovat pevnou linku, určenou hodnotu pevné látky.
  • Pro vlnovitou vlnovou linku.
  • Dvoulůžkový je dvakrát.
  • , linie mohou být nahrazena sekvence bodů - tečkované.
  • Spodní linie slovo ve formě zdvihu - přerušované
  • a můžete změnit polohu vzhledem k textovém řádku: Linka-text-dekorace-linka design může nabývat hodnot:
  • Standard (podtržení níže) - zdůraznil.
  • Přepis slova (fráze) - přes.
  • Linka je nadsazená.
  • Známe nás žádné - bez stylingu.
  • a barva (neplést s barvou textu!): Text-dekorace-LINE: (jakákoliv barva v jakémkoli formátu * červená, # c2c2c2 rgb (1323365) *). Pro větší pohodlí, všechny tři pozice mohou být psány společně ve strukturách: text-decoration: červená, line-through, vlnité.

    Související publikace