Tumbu pisan umum dina kaca web, tapi loba web désainer ulah ngawujudkeun kakuatan anu dipibanda ku CSS pikeun ngamanipulasi jeung ngatur Tumbu maranéhanana éféktif. Anjeun tiasa nangtukeun Tumbu kalayan dilongok, hover, sarta nagara aktif. Anjeun oge bisa digawekeun ku wates jeung backgrounds méré Tumbu anjeun beuki pizzaz atawa nyieun éta kasampak kawas tombol atawa malah gambar.
Paling web désainer ngamimitian kaluar ku watesan gaya a dina "a" tag:
a {warna: beureum; }Ieu bakal gaya sagala aspek link (hover, dilongok, na aktif). Pikeun gaya masing-masing bagian kapisah, anjeun kudu make link pseudo-kelas.
Numbu pseudo-kelas
Aya opat tipe dasar tumbu pseudo-kelas anjeun bisa nangtukeun:
- : Link - ieu teh gaya standar pikeun link
- : Dilongok - sanggeus link geus diklik
- : Hover - sakumaha mouse hiji poised leuwih link (pre-klik)
- : Aktip - katuhu sakumaha link keur diklik
Pikeun nangtukeun tumbu pseudo-kelas, make eta kalawan tag di anjeun pamilihan CSS . Ku kituna, pikeun ngarobah warna dilongok sadaya Tumbu anjeun pikeun abu, nulis:
a: dilongok {warna: kulawu; }Lamun gaya salah link pseudo-kelas, éta mangrupakeun ide nu sae pikeun gaya kabeh. Cara nu moal kaget ku hasil extraneous. Ku kituna lamun ngan hayang ngarobah warna dilongok mun abu, bari sakabeh pseudo-sipat séjénna Tumbu anjeun tetep hideung, anjeun kukituna nulis:
a: link, a: hover, a: aktif {warna: hideung; } A: dilongok {warna: kulawu; }Ngarobah warna Patalina
Cara paling populér pikeun gaya Tumbu nyaéta pikeun ngarobah kelir nalika beurit hovers leuwih eta:
a {warna: # 00f; } A: hover {warna: # 0f0; }Tapi ulah poho yén anjeun bisa mangaruhan kumaha link Sigana sabab nu ngaklik dinya jeung: sipat aktif:
a {warna: # 00f; } A: aktif {warna: # f00; }Atawa kumaha link Sigana sanggeus anjeun geus dilongok deui jeung: sipat dilongok:
a {warna: # 00f; } A: dilongok {warna: # f0f; }Nempatkeun eta sadayana babarengan:
a {warna: # 00f; } A: dilongok {warna: # f0f; } A: hover {warna: # 0f0; } A: aktif {warna: # f00; }Nempatkeun backgrounds dina Tumbu ka Tambahkeun ikon atawa pélor
Anjeun tiasa nyimpen tukang dina kakait sakumaha dina artikel backgrounds stylish, tapi ku maén kalawan tukang saeutik, anjeun bisa nyieun tumbu nu boga ikon pakait. Milih hiji ikon nu leutik, sabudeureun 15px ku 15px, iwal téks anjeun leuwih gede. Teundeun tukang hiji sisi tina link tur nyetel pilihan ulang ka no-ulang. Lajeng, padd link supados téks dina link ieu dipindahkeun ngaliwatan tebih cukup ka kenca atawa ka katuhu pikeun nempo ikon.
a {padding: 0 2px 1px 15px; latar: #fff url (ball.gif) kénca puseur no-ulang; Warna: # c00; }Sakali anjeun saena ikon Anjeun, Anjeun tiasa nyetel hiji gambar béda saperti hover, aktif, sarta ikon Anjeun dilongok nyieun parobahan link:
a {padding: 0 2px 1px 15px; latar: #fff url (ball.gif) kénca puseur no-ulang; Warna: # c00; } A: hover {tukang: #fff url (ball2.gif) kénca puseur no-ulang; } A: aktif {tukang: #fff url (ball3.gif) kénca puseur no-ulang; }Jieun Tumbu anjeun Tingali Kawas Kancing
Tombol nu kawentar, tapi dugi CSS sumping sapanjang, anjeun kungsi nyieun tombol maké gambar , nu ngajadikeun Kaca Anjeun nyandak deui pikeun muka. Kabeneran, aya gaya wates nu bisa nulungan anjeun nyieun éfék tombol-kawas gampang jeung CSS.
a {wates: 4px outset; padding: 2px; téks-hiasan: taya; } A: aktif {wates: 4px inset; }Catetan, nalika anjeun tiasa nyimpen kelir dina outset na inset gaya, panyungsi henteu sakumaha gampang ngarobah éta anjeun bisa nyangka. Ku kituna, di dieu mangrupa tombol fancier kalawan wates warna:
a {wates-gaya: padet; Wates-lebar: 1px 4px 4px 1px; téks-hiasan: taya; padding: 4px; Wates-warna: # 69f # 00f # 00f # 69f; }Tur anjeun tiasa mangaruhan nu hover sarta gaya aktif tina tumbu tombol ogé, ngan nganggo eta pseudo-kelas:
a: link {wates-gaya: padet; Wates-lebar: 1px 4px 4px 1px; téks-hiasan: taya; padding: 4px; Wates-warna: # 69f # 00f # 00f # 69f; } A: hover {wates-warna: #ccc; }