Několik tipů, jak odstranit odkazy na podtržítky ve formátu HTML pomocí CSS

Uspořádání libovolného informativního textu znamená zahrnutí smysluplných hypertextových odkazů nebo kotev. Tyto prvky se přidávají pomocí značky "a" (anchor). Ve výchozím nastavení zobrazují moderní prohlížeče podobný prvek s dolním podtržítkem. Často weboví návrháři nebo weboví návrháři dávají přednost buď tomu, aby tento styl změnili, nebo je zcela vymazali.

V některých případech je to skutečně nutné. Například v hustém referenčním bloku, kde přebytečný design pouze přetíží vnímání a ztěžuje čtení dokumentu. V některých případech je však vhodné zachovat rozdíly mezi textem a odkazy. Pokud návrh stránky zcela vylučuje takové formátování, pak je vhodné použít jakýkoli jiný druh výběru takových prvků. Nejběžnějším typem vymezení dnes je barevný kontrast kotvy v textu. Je to efektivní. Jedinou malou nevýhodou této možnosti bude problém zvýraznění textu lidmi, kteří nemohou vnímat různé barvy (barevná slepota). Ale je to tak nízké procento uživatelů, že mohou být opomíjeni.

Pokud by se nakonec rozhodlo odstranit podtržítka odkazů, budou vyžadovány určité znalosti o struktuře tvorby webové stránky, jmenovitě CSS.

Odstraňte podtržení odkazů na webu

Pro člověka, který je dobře známý ve vývoji webových stránek a zejména v CSS, odstranění podtržítků odkazů nebude velmi obtížné. Chcete-li to provést, stačí najít a otevřít soubor v souborech, které jsou zodpovědné za návrh stylu. Obvykle se nachází v kořenovém adresáři a má příponu .css. Odstraňování odkazů podtržítka lze provést jednoduchým kódem:

a {

textová výzdoba: žádná;

}}

Tato malá čára odstraní celý web, který podtrhuje všechny prvky, které jsou registrovány značkou "a".

Co když nemáte přístup k souboru CSS?

V takovém případě je vhodné použít štítek stylu na začátku dokumentu. Pracuje stejně jako soubor CSS. Chcete-li aplikovat styly, je třeba na začátku dokumentu (nebo HTML stránky) dokončit návrh, ve kterém platí obvyklá pravidla stylu CSS.

Tyto styly platí pouze pro určitou stránku. V jiných částech nebo dokumentech stránek se nezúčastní.

Odstraňte podtržení odkazů při vznášení

Ale co když potřebuji odstranit podtržení odkazu při vznášení? CSS v tomto případě nám může pomoci. Kód bude vypadat takto:

a: hover {

textová výzdoba: žádná;

}}

Jedná se o pseudo-třídu ": hover", která je zodpovědná za zdobení prvků, když se vznášejí přes kurzor.

Sestavením těchto dvou možností můžeme vytvořit tak, že podtržítka odkazu bude zobrazena pouze při vznášení vzhledu, jinak bude vše vypadat jako prostý text:

a {

textová výzdoba: žádná;

}}

a: hover {

textová výzdoba: podtržení;

}}

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

Jak je vidět z výše uvedeného, ​​změna stylu prvku na webu nebo html dokumentu je poměrně snadná. Nevýhodou těchto možností je neschopnost selektivně použít styly: nikoliv na celý web nebo dokument, ale na konkrétní odkaz.

Existuje několik řešení tohoto problému.

Odkazy podtržítka můžete odstranit v řádku. I když se tomu nedoporučuje, pokud jde o optimalizaci webu.

Chcete-li to provést, musíte zadat parametr Styl přímo v referenční značce:

Druhá možnost je přijatelnější.

Do prvku přidáme další třídu nebo id a přidělíme tyto styly již vybraným selektorům:

Dále se všichni převlékli. V souboru CSS můžeme odstranit podtržení odkazů použitím známého stylu v třídě nebo identifikátoru, podle vašeho výběru.

Třída je před jménem registrována tečkou:

.none_ decoration {

textová výzdoba: žádná;

}}

Identifikátor je označen znakem #:

#none_ decoration {

textová výzdoba: žádná;

}}

Toto pravidlo platí jak pro soubor CSS, tak pro stylový štítek

Změňte styl zobrazení odkazu v textu

Kromě odstranění podtržení odkazu povoluje CSS jiné typy stylu. Weboví designéři nebo weboví návrháři často používají změnu barvy vzhledem k hlavnímu textu, aby vyzdvihovali referenční text.

K tomu je také celkem jednoduché:

a {

barvy: * zadejte požadovanou barvu v libovolném formátu (* červená, # c2c2c2, rgb (132, 33, 65) *);

}}

Tato stylizace se aplikuje stejnými pravidly, která jsou popsána pro zrušení vazby. Pravidla CSS jsou v tomto případě totožná. Změnit barvu odkazu a vrátit zpět lze použít jako samostatný styl (pak bude odkaz podtrhán, ale změní barvu ze standardní modře na požadovanou barvu).

Nahrazuje standardní styl

Další poznámka nakonec. Namísto vrácení podtržítka vazby CSS je možné nahradit standardní návrhové hodnoty. Chcete-li to provést, nahradit následující hodnoty v designu dekorace textu:

text-dekorace-styl:

• Pokud potřebujete pevný řádek, zadejte hodnotu pevné.
• U vlnitých čar - zvlněná.
• Dvojitá linka - resp. Dvojitá.
• Linku lze nahradit řadou bodů - tečkovaná.
• Slovo podtrhněte jako tečkovanou čáru - přerušovanou

A také můžete změnit pozici řádku vzhledem k textu:

Line line-text-dekorace-line může mít hodnoty:

• Standardní (podtržené zespodu) - podtržené.
• Překročit slovo - přes.
• Linka je nahoře - nadměrná.
• Známe žádné - bez stylingu.

A barva (nezaměňujte s barvou textu!):

text-dekorace-line: (libovolné barvy v libovolném formátu *červená, # c2c2c2, rgb (132, 33, 65) *).

Pro pohodlí mohou být všechny tři pozice zapsány dohromady v návrhu:

textová výzdoba: červená, line-through, zvlněná.