He mea maʻalahi nā loulou ma nā pūnaewele pūnaewele, akā,ʻaʻole iʻike nui nā mea hoʻolālā pūnaewele i ka mana i loaʻa iā lākou me CSS no ka lawelawe a mālama pono i ko lākou mau loulou. Hiki iāʻoe ke hoʻohālikelike i nā loulou me nā kipa iʻikeʻia, a me nāʻanoʻoihana. Hiki iāʻoe ke hana pū me nā palena a me nā hiʻona e hāʻawi i kāu loulou hou i ka pizzaz a iʻole e hoʻohālike iā lākou i nā pihi a iʻole nā kiʻi.
Hoʻomaka ka nui o nā mea hoʻolalewele pūnaewele ma ka weheweheʻana i kahiʻano ma ka "a" tag:
'a [kala:ʻulaʻula; }Mālama kēia i nāʻaoʻao a pau o ka loulou (hover, visit, and active). No ke kāhiliʻana i kēlā me kēiaʻaoʻao ma kahi kaʻawale, ponoʻoe e hoʻohana i nā pūnaewele pūnaewele.
Nā papa inoa pūnaewele
ʻEhāʻano pilina o nā pūnaewele pūnaewele āu e hiki ke wehewehe:
- : link -ʻo kēia keʻano o ka loli no ka loulou
- : i kipa - ma hope o ka hulinaʻana o kahi loulou
- : hove - e like me ka mouse e kauʻia ma luna o kahi loulou (pre-click)
- : ka hana - pono ke pāloliʻia ka loulou
No ka ho'ākāka i kahi papa inoa pūnaewele, e hoʻohana iā ia me ka tag ma kāu koho CSS . No laila, e hoʻololi i ke kala iʻikeʻia o nā loulou a pau i ka hina, e kākau:
a: i kipaʻia [ka pena: hina; }Inā makemakeʻoe i hoʻokahi pūnaewele psehana hoʻokahi, he mea maikaʻi e kāpae iā lākou a pau. Ma kēlāʻanoʻaʻoleʻoe e kahaha no nā hualoaʻa keu. No laila inā makemakeʻoe e hoʻololi i ke kala iʻikeʻia i ka hina, aʻo nā mea'ē aʻe a pau o kāu mau loulou eʻeleʻele, e kākauʻoe:
a: leʻaleʻa, a: hover, a: active {color: black; } a: i kipaʻia {ka pena: hina; }E hoʻololi i nā Lulu Hui
ʻO ke ala kaulana loa i nā loulou piliʻana,ʻo ia ke hoʻololi i ke kala i ka wā e hoʻokuʻu ai kaʻiole i luna:
a [color: # 00f; } a: hover {kala: # 0f0; }Akā, mai poina e hiki iāʻoe ke hoʻololi i ka nānāʻana o ka loulou e like me ke kaomiʻana iā ia me ka: mea waiwai:
a [color: # 00f; } a: ka hana {ka liʻiliʻi: # f00; }A iʻole pehea e nānā aku ai ka loulou ma hope o ke kipaʻana iā ia me ka: kahi iʻikeʻia:
a [color: # 00f; } a: i kipaʻia [ka pena: # f0f; }Hoʻohui pūʻia:
a [color: # 00f; } a: i kipaʻia [ka pena: # f0f; } a: hover {kala: # 0f0; } a: ka hana {ka liʻiliʻi: # f00; }E hoʻokuʻu i nāʻikepili i nā loulou i ka hāʻawiʻana i nāʻImi a i nā Bullets
Hiki iāʻoe ke kau i kahiʻaoʻao ma luna o kahi loulou e like me ka mea Paʻahi Palekana, akā ma ka pāʻaniʻana me ke kumu i kahi liʻiliʻi, hiki iāʻoe ke hana i kahi loulou i loaʻa ka icon e pili ana. E koho i kahi hiʻona i liʻiliʻi, ma kahi o 15px ma 15px, keʻole ka nui o kāu kikokikona. E kau i kahiʻaoʻao ma kekahiʻaoʻao o ka loulou a hoʻonoho i ka koho hou no ka hana hou. A laila, e hoe i ka loulou i mea e neʻe ai ka kikokikona ma loko o ka loulou i kahi lōʻihi a hiki i ka hema a me ka'ākau no kaʻikeʻana i ka'ōleʻa.
he pāʻalu: 0 2px 1px 15px; ke kumu: #fff url (ball.gif) ka hale hema iʻole e hana hou; ʻili: # c00; }Loaʻa iāʻoe kāu'alemo, hiki iāʻoe ke hoʻonoho i kekahi kiʻi'ē aʻe e like me kāu mau hover, māmā, a me nā kipa mākaʻi e hoʻololi i ka loulou:
he pāʻalu: 0 2px 1px 15px; ke kumu: #fff url (ball.gif) ka hale hema iʻole e hana hou; ʻili: # c00; } a: hover [moʻolelo: #fff url (ball2.gif) kahi hema iʻole e hana hou; } a: ka hana [ʻaoʻao: #fff url (ball3.gif) kahi hema iʻole e hana hou; }E hana i kāu mau loulou i ka pūnaewele
He kaulana loa nā pākena, akā hiki i ka hikiʻana mai o ka CSS, ponoʻoe e hana i nā pihi ma ka hoʻohanaʻana i nā kiʻi , kahi e hoʻolāʻihi ai kou mauʻaoʻao i ka loiloi. Ma kaʻoluʻolu, aia kahi kālai'āina e hiki ke kōkua iāʻoe e hana i kahi hopena pāʻoihana me ka CSS.
he palena palena 4px; Pāʻani: 2px; nā mea hoʻonaninani:ʻaʻohe; } a: ka hana [palena: 4px waihona; }E hoʻomaopopo, i ka manawa e kau aiʻoe i nā lelo ma keʻano hoʻomaka a me nā kāhua o ke kai,ʻaʻole hiki i nā mea nānā ke hāʻawi aku iā lākou e like me kāu e manaʻo ai. No laila, eia ke kī pāpalekai me nā palena kala:
ʻO kahi kaiālike: paʻa; palena whānui: 1px 4px 4px 1px; nā mea hoʻonaninani:ʻaʻohe; pale: 4px; ka palena palena: # 69f # 00f # 00f # 69f; }A e hiki iāʻoe ke hoʻololi i ka hulu a me nāʻano hana o ke pūnaewele pāʻoihana, e hoʻohana wale i kēlā mau pseudo-papa:
a: leʻaleʻa: keʻano o ka palena-āpau; palena whānui: 1px 4px 4px 1px; nā mea hoʻonaninani:ʻaʻohe; pale: 4px; ka palena palena: # 69f # 00f # 00f # 69f; } a: hover color-border: #ccc; }