Awọn ìsopọ jẹ wopo pupọ lori oju-iwe ayelujara, ṣugbọn ọpọlọpọ awọn apẹẹrẹ oju-iwe ayelujara ko mọ agbara ti wọn ni pẹlu CSS lati ṣe amojuto ati lati ṣakoso awọn ìjápọ wọn daradara. O le ṣalaye awọn ìjápọ pẹlu ṣàbẹwò, hover, ati awọn ipinle ti nṣiṣe lọwọ. O tun le ṣiṣẹ pẹlu awọn aala ati awọn lẹhin lati fun awọn asopọ rẹ diẹ sii pizzaz tabi ṣe wọn dabi awọn bọtini tabi paapa awọn aworan.
Ọpọlọpọ awọn ẹniti nṣe apẹẹrẹ oju-iwe wẹẹbu bẹrẹ jade nipa asọye ara kan lori aami tag "a":
a {awọ: pupa; }Eyi yoo ṣe ara gbogbo aaye ti asopọ (hover, visited, ati lọwọ). Lati ṣe ara kọọkan apakan lọtọ, o gbọdọ lo awọn ọna-isopọ-ọna asopọ asopọ.
Awọn Alailẹgbẹ-Awọn Alailẹgbẹ Ọna asopọ
Orisirisi awọn ipilẹ ti o ni ipilẹ-ọna-ọna asopọ ti o le ṣokasi:
- : ọna asopọ - eyi ni aiyipada ara fun ọna asopọ
- : ṣàbẹwò - lẹhin ti a ti tẹ ọna asopọ kan
- : hover - bi iṣọ ti wa lori ọna asopọ kan (titẹ-ami-tẹ)
- : ṣiṣẹ - ọtun bi a ti tẹ ọna asopọ
Lati ṣe ipinnu ọna asopọ ti o ni asopọ, lo o pẹlu tag kan ninu ayanfẹ CSS rẹ . Nitorina, lati yi awọ ti a ti ṣayẹwo ti gbogbo awọn asopọ rẹ si awọ-awọ, kọ:
a: ṣàbẹwò {awọ: grẹy; }Ti o ba ṣe ara-ẹni-ọna asopọ kan, o jẹ ero ti o dara lati ṣe gbogbo wọn. Iyẹn ọna o ko ni le yà nipasẹ awọn esi ti o ṣe afikun. Nitorina ti o ba fẹ lati yi awọ ti a ti ṣawari si grẹy, lakoko ti gbogbo awọn ohun elo miiran ti awọn ìjápọ rẹ jẹ dudu, iwọ yoo kọ:
a: asopọ, a: hover, a: lọwọ {awọ: dudu; } a: ṣàbẹwò {awọ: grẹy; }Yi awọn Awọpọ Ọna pada
Ọna ti o gbajumo julọ si awọn asopọ ara ni lati yi awọ pada nigbati asin naa ba kọja lori rẹ:
a {awọ: # 00f; } a: hover {awọ: # 0f0; }Ṣugbọn maṣe gbagbe pe o le ni ipa bi ọna asopọ naa ṣe n wo bi wọn ṣe n tẹ lori rẹ pẹlu: ohun-ini inifia:
a {awọ: # 00f; } a: lọwọ {awọ: # f00; }Tabi bi ọna asopọ ṣe oju lẹhin ti o ti ṣawari rẹ pẹlu awọn: ohun ini ti a ṣe lọ:
a {awọ: # 00f; } a: ṣàbẹwò {awọ: # f0f; }Lati fi gbogbo rẹ papọ:
a {awọ: # 00f; } a: ṣàbẹwò {awọ: # f0f; } a: hover {awọ: # 0f0; } a: lọwọ {awọ: # f00; }Fi Ibẹrẹ si Awọn Isopọ lati Fi Awọn aami kun tabi Awọn ọta
O le fi abẹlẹ kan lori ọna asopọ kan gẹgẹbi ni akọsilẹ Ikọlẹ Atilẹyin, ṣugbọn nipa sisẹ pẹlu isale kekere, o le ṣẹda asopọ kan ti o ni aami ti o ni nkan. Yan aami ti o kere, ni ayika 15px nipasẹ 15px, ayafi ti ọrọ rẹ ba tobi. Gbe ẹhin si ẹgbẹ kan ti ọna asopọ naa ki o si ṣeto aṣayan atunṣe lati ṣe atunṣe. Lẹhinna, fifọ ọna asopọ naa ki ọrọ ti o wa ninu ọna asopọ naa ti gbe lori iwọn to gaju si apa osi tabi sọtun lati wo aami naa.
a [padding: 0 2px 1px 15px; lẹhin: #fff url (ball.gif) ile-aarin ti a ko tun ṣe; awọ: # c00; }Lọgan ti o ba ti ni aami rẹ, o le ṣeto aworan ti o yatọ bi irunju rẹ, lọwọ, ati awọn aami awoye lati ṣe iyipada asopọ:
a [padding: 0 2px 1px 15px; lẹhin: #fff url (ball.gif) ile-aarin ti a ko tun ṣe; awọ: # c00; } a: hover {isale: #fff url (ball2.gif) ile-aarin osi ko tunṣe; } a: lọwọ [isale: #fff url (ball3.gif) ile-aarin osi ko tunṣe; }Ṣe Awọn Ìjápọ Rẹ Ṣii Bi Awọn bọtini
Awọn bọtini jẹ gidigidi gbajumo, ṣugbọn titi CSS fi wa, o ni lati ṣẹda awọn bọtini nipa lilo awọn aworan , eyi ti o mu ki awọn oju-ewe rẹ gun diẹ sii. Ni Oriire, o wa ọna ti o wa ni agbegbe ti o le ṣe iranlọwọ fun ọ lati ṣẹda bọtini bọtini kan ni rọọrun pẹlu CSS.
a [aala: 4px outset; padding: 2px; ohun-ọṣọ: kò; } a: lọwọ {aala: 4px inset; }Akiyesi, nigba ti o ba fi awọn awọ kun si apẹrẹ ati awọn ọna kika, awọn aṣàwákiri ko ṣeese lati ṣe wọn gẹgẹ bi o ti le reti. Nitorina, nibi bọọlu fancier pẹlu awọn aala awọ:
a [ti aala-ala-ilẹ: ti o lagbara; iha-aala-laini: 1px 4px 4px 1px; ohun-ọṣọ: kò; padding: 4px; awọ-aala-eti: # 69f # 00f # 00f # 69f; }Ati pe o le ni ipa lori awọn ọna kika ti nṣiṣeba ati awọn iṣiṣe ti ọna asopọ bakannaa, lo awọn kilasi-nikan:
a: ọna asopọ {ti aala-ala-ilẹ: ti o lagbara; iha-aala-laini: 1px 4px 4px 1px; ohun-ọṣọ: kò; padding: 4px; awọ-aala-eti: # 69f # 00f # 00f # 69f; } a: hover {awọ-aala: #ccc; }