Verwyder skakel onderstreep of skep strepies, of dubbel onderstreepte skakels
Standaard het webblaaie sekere CSS-style wat hulle van toepassing is op spesifieke HTML-elemente. As u hierdie standaard nie oorskry met u eie stylbladsye nie, sal die verstekwaardes van toepassing wees. Vir hiperskakels is die verstek vertoonstyl dat enige gekoppelde teks blou en onderstreep sal wees. Die leser doen dit sodat besoekers van 'n webwerf maklik kan sien watter teks gekoppel is. Baie webontwerpers gee nie om vir hierdie standaardstyle nie, veral dié wat onderstreep. Gelukkig maak CSS dit maklik om die voorkoms van die onderstreep te verander of dit heeltemal te verwyder.
Die onderstreep verwyder op teksskakels
Onderstreepte teks kan meer uitdagend wees om die nie-onderstreepte teks te lees. Daarbenewens gee baie ontwerpers net nie om vir die voorkoms van onderstreepte teksskakels nie. In hierdie gevalle sal jy waarskynlik hierdie onderstreepte heeltemal wil verwyder.
Om die onderstreep van teksskakels te verwyder, gebruik jy die CSS-eiendoms teks-versiering. Hier is die CSS wat jy sou skryf om dit te doen:
'n (teks-versiering: geen; }
Met die een lyn van CSS, sal jy die onderstreep van alle teksskakels verwyder. Alhoewel dit 'n baie algemene styl is (dit gebruik 'n element selector), het dit steeds meer spesifisiteit as die standaard blaaiersstyle. Omdat daardie standaardstyle is wat die onderstreepe skep om mee te begin, is dit wat jy moet oorskryf.
'N Let op die verwydering van onderstreep
Visueel kan die verwydering van onderstreep presies wees wat jy wil bereik, maar jy moet versigtig wees as jy dit ook doen. Of jy nou die voorkoms van onderstreepte skakels wil hê of nie, jy kan nie argumenteer dat hulle dit duidelik maak oor watter teks gekoppel is en wat nie. As jy onderstreepings verwyder of die standaard blou skakelkleur verander, moet jy seker maak dat jy dit vervang met style wat nogtans gekoppelde teks toelaat om uit te steek. Dit sal 'n meer intuïtiewe ervaring vir besoekers van u werf maak.
Moenie onderstreep nie-skakels
Nog 'n waarskuwing oor skakels en onderstreep, moenie teks onderstreep wat nie 'n skakel is as 'n manier om dit te beklemtoon nie. Mense het onderstreepte teks verwag om 'n skakel te wees, so as jy inhoud onderstreep om klem te voeg (in plaas daarvan om dit vet of kursief te maak), stuur jy die verkeerde boodskap en verwar die werfgebruikers.
Verander die Onderstreep na Punte of Stippies
As jy jou teks skakel onderstreep wil hou, maar verander die styl van die onderstreep van die verstek-kyk, wat 'n "soldi" -reël is, kan jy dit ook doen. In plaas van die soliede lyn, kan jy dots gebruik om jou skakels te onderstreep. Om dit te doen, sal jy die onderstreep nog steeds verwyder, maar jy sal dit vervang met die grens-onderstyl-eienskap:
'n (teks-versiering: geen; grens-bodem: 1px gestippeld; }Aangesien u die standaard onderstreep verwyder het, is die stippel een die enigste een wat verskyn.
Jy kan dieselfde ding doen om dashes te kry. Verander net die grens-onderste styl:
'n (teks-versiering: geen; rand-bodem: 1px gestippel; }Verander die onderstreep kleur
Nog 'n manier om die aandag op jou skakels te vestig, is om die kleur van die onderstreep te verander. Maak seker dat die kleur pas by jou kleurskema .
'n (teks-versiering: geen; rand-bodem: 1px soliede rooi; }Dubbel Onderstreep
Die truuk om dubbele onderstrepe te gebruik, is dat jy die breedte van die grens moet verander. As jy 'n 1px wye grens skep, eindig jy met 'n dubbele onderstreep wat lyk soos 'n enkele onderstreep.
'n (teks-versiering: geen; grensbodem: 3px dubbel; }U kan ook die bestaande onderstreep gebruik om 'n dubbele onderstreep te maak met ander kenmerke, soos een van die lyne wat gestippel is:
'n {grens-bodem: 1px dubbel; }Moenie die skakel state vergeet nie
U kan die grens-onderste styl by u skakels by verskillende toestande soos hover, aktief of: besoek. Dit kan 'n goeie "rollover" -stylervaring vir besoekers skep as jy die pseudoklas gebruik. Om 'n tweede stippelagtige onderstreep te maak verskyn wanneer jy oor die skakel beweeg:
'n (teks-versiering: geen; } a: hover (grens-onderkant: 1px gestippeld; }Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard