Remove Underline linkek eltávolítása vagy Szaggatott pontozott vagy kettős aláhúzott hivatkozások létrehozása
Alapértelmezés szerint webes böngészést végez bizonyos CSS-stílusok használatával, amelyek meghatározott HTML elemekre vonatkoznak. Ha nem írja felül ezeket az alapértelmezéseket a webhely saját stíluslapjaival, akkor az alapértelmezett értékek érvényesek lesznek. Hiperhivatkozások esetén az alapértelmezett megjelenítési stílus az, hogy minden összekapcsolt szöveg kék és aláhúzott. A böngésző ezt teszi, hogy a webhely látogatói könnyen megnézhessék, hogy melyik szöveget kapcsolják össze. Számos webdesigner nem érdekli ezeket az alapértelmezett stílusokat, különösen a hangsúlyokat. Szerencsére a CSS megkönnyíti az aláhúzók megjelenését, vagy teljesen eltávolítja őket.
A szöveges hivatkozások aláhúzásának eltávolítása
Az aláhúzott szöveg nagyobb kihívást jelenthet a nem aláhúzott szöveg elolvasásához. Ezenkívül sok tervező egyszerűen nem törődik az aláhúzott szöveges linkek megjelenésével. Ezekben az esetekben valószínűleg el szeretné távolítani ezeket a hangsúlyokat.
A szöveges hivatkozások aláhúzásainak eltávolításához a CSS tulajdonság szövegdekorációját használja. Itt van a CSS, amit írsz erre:
a {text-decoration: none; }
A CSS egyik sorával eltávolíthatja az aláhúzást minden szöveges linkből. Bár ez egy nagyon általános stílus (elemkiválasztóval működik), még mindig több sajátossággal rendelkezik, mint az alapértelmezett böngésző stílusok. Mivel azok az alapértelmezett stílusok, amelyekkel kezdődik a hangsúly, az felülírja azt.
Vigyázat az aláhúzás eltávolítására
Vizuálisan az aláhúzás eltávolítása lehet pontosan az, amit el akar érni, de akkor is óvatosnak kell lenni, amikor ezt is elvégezed. Akár tetszett az aláhúzott linkek megjelenése, akár nem, nem vitathatja, hogy nyilvánvalóvá teszi, hogy melyik szöveg kapcsolódik, és ami nem. Ha eltávolítja az aláhúzást vagy módosítja az alapértelmezett kék színű kapcsolatot, győződjön meg róla, hogy azokat olyan stílusokkal cseréli le, amelyek továbbra is lehetővé teszik a hivatkozott szöveg kiemelését. Ez intuitívabb élményt nyújt a webhely látogatóinak számára.
Ne hangsúlyozzák a nem linkeket
Egy másik óvatosság a linkeken és a hangsúlyokon, nem hangsúlyozzák a szöveget, amely nem kapcsolódás, mint annak hangsúlyozásának módja. Az emberek elvárják, hogy az aláhúzott szöveg link legyen, ezért ha hangsúlyozzuk a tartalmat annak érdekében, hogy hangsúlyt kapjunk (ahelyett, hogy félkövér vagy dőlt), hibás üzenetet küldünk, és összekeverik a webhelyhasználókat.
Módosítsa a Aláhúzást pontokra vagy kötőelemekre
Ha meg szeretné tartani a szöveges link aláhúzását, de megváltoztathatja az aláhúzás stílusát az alapértelmezett megjelenésből, ami egy "money" vonal, akkor ezt is megteheti. A tömör vonal helyett pontokat használhat a hivatkozások kiemelésére. Ehhez még mindig eltávolítja az aláhúzást, de a szegélyoldali stílusú tulajdonsággal helyettesítheti:
a {text-decoration: none; határ-alsó: 1 pont pontozott; }Mivel eltávolította a szabványos aláhúzást, a pontozott az egyetlen, amely megjelenik.
Ugyanazt teheti meg, ha kötőjeleket kap. Csak változtassa át a szegélyes alsó stílust:
a {text-decoration: none; szegélyes alj: 1px szaggatott; }A Aláhúzás színe megváltoztatása
Egy másik módja annak, hogy felhívja a figyelmet a linkekre, hogy megváltoztassa az aláhúzás színét. Győződjön meg róla, hogy a szín megfelel a színsémájának .
a {text-decoration: none; szegélyes alj: 1px tömör vörös; }Kettős aláhúzás
A kettős aláhúzás használatának trükkje, hogy megváltoztatnod kell a szélesség szélességét. Ha 1px széles határt hoz létre, akkor dupla aláhúzással fejeződik be, amely egyetlen aláhúzásnak tűnik.
a {text-decoration: none; határ-alsó: 3px dupla; }A meglévő alsóvonalat is használhatja, hogy dupla aláhúzást hajtson végre más jellemzőkkel, például a pontozott vonalak egyikével:
a {border-bottom: 1px dupla; }Ne felejtse el a link állapotát
A szegélyoldali stílust különböző államokhoz adhatja hozzá, például: lebegve,: aktív vagy: meglátogatott. Ez egy szép "rollover" stílusú élményt hozhat létre a látogatók számára, ha ezt a "hover" pszeudoosztályt használja. Ha egy másik pontozott aláhúzást szeretne megjeleníteni, amikor a hivatkozás fölé mutat:
a {text-decoration: none; } a: lebeg (border-bottom: 1px pontozott; }Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard