Hogyan lehet eltávolítani az aláhúzásokat a linkekből

click fraud protection

Alapértelmezés szerint a szöveges tartalom az HTML-hez kapcsolódik vagy a "horgony" elem használata aláhúzással van megtervezve. A webdesignerek gyakran úgy döntenek, hogy eltávolítják ezt az alapértelmezett stílust az aláhúzás eltávolításával.

Az aláhúzás oka és az ellen

Sok tervező nem törődik az aláhúzott szöveg megjelenésével, különösen a sok linket tartalmazó sűrű tartalomtömbökben. Ezek az aláhúzott szavak valóban megtörhetik a dokumentum olvasási folyamatát. Sokan azt állították, hogy ezek az aláhúzások valójában megnehezítik a szavak megkülönböztetését és gyors elolvasását, mivel az aláhúzás megváltoztatja a természetes betűformákat.

Ennek az aláhúzásnak a szöveges linkeken való megtartása azonban jogos előnyökkel jár. Például, ha nagy szövegtömbök között tallózik, az aláhúzott linkek és a megfelelő színkontraszt megkönnyítik az olvasók számára az oldal azonnali beolvasását és a linkek megismerését.

Ha mégis úgy dönt, hogy eltávolítja a hivatkozásokat a szövegből (egy egyszerű folyamat, amelyet hamarosan lefedünk), mindenképpen keresse meg a stílus stílusát, hogy mégis megkülönböztesse a linket az egyszerű szövegtől. Leggyakrabban ezzel történik

instagram viewer
színkontraszt, de önmagában a szín problémát jelenthet olyan látássérült látogatók számára, mint a színvakság. A színvakság sajátos formájától függően a kontraszt teljesen elveszhet rajtuk, megakadályozva, hogy lássák a linkelt és a nem kapcsolt szöveg közötti különbséget. Ezért az aláhúzott szöveget továbbra is a linkek megjelenítésének legjobb módjának tekintik.

Tehát hogyan kapcsolhatja ki az aláhúzást, ha mégis meg akarja csinálni? Mivel ez egy vizuális jellemző, amellyel foglalkozunk, rátérünk weboldalunk azon részére, amely a vizuális dolgokat kezeli - a CSS-t.

Lépcsőzetes stíluslapok használatával kapcsolja ki a linkek aláhúzását

A legtöbb esetben nem csupán egy szöveges linkre kívánja kihúzni az aláhúzást. Ehelyett a tervezési stílus valószínűleg megköveteli az aláhúzások eltávolítását az összes linkről. Ezt úgy tenné meg, hogy stílusokat adna hozzá a külső stíluslap.

a {
szövegdíszítés: nincs;
}

Ez az! Ez az egyetlen sor CSS kikapcsolná az aláhúzást (amely valójában a CSS tulajdonságot használja "szövegdekorációra") minden linken.

Ezzel a stílussal konkrétabb is lehetne. Például, ha csak az aláhúzást vagy a "nav" elem belső linkjeit akarta kikapcsolni, akkor ezt írhatja:

nav a {
szövegdíszítés: nincs;
}

Most az oldal szöveges hivatkozásai kapják meg az alapértelmezett aláhúzást, de a navigációs rendszerben lévők eltávolítják.

Az egyik dolog, amelyet sok webdesignőr választ, az az, hogy visszakapcsolja a linket, ha valaki a szöveg fölé viszi az egeret. Ezt a következő segítségével hajthatjuk végre: lebeg CSS ál-osztály, mint ez:

a {
szövegdíszítés: nincs;
}
a: lebeg {
szövegdíszítés: aláhúzás;
}

Az Inline CSS használata

A külső stíluslap módosításának alternatívájaként a stílusokat közvetlenül magához az elemhez is hozzáadhatja HTML.

Ezzel a módszerrel az a probléma, hogy stílusinformációkat helyez el a HTML struktúrában, ami nem a legjobb gyakorlat. A stílust (CSS) és a struktúrát (HTML) külön kell tartani.

Ha azt szeretné, hogy a webhely összes szöveges linkje eltávolítsa az aláhúzást, adja hozzá ezt a stílusinformációt minden egyes link külön-külön azt jelentené, hogy szép mennyiségű extra jelölést adnak hozzá a webhelyéhez kód. Ez az oldal felfújása lelassíthatja a webhely betöltési idejét, és az oldalak általános kezelését sokkal nagyobb kihívást jelentheti. Ezen okokból kifolyólag célszerű mindig egy külső stíluslapra fordulni, minden oldalstílus-igényhez.

Zárva

Bármilyen egyszerű az aláhúzás eltávolítása a weboldal szöveges linkjeiről, szem előtt kell tartania ennek következményeit is. Bár valóban megtisztíthatja az oldal megjelenését, ezt az általános használhatóság rovására teheti meg. Ezt vegye figyelembe, amikor legközelebb fontolóra veszi az oldal "szövegdekorációs" tulajdonságainak megváltoztatását.

instagram story viewer