Odstrániť podčiarknutie odkazu alebo vytvoriť prerušované dotykové alebo dvojité podčiarknuté prepojenia
V predvolenom nastavení majú webové prehliadače určité štýly CSS, ktoré sa vzťahujú na konkrétne prvky HTML. Ak neprepíšete tieto predvolené hodnoty pomocou vlastných šablón štýlov stránok, použije sa predvolené nastavenie. Pre hypertextové odkazy je predvoleným štýlom zobrazenia, že akýkoľvek prepojený text bude modrý a podčiarknutý. Prehliadač to robí tak, aby návštevníci stránok mohli ľahko vidieť, aký text je prepojený. Mnoho webových dizajnérov sa nestará o tieto predvolené štýly, najmä tie, ktoré zdôrazňujú. Našťastie CSS uľahčuje zmenu vzhľadu týchto podčiarkov alebo úplné odstránenie.
Odstránenie podčiarknutia textových odkazov
Podčiarknutý text môže byť náročnejší na čítanie toho, čo nie je podčiarknuté. Okrem toho mnohí dizajnéri jednoducho nestarajú o vzhľad podčiarknutých textových odkazov. V týchto prípadoch budete pravdepodobne chcieť tieto podčiarknutia úplne odstrániť.
Ak chcete odstrániť podčiarknuté textové odkazy, použijete dekoráciu textových vlastností CSS. Tu je CSS, ktorý by ste napísali, aby ste to urobili:
a {text-decoration: none; }
S tým istým riadkom CSS by ste odstránili podčiarknutie zo všetkých textových odkazov. Hoci ide o veľmi všeobecný štýl (používa selektor prvkov), stále má viac špecifikácie, než štandardné štýly prehliadačov robia. Pretože tieto predvolené štýly sú to, čo vytvára podčiarknutie, musíte to prepísať.
Upozornenie na odstránenie podčiarknutia
Vizuálne odstránenie podčiarknutia môže byť presne to, čo chcete dosiahnuť, ale mali by ste byť opatrní, keď to urobíte rovnako. Či sa vám páči vzhľad podčiarknutých odkazov alebo nie, nemôžete tvrdiť, že to robia zrejmé, ktorý text je prepojený a ktorý nie. Ak odoberiete podčiarknutie alebo zmenu tejto štandardnej modrej farby odkazu, mali by ste sa uistiť, že ich nahradíte štýly, ktoré stále umožňujú odkazovaný text vyčnievať. To vám prinesie intuitívnejšiu skúsenosť návštevníkov vašich stránok.
Nepodporujte odkazy bez odkazov
Ďalšia upozornenie na odkazy a podčiarknutia nevyjadruje text, ktorý nie je odkazom ako spôsob, ako to zdôrazniť. Ľudia očakávajú, že podčiarknutý text bude odkazom, takže ak podčiarknete obsah s cieľom pridať dôraz (namiesto toho, aby ste ho označili tučným písmom alebo kurzívou), posielate nesprávnu správu a zamieňajú používateľov stránok.
Zmeňte podčiarknutie na bodky alebo pomlčky
Ak chcete, aby ste textový odkaz podčiarkli, ale zmeniť štýl tohto podčiarknutia z predvoleného vzhľadu, ktorý je riadkom "soldi", môžete to urobiť aj vy. Namiesto tejto plnej čiary môžete použiť body na zdôraznenie odkazov. Ak to chcete urobiť, stále odstránite podčiarknutie, ale nahradíte ju vlastnosťou štýlu dolného okraja:
a {text-decoration: none; okraj: 1px bodkovaný; }Keďže ste odstránili štandardnú podčiarkovku, bodka je jediná, ktorá sa zobrazí.
Môžete urobiť to isté, aby ste dostali pomlčky. Stačí zmeniť štýl spodného okraja na prerušovanú:
a {text-decoration: none; okraj spodnej: 1px prerušený; }Zmeňte farbu podčiarknutia
Ďalším spôsobom, ako upriamiť pozornosť na vaše odkazy, je zmena farby podčiarknutia. Len sa ubezpečte, že farba je v súlade s farebnou schémou .
a {text-decoration: none; okraj: 1px červená; }Dvojité podčiarknutia
Trik používať dvojité podčiarknutie je, že musíte zmeniť šírku hranice. Ak vytvoríte 1px širokú hranicu, skončíte s dvojitým podčiarknutím, ktoré vyzerá ako jeden podčiark.
a {text-decoration: none; spodná hranica: 3px dvojitá; }Môžete tiež použiť existujúce podčiarknutie na vytvorenie dvojitého podčiarknutia s inými funkciami, ako je napríklad jeden z riadkov bodkovaný:
{border-bottom: 1px double; }Nezabudnite na odkazy
Do odkazov môžete pridať spodný štýl ohraničenia v rôznych štátoch, ako napríklad: vznášať,: aktívny alebo: navštívil. To môže vytvoriť pekný prehliadací štýl pre návštevníkov, keď používate pseudotriedu "hover". Ak prejdete kurzorom nad odkaz, zobrazí sa druhá bodka podtržená:
a {text-decoration: none; } a: umiestnite kurzor myši {border-bottom: 1px dotted; }Originálny článok od Jennifer Krynin. Upravil Jeremy Girard