Tanulj meg egy egyszerű módszert a HTML hivatkozások eltávolítására

Az eltávolítás lépései a szöveges linkekről és a tudatossággal kapcsolatos kérdésekről szólnak

Alapértelmezés szerint a vagy a "horgonyos" elemhez HTML- hez társított szöveges tartalom aláhúzott. Gyakran előfordul, hogy a webes tervezők eltávolítják az alapvonalat az alapértelmezett stílus eltávolításáról.

Sok tervező nem törődik az aláhúzott szöveg megjelenésével, különösen a sűrű tartalomban, sok linkkel. Mindezen aláhúzott szavak valóban megtörhetik a dokumentum olvasási folyamatát. Sokan azt állították, hogy ezek a hangsúlyok valójában a szavakat nehezebbé teszik a gyors megkülönböztetés és olvasás miatt, mivel a hangsúlyozza a természetes betűformákat.

Azonban jogosultak vannak arra, hogy megtartsák ezeket a hivatkozásokat a szöveges linkeken. Például, amikor nagy szövegtömböket keres, az aláhúzott hivatkozások és a megfelelő színkontraszt megkönnyítik az olvasók számára, hogy azonnal szkenneljenek egy oldalt, és lássák, hol vannak a linkek. Ha megnézed a webes cikkeket itt az About.com, valamint a többi cikket az oldalon, akkor látni fogja ezt a stílusát aláhúzott linkek a helyén.

Ha úgy döntenél, hogy eltávolít egy linket a szövegből (egy egyszerű folyamat, amelyet rövidesen le fogunk fedezni), mindenképpen keressünk módot arra, hogy a szöveget még mindig megkülönböztessük, ami megkülönbözteti azt, ami egy egyszerű szöveges link. Ez a leggyakrabban a fent említett színkontraszttal történik, de a szín önmagában is problémát okozhat a látássérültek számára, mint a színvakság. A színvakság sajátos formájától függően a kontraszt teljesen elvész, és megakadályozza, hogy meglátják a különbséget a kapcsolt és a nem kapcsolódó szöveg között. Ezért az aláhúzott szöveg továbbra is a legmegfelelőbb módja annak, hogy linkeket mutassanak be.

Szóval, hogyan kapcsolja le a hangsúlyt, ha mégis szeretné? Mivel ez egy olyan vizuális jellemző, amelyre aggodalmaskodunk, a weboldalunk részévé válunk, amely a vizuális - CSS-t kezeli.

A Cascading Style Sheets használatával kapcsolja ki a hivatkozások aláhúzását

A legtöbb esetben nem arra törekszünk, hogy csak egy szöveges linkre mutassunk ki egy aláhúzást. Ehelyett a tervezési stílusa valószínűleg megköveteli, hogy távolítsa el az összes hivatkozás aláhúzását. Ehhez stílusokat kell hozzáadnia a külső stíluslaphoz.

a {text-decoration: none; }

Ez az! Ez a CSS egy egyszerű vonala kikapcsolja az aláhúzást (amely valójában a CSS tulajdonságot használja a "text-decoration" -nek) az összes linken.

Ezt a stílust is jobban meg lehet határozni. Például, ha csak a "nav" elem aláhúzását vagy linkjeit szeretné kikapcsolni, írhat:

nav a {text-decoration: nincs; }

Most, az oldal szöveges linkjei az alapértelmezett aláhúzást kapják, de a navigációs programban szereplő elemek eltávolításra kerülnek.

Az egyik dolog, amit sok webes tervez, úgy dönt, hogy kapcsolja vissza a kapcsolatot "be", amikor valaki lebeg a szöveg fölött. Ez a következőképpen történik: hover CSS pseudo-class, például:

a {text-decoration: none; } a: ugrás {text-decoration: aláhúzás; }

Inline CSS használata

A külső stíluslap megváltoztatásának alternatívájaként a stílusokat közvetlenül a HTML elemhez is hozzáadhatja a következőhöz:

ez a link nincs aláhúzva

A probléma ezzel a módszerrel az, hogy elhelyezi a stílusadatokat a HTML struktúrán belül, ami nem a legjobb gyakorlat. A stílus (CSS) és a struktúra (HTML) külön kell tartani.

Ha azt szeretné, hogy az összes webhely szöveges linkjei eltávolíthassák az aláhúzást, a stílusadatoknak az egyes hivatkozásokhoz való egyedi hozzáadásával ez azt jelenti, hogy a webhely kódjához meglehetősen sok extra jelölés szerepel. Az oldal felduzzadása lelassíthatja a webhely betöltési idejét, és sokkal nagyobb kihívást jelenthet az oldalkezelés számára. Ezen okok miatt előfordulhat, hogy mindig az összes oldalformázási igényhez külső stíluslapra fordul.

Zárva

A weboldal szöveges hivatkozásaitól könnyedén eltávolítani a hangsúlyt, ezért ügyelni kell a következményekre is. Bár valóban tisztíthatja meg az oldal megjelenését, ez az általános használhatóság rovására teheti. Vegye figyelembe ezt a következő alkalommal, amikor megfontolja az oldal "text-decoration" tulajdonságainak módosítását.

Jennifer Krynin eredeti cikke. Szerkesztette: 9/19/16 Jeremy Girard