Pranala kasebut arang banget umum ing kaca web, nanging akeh perancang web ora nyatakake kekuwatan sing padha karo CSS kanggo ngolah lan ngatur pranala sing efektif. Sampeyan bisa nemtokake pranala karo dibukak, nyatakake, lan negara aktif. Sampeyan uga bisa nggarap wates lan latar kanggo menehi pranala luwih akeh pizzaz utawa nggawe dheweke katon kaya tombol utawa malah gambar.
Paling désainer web wiwit kanthi ngganti gaya ing "a" tag:
a {color: red; }Iki bakal nggandhengake kabeh aspek pranala (kisaran, dibukak, lan aktif). Kanggo nata saben bagean kanthi kapisah, sampeyan kudu nggunakake pranala pseudo-kelas.
Link Pseudo-Classes
Ana papat jinis dhasar pranala pseudo-kelas sing sampeyan bisa nemtokake:
- : pranala - iki gaya default kanggo tautan
- : dibukak - sawise link wis diklik
- : kisaran - minangka mouse wis siap liwat link (pra-klik)
- : aktif - tengen minangka link lagi diklik
Kanggo netepake pseudo-class link, gunakake kanthi tag ing pemilih CSS sampeyan. Dadi, kanggo ngganti werna sing dilapurake kabeh pranala menyang werna abu-abu, tulis:
a: dibukak {color: gray; }Yen gaya siji pranala pseudo-kelas, iku apik kanggo gaya kabeh. Mangkono sampeyan ora bakal kaget karo asil luar. Dadi yen sampeyan mung pengin ngowahi werna sing dibukak dadi werna abu-abu, dene kabeh pseudo-sifat tautan manawa sampeyan tetep ireng, sampeyan bakal nulis:
a: pranala, sing: hover, a: active {color: black; } sing: dibukak {color: grey; }Ngganti Warna Link
Cara sing paling populer kanggo nancepake gaya yaiku ngganti warna nalika mouse kasebut liwat:
a {color: # 00f; } a: hover {color: # 0f0; }Nanging aja lali yen sampeyan bisa mangaruhi cara tautan katon nalika lagi ngeklik kanthi: aktif properti:
a {color: # 00f; } sing: aktif {color: # f00; }Utawa carane pranala katon sawise sampeyan wis dibukak karo: dibukak properti:
a {color: # 00f; } sing: dibukak {color: # f0f; }Kanggo nyelehake kabeh:
a {color: # 00f; } sing: dibukak {color: # f0f; } a: hover {color: # 0f0; } sing: aktif {color: # f00; }Sijine Backgrounds ing Link kanggo Tambah Icons utawa Bullets
Sampeyan bisa nempatake latar mburi ing link kaya ing artikel Backgrounds Bergaya, nanging kanthi muter karo latar mburi sethithik, sampeyan bisa nggawe link sing nduweni lambang sing gegandhengan. Pilih lambang sing cilik, watara 15px kanthi 15px, kajaba teks luwih gedhe. Selehake latar mburi menyang salah siji sisih link lan aturake opsi baleni kanggo ora-ulang. Banjur, padd link supaya teks ing pranala wis dipindhah liwat cukup kiwa utawa tengen kanggo ndeleng lambang.
a {padding: 0 2px 1px 15px; latar mburi: #fff url (ball.gif) left center no-repeat; werna: # c00; }Sawise sampeyan wis entuk lambang, sampeyan bisa nyetel gambar sing beda minangka lambang hover, aktif, lan sing dibukak kanggo ngganti link:
a {padding: 0 2px 1px 15px; latar mburi: #fff url (ball.gif) left center no-repeat; werna: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: aktif {latar mburi: #fff url (ball3.gif) left center no-repeat; }Nggawe Link Sampeyan Mirsani Kaya Tombol
Tombol banget populer, nanging nganti CSS teka, sampeyan kudu nggawe tombol nggunakake gambar , sing nggawe kaca luwih suwe kanggo diunggah. Untunge, ana gaya tapel wates sing bisa mbantu sampeyan nggawe efek tombol kaya gampang nganggo CSS.
a {border: 4px outset; padding: 2px; teks-dekorasi: ora ana; } sing: aktif {border: 4px inset; }Wigati, yen sampeyan nyetel werna ing gaya outset lan inset, browser ora kaya nerjemahake minangka sing bisa ditindakake. Dadi, ing kene ana tombol sing ngebor karo wates warna:
a {border-style: solid; border-width: 1px 4px 4px 1px; teks-dekorasi: ora ana; padding: 4px; werna watesan: # 69f # 00f # 00f # 69f; }Lan sampeyan uga bisa mangaruhi gaya hover lan aktif link tombol, mung nggunakake kelas-kelas pseudo:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; teks-dekorasi: ora ana; padding: 4px; werna watesan: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }