Kako promijeniti vezu podvlači na web stranici

Uklonite Link podvlače ili kreirajte prekidane ili dvostruke podvučene veze

Podrazumevano, web pretraživači imaju određene CSS stilove koje primjenjuju na specifične HTML elemente. Ako ne prepisujete ove podrazumevane listove sopstvenog stila vašeg sajta, onda će se primeniti podrazumevana vrednost. Za hiperveze, podrazumevani stil prikaza je da će svaki povezani tekst biti plavi i podvučen. Browser to radi tako da posetioci sajta mogu lako da vide koji je tekst povezan. Mnogi web dizajneri ne brinu o ovim podrazumevanim stilovima, naročito onima koji su naglašeni. Srećom, CSS olakšava promjenu izgleda onih koji su naglašeni ili potpuno uklonjeni.

Uklanjanje Underline na tekstualne veze

Podvučeni tekst može biti izazovniji da pročita taj ne-podvučeni tekst. Pored toga, mnogi dizajneri jednostavno ne brinu za izgled podvučenih tekstualnih veza. U ovim slučajevima, verovatno ćete želeti da uklonite ove podvuče u potpunosti.

Da biste uklonili podvučene tekstualne veze, koristićete tekstualnu dekoraciju CSS objekta. Evo CSS-a koje biste napisali da biste to uradili:

{tekst-dekoracija: nema; }

Sa toj jednoj liniji CSS-a, uklonili biste podlogu iz svih tekstualnih veza. Iako je ovo uobičajeni stil (koristi se selektor za elemente), on i dalje ima više specifičnosti nego što to podrazumevaju stilovi pretraživača. Pošto su ti podrazumevani stilovi ono što stvara podvlačke za početak, to je ono što morate prepisati.

Oprez na uklanjanju podvučenih

Vizuelno, uklanjanje podvučnika može biti upravo ono što želite da postignete, ali morate biti oprezni kada to učinite. Bilo da vam se dopada izgled podvučenih veza ili ne, ne možete tvrditi da oni jasno vide koji je tekst povezan, a što nije. Ako odnesete naglasite ili promenite tu podrazumevanu boju plave linije, trebalo bi da budete sigurni da ćete ih zameniti stilovima koji još uvek dozvoljavaju povezani tekst. Ovo će učiniti više intuitivno iskustvo za posetioce vaše stranice.

Ne podvlačite ne-veze

Još jedan oprez na linkovima i podvlači, ne naglašavajući tekst koji nije veza kao način naglašavanja. Ljudi su došli da očekuju podvučeni tekst kao link, pa ako naglasite sadržaj kako biste dodali naglasak (umesto da ga krepite ili kurzivate), pošaljete pogrešnu poruku i zbunite korisnike sajta.

Promijenite Underline na tačke ili crtice

Ako želite da zadržite vašu tekstualnu vezu, podvučite, ali promenite stil tog podvlačenja iz podrazumevanog izgleda, što je "soldi" linija, možete to učiniti. Umjesto te čvrste linije, možete koristiti tačke da istaknete svoje veze. Da biste to uradili, i dalje ćete ukloniti podvlačenje, ali ćete ga zamijeniti svojom osobinom:

{tekst-dekoracija: nema; border-bottom: 1px tačkasto; }

Pošto ste uklonili standardni naglasak, tačkasta boja je jedina koja se pojavljuje.

Možete učiniti isto što i dirke. Samo promenite stil dna granice na pukotinu:

{tekst-dekoracija: nema; granično-donje: 1px puknuto; }

Promenite podvlačenu boju

Drugi način da skrenete pažnju na vaše veze je da promenite boju podvučenog. Samo se uverite da boja odgovara vašoj šemi boje .

{tekst-dekoracija: nema; border-bottom: 1px solid red; }

Double Underlines

Trik za korištenje dvostrukih naglasaka je da morate promeniti širinu granice. Ako kreirate širu granicu od 1px, završićete sa dvostrukim podvlačenjem koja izgleda kao jedan podcrtani znak.

{tekst-dekoracija: nema; granična dužina: 3px dvostruka; }

Takođe možete koristiti postojeći podvlačiti da napravite dvostruku podvigu sa drugim funkcijama, kao što je jedna od linija koja se tačkasta:

{border-bottom: 1px double; }

Ne zaboravite Linkove države

Stilove graničnog dna možete dodati svojim vezama u različitim državama kao što su: lebdeći, aktivni ili: posećeni. To može stvoriti lijepo iskustvo stilu "rollover" za posetioce kada koristite tu "lebdeću" pseudo klase. Da biste napravili drugi tačkani podvlačak, pojavljuju se kada kružite preko veze:

{tekst-dekoracija: nema; } a: hover {border-bottom: 1px tačkasto; }

Originalni članak Jennifer Krynin. Uredio Jeremy Girard