Ako zmeniť podčiarknutie odkazu HTML na webovej stránke

Tento článok vysvetľuje niekoľko spôsobov, ako môžete pomocou CSS zmeniť predvolený vzhľad textových odkazov na svojej webovej stránke odstránením podčiarknutia, zmenou na bodkovanú čiaru alebo zmenou jeho farby. Pre zmenu podčiarknutia na prerušovanú čiaru alebo na dvojité podčiarknutie sú zahrnuté ďalšie informácie.

Ako odstrániť podčiarknutie pri textových odkazoch

V predvolenom nastavení majú webové prehliadače určité Štýly CSS že sa vzťahujú na konkrétne prvky HTML. Ak tieto predvolené nastavenia neprepíšete vlastnými šablónami štýlov svojho webu, použijú sa predvolené nastavenia. Pre hypertextové odkazy, predvolený štýl zobrazenia je, že akýkoľvek prepojený text je modrý a podčiarknutý. Ak chcete, môžete zmeniť vzhľad týchto podčiarknutí alebo ich úplne odstrániť z webovej stránky.

Ak chcete odstrániť podčiarknutia z textových odkazov, použijete vlastnosť textovej dekorácie CSS. Tu je CSS, ktorý k tomu napíšete:

a {text-decoration: none; }

Pomocou tohto jedného riadku CSS odstránite podčiarknutie zo všetkých textových odkazov na svojej webovej stránke. Aj keď je to veľmi všeobecný štýl (používa selektor prvkov), má stále viac špecifík ako predvolené štýly prehľadávačov. Pretože tieto predvolené štýly vytvárajú na začiatku podčiarknutia, musíte ich prepísať.

Upozornenie na odstránenie podčiarknutia

Vizuálne môže byť odstránenie podčiarknutí presne to, čo chcete dosiahnuť, ale rovnako by ste mali byť opatrní. Či sa vám páči vzhľad podčiarknutých odkazov, alebo nie, nemôžete tvrdiť, že vďaka nim je zrejmé, na ktorý text sa odkazuje a ktorý nie. Ak odstránite podčiarknutia alebo zmeníte predvolenú modrú farbu odkazu, mali by ste ich nahradiť štýlmi, ktoré napriek tomu umožňujú vyniknúť prepojenému textu. Toto umožní návštevníkom vášho webu intuitívnejší zážitok.

Nepodčiarkujte odkazy

Ďalšia výstraha k odkazom a podčiarknutiam, nepodčiarkujte text, ktorý nie je odkazom, ako prostriedok jeho zdôraznenia. Ľudia očakávajú, že podčiarknutý text bude odkazom, takže ak podčiarknete obsah, ktorý chcete pridať zvýraznenie (namiesto zvýraznenia tučným písmom alebo kurzívou) odošlete nesprávnu správu a web bude zmätený používateľov.

Ako zmeniť podčiarknutie na bodky alebo pomlčky

Ak chcete zachovať podčiarknutie svojho textového odkazu, ale zmeniť štýl tohto podčiarknutia z predvoleného vzhľadu, ktorým je „plná“ čiara, môžete to urobiť tiež. Namiesto tejto plnej čiary môžete svoje odkazy podčiarknuť pomocou bodiek. Za týmto účelom stále odstránite podčiarknutie, ale nahradíte ho vlastnosťou štýlu border-bottom:

a {text-decoration: none; spodný okraj: 1px bodkované; }

Pretože ste odstránili štandardné podčiarknutie, bodkovaný je jediný, ktorý sa zobrazí.

Rovnakým spôsobom môžete získať pomlčky. Stačí zmeniť štýl spodného okraja na čiarkovaný:

a {text-decoration: none; spodný okraj: 1px prerušované; }

Ako zmeniť farbu podčiarknutia

Ďalším spôsobom, ako upozorniť na svoje odkazy, je zmena farby podčiarknutia. Len sa uistite, že farba ladí s vašou farbou farebná schéma.

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

Dvojité podčiarknutie

Trik na použitie dvojitých podčiarknutí spočíva v tom, že musíte zmeniť šírku orámovania. Ak vytvoríte orámovanie so šírkou 1px, nakoniec získate dvojité podčiarknutie, ktoré vyzerá ako jedno podčiarknutie.

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

Existujúce podčiarknutie môžete tiež použiť na vytvorenie dvojitého podčiarknutia s ďalšími funkciami, napríklad s jedným z bodkovaných riadkov:

a {border-bottom: 1px double; }

Nezabudnite na štáty odkazu

Štýl okraja môžete k svojim odkazom pridať v rôznych stavoch, napríklad: vznášať sa,: aktívny alebo: navštíviť. Takto môžete vytvoriť pekný zážitok z prechádzania kurzom, keď použijete pseudotriedu „vznášať sa“. Ak chcete, aby sa pri umiestnení kurzora myši na odkaz zobrazilo druhé bodkované podčiarknutie, postupujte takto:

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