A HTML-link aláhúzásainak módosítása egy weboldalon

Ez a cikk elmagyarázza, hogyan használhatja a CSS-t a webes szöveges hivatkozások alapértelmezett megjelenésének megváltoztatásához az aláhúzás eltávolításával, pontozott vonallá változtatásával vagy a színének megváltoztatásával. További információk találhatók az aláhúzás szaggatott vonallá vagy kettős aláhúzássá változtatásához.

Hogyan lehet eltávolítani az aláhúzást a szöveges linkeken

Alapértelmezés szerint a webböngészők bizonyosak CSS stílusok hogy meghatározott HTML elemekre vonatkoznak. Ha nem írja felül ezeket az alapértelmezéseket webhelye saját stíluslapjaival, akkor az alapértelmezettek érvényesek. Mert

hiperhivatkozások, az alapértelmezett megjelenítési stílus az, hogy a linkelt szöveg kék és aláhúzott legyen. Ha szeretné, megváltoztathatja az aláhúzások megjelenését, vagy teljesen eltávolíthatja őket a weboldaláról.

Az aláhúzások eltávolításához a szöveges hivatkozásokból használja a CSS tulajdonság szövegdekorációját. Itt van a CSS, amelyet erre írsz:

a {szövegdekoráció: nincs; }

A CSS egyetlen sorával eltávolítja az aláhúzást a weboldal összes szöveges hivatkozásából. Annak ellenére, hogy ez egy nagyon általános stílus (elemválasztót használ), mégis specifikusabb, mint az alapértelmezett böngészőstílusok. Mivel ezek az alapértelmezett stílusok alkotják az aláhúzásokat a kezdetekhez, ezt kell felülírnia.

Vigyázat az aláhúzások eltávolításával kapcsolatban

Vizuálisan az aláhúzások eltávolítása lehet pontosan az, amit el akarsz érni, de óvatosnak kell lenned, amikor ezt is teszed. Akár tetszik az aláhúzott linkek megjelenése, akár nem, nem állíthatja, hogy azok nyilvánvalóvá teszik, hogy melyik szöveg van összekapcsolva és melyik nem. Ha elhúzza az aláhúzásokat vagy megváltoztatja az alapértelmezett kék link színét, akkor feltétlenül cserélje azokat olyan stílusokra, amelyek továbbra is lehetővé teszik a linkelt szöveg kiemelkedését. Ez intuitívabb élményt nyújt webhelye látogatóinak.

Ne húzza alá a nem linkeket

A linkekre és az aláhúzásokra vonatkozó másik óvatosság: ne hangsúlyozza a szöveget, amely nem link. Az emberek elvárták, hogy az aláhúzott szöveg link legyen, tehát ha aláhúzza a tartalmat a hozzáadás érdekében hangsúly (ahelyett, hogy félkövérre vagy dőltre tenné), rossz üzenetet küld, és összezavarja a webhelyet felhasználók.

Az aláhúzás pontokra vagy kötőjelekre váltása

Ha a szöveges linket aláhúzással kívánja megtartani, de az aláhúzás stílusát megváltoztatja az alapértelmezett megjelenéstől, amely "szilárd" vonal, akkor ezt is megteheti. A folytonos vonal helyett pontokat használhat a linkek aláhúzására. Ehhez továbbra is eltávolítja az aláhúzást, de lecseréli a border-bottom stílus tulajdonságra:

a {szövegdekoráció: nincs; alsó-alsó: 1 képpontos pontozott; }

Mivel eltávolította a szokásos aláhúzást, csak a pontozott jelenik meg.

Ugyanezt teheti a gondolatjelek megszerzéséért. Csak módosítsa a szegély alsó stílusát szaggatottra:

a {szövegdekoráció: nincs; alsó-alsó: 1px szaggatott; }

Az aláhúzás színének megváltoztatása

A linkekre való figyelem felhívásának másik módja az aláhúzás színének megváltoztatása. Csak győződjön meg róla, hogy a szín illik az Önéhez színösszeállítás.

a {szövegdekoráció: nincs; alsó-alsó: 1px egyszínű piros; }

Kettős aláhúzás

A dupla aláhúzások trükkje az, hogy meg kell változtatnia a szegély szélességét. Ha 1 képpontos szélességet hoz létre, akkor egy dupla aláhúzás jelenik meg, amely egyetlen aláhúzásnak tűnik.

a {szövegdekoráció: nincs; alsó-alsó: 3px dupla; }

A meglévő aláhúzással dupla aláhúzást is készíthet más funkciókkal, például az egyik pontozott ponttal:

a {border-bottom: 1px double; }

Ne felejtsd el a linkállapotokat

Különböző állapotokban hozzáadhatja a szegély alsó stílust a linkjeihez, például: lebegés,: aktív vagy: meglátogatott. Ez kellemes "rollover" stílusú élményt teremthet a látogatók számára, amikor ezt a "lebeg" ál-osztályt használja. Második pontozott aláhúzás megjelenítéséhez, amikor a link fölé viszi az egeret:

a {szövegdekoráció: nincs; }
a: lebeg {határ-alsó: 1px pontozott; }