Carane Ngganti Jalaran Dhasar ing kaca Web

Copot Link Underlines utawa Gawe Dashed Dotted, utawa Double Tautan Garis

Kanthi gawan, browser web nduweni gaya CSS tartamtu sing digunakne kanggo elemen HTML tartamtu. Yen sampeyan ora nimpa kesalahan kasebut karo lembar gaya situs sampeyan, banjur standar bakal ditrapake. Kanggo hyperlinks, gaya tampilan default yaiku manawa teks sing disambung bakal biru lan digaris ngisor. Browser iki nggawe pengunjung situs gampang nampilake teks apa sing disambung. Akeh perancang web ora ngurus gaya gawan iki, utamane sing nggaris. Alhamdulillah, CSS ndadekake gampang ngganti tampilan sing nggarisake utawa mbusak kabeh.

Mbusak Underline ing Tautan Teks

Teks ing ngisor iki bisa luwih tantangan kanggo maca teks sing ora digatekake. Kajaba iku, akeh desainer ora seneng nggoleki pranala teks digorote. Ing kasus iki, sampeyan bakal pengin mbusak garis-garis ngisor iki kabeh.

Kanggo mbusak garis ngisor saka pranala teks, sampeyan bakal nggunakake teks-hiasan teks CSS. Punika CSS sampeyan bakal nulis kanggo nindakake iki:

a {text-decoration: none; }

Kanthi garis siji saka CSS, sampeyan bakal mbusak garis garis saka kabeh pranala teks. Sanajan iki gaya banget umum (nggunakake pemilih elemen), isih nduweni kekhasan luwih spesifik tinimbang gaya browser standar. Amarga gaya-gaya gawan sing nggawe garis ngisor kasebut diwiwiti, yaiku apa sing kudu ditindhes.

A Caution on Removing Underlines

Secara visual, penghapusan garis ngisor bisa dadi persis apa sing pengin dilakoni, nanging sampeyan kudu ati-ati nalika nindakake iki uga. Apa sampeyan seneng katon pranala sing digandhengake utawa ora, sampeyan ora bisa argue sing padha nggawe cetha minangka teks sing disambung lan sing ora. Yen sampeyan njupuk garis werna utawa ngganti warna link biru sing standar, sampeyan kudu nggawe manawa sampeyan ngganti karo gaya sing isih ngidini teks sing disambung. Iki bakal nggawe pengalaman sing luwih intuisi kanggo pengunjung situs sampeyan.

Aja Nindakake Non-Tautan

Pratingkah liyane ing pranala lan garis bawah, ora nggaris teks sing ora ana link minangka cara nandheske. Wong wis nyinaoni teks sing digandhengake dadi tautan, dadi yen sampeyan nggarisake isi supaya bisa nambah penekanan (tinimbang nggawe kandel utawa ngetrapake), sampeyan ngirim pesen sing salah lan bakal nganggu pengguna situs.

Ngganti garis kanggo Dots utawa Dashes

Yen sampeyan pengin tetep nggandhengake pranala teks, nanging ngganti gaya sing digandhengake saka tampilan standar, yaiku "baris", sampeyan uga bisa nindakake iki. Tinimbang garis sing ngalangi, sampeyan bisa nggunakake titik kanggo nggaris bawah pranala. Kanggo nindakake iki, sampeyan isih bakal mbusak garis ngisor, nanging sampeyan bakal ngganti karo properti gaya ngisor-watesan:

a {text-decoration: none; border-bottom: 1px dotted; }

Awit sampeyan wis ngilangi garis standar, siji-sijine titik siji sing katon.

Sampeyan bisa nindakake perkara sing padha supaya bisa dicithak. Cukup ngganti gaya ngisor-watesan kanggo mlayu:

a {text-decoration: none; border-bottom: 1px dashed; }

Ngganti werna Garis Bening

Cara liya kanggo nggambarake hubungan sampeyan yaiku ngganti warna garis bawah. Priksa manawa werna cocok karo skema werna sampeyan.

a {text-decoration: none; border-bottom: 1px solid red; }

Gandhewa kaping pindho

Cidra kanggo nggunakake garis ngisor kaping pindho yaiku sampeyan kudu ngowahi jembaré wates. Yen sampeyan nggawe border sudhut 1px, sampeyan bakal ngalami garis ganda sing katon kaya garis bawah.

a {text-decoration: none; border-bottom: 3px double; }

Sampeyan uga bisa nggunakake garis bawah sing ana kanggo nggawe gandaan kaping pindho karo fitur-fitur liyane, kayata salah sawijining garis sing kapacak:

a {border-bottom: 1px double; }

Aja lali Link States

Sampeyan bisa nambah gaya wates-ngisor menyang pranala ing negara sing beda kayata: hover,: aktif, utawa: dibukak. Iki bisa nggawe pengalaman "rollover" apik kanggo pengunjung yen sampeyan nggunakake pseudo class "hover". Kanggo nggawe garis ngisor garis angka kapindho katon nalika sampeyan nglayang liwat pranala:

a {text-decoration: none; } sing: hover {border-bottom: 1px dotted; }

Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard