Zomwe zili zofala pamasamba a pa intaneti, koma ambiri opanga ma webusaiti samadziwa mphamvu zomwe ali nazo ndi CSS kuti azigwiritsa ntchito bwino ndikuyendetsa maulendo awo. Mukhoza kufotokoza maulendo ndi maulendo oyendayenda, oyendayenda, ndi ogwira ntchito. Mukhozanso kugwira ntchito ndi malire ndi mizere kuti mupereke pizzaz anu kapena kuwapanga ngati mabatani kapena zithunzi.
Ambiri opanga ma webusaiti amayambira pofotokozera kalembedwe pa "a" tag:
Mtundu: wofiira; }}Izi zidzafotokozera mbali zonse za chiyanjano (hover, visited, and active). Kuti muyankhe gawo lirilonse padera, muyenera kugwiritsa ntchito magulu ang'onoang'ono ogwirizana.
Gwirizanitsani Masalimo Amagulu
Pali mitundu iwiri yofunikira ya magulu osayanjanitsirana omwe mungadziwe kuti:
- : kulumikiza - izi ndizosasinthika kalembedwe kogwirizanitsa
- : adayendera - mutatha kulumikizana
- : hover - ngati mbewa imayikidwa pamwamba pa kugwirizana (chisanadze)
- : yogwira - pomwe mgwirizano ukugwedezeka
Kuti mufotokoze chigwirizano chachinsinsi, mugwiritseni ntchito ndi chidindo chanu chosankha CSS . Kotero, kuti musinthe mtundu wotchulidwa wa maulumikizi anu onse kupita ku imvi, lembani:
a: anayendera {mtundu: wakuda; }}Ngati mumagwiritsa ntchito chigwirizano chimodzi, ndizo lingaliro loyenera kuzilemba zonsezo. Mwanjira imeneyo simudzadabwa ndi zotsatira zowonongeka. Kotero ngati mukufuna kungosintha mtundu wofiira, pomwe zina zonse zowonongeka zogwirizana zanu zikukhalabe zakuda, mukhoza kulemba:
a: link, a: hover, a: yogwira {mtundu: wakuda; } a: anachezera {mtundu: wakuda; }}Sinthani Mizere Yogwirizana
Njira yodziwika kwambiri ku maulendo ojambula ndi kusintha mtundu pamene mbewa ikugwera pamwamba pake:
{mtundu: # 00f; } a: hover {mtundu: # 0f0; }}Koma musaiwale kuti mukhoza kuthandizira momwe chiyanjano chikuwonekera pamene akukulimbirako ndi: malo ogwira ntchito:
{mtundu: # 00f; } a: yogwira {mtundu: # f00; }}Kapena momwe chiyanjano chikuyang'anirani inu mwachiyendera icho ndi: malo oyendera:
{mtundu: # 00f; } a: anachezera {mtundu: # f0f; }}Kuziika zonse pamodzi:
{mtundu: # 00f; } a: anachezera {mtundu: # f0f; } a: hover {mtundu: # 0f0; } a: yogwira {mtundu: # f00; }}Ikani Zotsatira pa Zida Zowonjezera Zizindikiro kapena Bullets
Mukhoza kuika maziko pachigwirizano monga momwe zilili muzithunzithunzi za Stylish Backgrounds, koma pakusewera ndi mbiri pang'ono, mukhoza kupanga chiyanjano chomwe chili ndi chithunzi chogwirizana. Sankhani chithunzi chomwe chiri chochepa, kuzungulira 15px ndi 15px, kupatula ngati lemba lanu liri lalikulu. Ikani maziko kumbali imodzi ya chiyanjano ndikubwezerani chinthu chosabwereza kuti musabwereze. Kenaka, padd chiyanjano kuti mawu mkati mwachitsulo ayendetsedwe kutali kwambiri kumanzere kapena kulondola chizindikiro.
{padding: 0 2px 1px 15px; maziko: #fff url (mpira.gif) osayima malo osabwereza; Mtundu: # c00; }}Mukakhala ndi chithunzi chanu, mukhoza kuyika fano losiyana ngati maulendo anu ogwira ntchito, ogwira ntchito, ndi oyendera kuti mutumikize kusintha:
{padding: 0 2px 1px 15px; maziko: #fff url (mpira.gif) osayima malo osabwereza; Mtundu: # c00; } a: hover {kumbuyo: #fff url (ball2.gif) kumanzere kumbuyo popanda-kubwereza; } a: chitsimikizo {kumbuyo: #fff url (ball3.gif) osayima malo osabwereza; }}Pangani Zida Zanu Ziwoneke Monga Mabatani
Mabatani amasangalatsidwa kwambiri, koma mpaka CSS ifika, mumayenera kupanga mabatani pogwiritsa ntchito zithunzi , zomwe zimapangitsa masamba anu kutenga nthawi yaitali kuti ayambe. Mwamwayi, pali mawonekedwe a malire omwe angakuthandizeni kupanga phokoso-ngati zotsatira mosavuta ndi CSS.
{malire: 4px kutuluka; padding: 2px; kukongoletsa malemba: palibe; } a: yogwira {malire: 4px inset; }}Tawonani, pamene mumayika mitundu pachiyambi ndi mafashoni oyambirira, osatsegula sangathe kuwathandiza monga momwe mungayang'anire. Kotero, apa pali batani la fancier ndi malire achikuda:
{malire a malire: olimba; Malire-malire: 1px 4px 4px 1px; kukongoletsa malemba: palibe; padding: 4px; Mtundu wa malire: # 69f # 00f # 00f # 69f; }}Ndipo mukhoza kuthandizira mafilimu omwe akugwiritsidwa ntchito pazithunzithunzi, ndikugwiritsaninso ntchitozi:
a: kugwirizana {mtsempha-malire: olimba; Malire-malire: 1px 4px 4px 1px; kukongoletsa malemba: palibe; padding: 4px; Mtundu wa malire: # 69f # 00f # 00f # 69f; } a: hover {malire-mtundu: #ccc; }}