Како променити подвлачење ХТМЛ везе на веб страници

Овај чланак објашњава неколико начина на које можете да користите ЦСС за промену подразумеваног изгледа текстуалних веза на вашој веб страници уклањањем подвлаке, променом у тачкасту линију или променом боје. Додатне информације су укључене за промену подвлачења у испрекидану линију или двоструко подвлачење.

Како уклонити подвученост са текстуалних веза

Подразумевано, веб прегледачи имају одређене ЦСС стилови да се примењују на одређене ХТМЛ елементе. Ако ове подразумеване вредности не препишете властитим табелама стилова на својој веб локацији, тада се подразумеване вредности примењују. За хипервезе, подразумевани стил приказа је да је сваки повезани текст плаве боје и подвучен. Ако желите, можете да промените изглед тих подвлачења или да их у потпуности уклоните са своје веб странице.

Да бисте уклонили подвлаке из текстуалних веза, користите ЦСС својство декорације текста. Ево ЦСС-а који сте написали да бисте то урадили:

а {декорација текста: ниједна; }

Помоћу тог једног реда ЦСС-а уклањате подвлачење са свих текстуалних веза на вашој веб страници. Иако је ово врло општи стил (користи селектор елемената), и даље има више специфичности него што то имају задати стилови прегледача. Будући да су ти задани стилови оно што за почетак ствара подвлаке, то је оно што треба да препишете.

Опрез при уклањању подвлачења

Визуелно уклањање подвучених црта може бити управо оно што желите да постигнете, али и ви треба да будете опрезни када то радите. Без обзира да ли вам се свиђа изглед подвучених веза или не, не можете тврдити да оне чине очигледним који је текст повезан, а који не. Ако уклоните подвлаке или промените подразумевану плаву боју везе, замените их стиловима који и даље омогућавају да се истакнути повезани текст. Ово ће посетиоцима ваше веб локације омогућити интуитивније искуство.

Не подвлачите не-везе

Још један опрез на везама и подвлачењима, немојте подвлачити текст који није веза као начин да га нагласите. Људи су очекивали да ће подвучени текст бити веза, па ако подвучете садржај да бисте додали наглашавајући (уместо да га подебљате или ставите у курзив), послаћете погрешну поруку и збунићете веб локацију корисника.

Како да подвучете тачку или цртицу

Ако желите да текстуална веза остане подвучена, али промените стил те подвлаке из подразумеваног изгледа, који је „пуна“ линија, можете и ово. Уместо те пуне линије, можете да користите тачке да бисте подвукли своје везе. Да бисте то урадили, и даље ћете уклањати подвлаку, али ћете је заменити особином стила бордер-боттом:

а {декорација текста: ниједна; ивица-дно: 1пк тачкасто; }

Пошто сте уклонили стандардно подвлачење, једина се појављује тачкаста.

Можете исто да урадите и да бисте добили цртице. Само промените стил дна обруба на испрекидан:

а {декорација текста: ниједна; бордер-боттом: испрекидана 1пк; }

Како променити боју подвлачења

Још један начин да скренете пажњу на своје везе је промена боје подвлачења. Само се уверите да боја одговара вашој шема боја.

а {декорација текста: ниједна; ивица-дно: 1пк пуна црвена; }

Доубле Ундерлинес

Трик у коришћењу двоструког подвлачења је у томе што морате променити ширину обруба. Ако направите обод ширине 1 пиксела, на крају ћете добити двоструко подвлачење које изгледа као једно подвлачење.

а {декорација текста: ниједна; ивица-дно: 3пк двоструко; }

Такође можете да користите постојеће подвлачење да бисте направили двоструко подвлачење са другим карактеристикама, као што је једна од линија које су тачкасте:

а {бордер-боттом: 1пк дупло; }

Не заборавите на везе

Својој линији можете додати стил обруба у различитим државама, као што су: лебдење,: активно или: посећено. Ово може створити лепо искуство „превртања“ у стилу посетиоцима када користите ту псеудо-класу „лебдења“. Да бисте приказали другу тачкасту подвлаку када задржите показивач изнад везе:

а {декорација текста: ниједна; }
а: ховер {бордер-боттом: тачка 1пк; }