Ny rohy dia mahazatra ao amin'ny pejin'ny tranonkala, saingy maro amin'ireo mpamorona tranonkala no tsy mahatsapa ny hery izay ananany amin'ny CSS mba hanamora sy handrindra ny rohy aminy. Azonao atao ny mamaritra ny rohy amin'ny fitsidihana, ny hover, ary ny mavitrika. Azonao atao ihany koa ny miara-miasa amin'ny sisintany sy ny fiaviana mba hanomezana rohy anao kokoa pizzaz na mampiseho azy ireo toy ny bokotra na sary mihitsy aza.
Ny mpamorona tranonkala dia manomboka amin'ny famaritana fomba iray amin'ny marika "a":
a {loko: mena; }Izany dia hanamboatra ny lafiny rehetra amin'ny rohy (hoverana, nitsidika, ary mavitrika). Raha hanokana ny ampahany tsirairay, dia tsy maintsy mampiasa pseudo-kilasy ny rohy.
Link Pseudo-Classes
Misy karazana rohy efatra karazana ny pseudo-kilasy azonao faritana:
- : rohy - izany no endrika fanalahidy ho an'ny rohy
- : nitsidika - taorian'ny nahitana rohy iray
- : hover - toy ny totozy amin'ny rohy (tsindrio ny tsindrona)
- : mavitrika - raha jerena ny rohy
Raha hamaritra pseudo-class ny rohy, ampiasao izany amin'ny marika iray ao amin'ny selecteur CSS . Noho izany, raha hanova ny loko voatondro amin'ny rohy rehetra mankany amin'ny volontany, soraty hoe:
a: nitsidika {loko: grey; }Raha manamboara fifandraisana pseudo iray ianao, dia tsara ny manosika azy rehetra. Amin'izay dia tsy ho gaga amin'ny valim-bahiny ianao. Noho izany raha te-hanova ny loko voatazona mankany amin'ny maitso ianao, raha mbola mainty daholo ny pseudo-hafa rehetra misy rohy misy anao, dia manoratra ianao:
a: rohy, a: hover, a: active {loko: black; } a: nitsidika {loko: grey; }Hanova ny lokon'ny rohy
Ny fomba malaza indrindra hanamboarana rohy dia ny manova ny loko rehefa miresaka azy ny totozy:
a {loko: # 00f; } a: hover {loko: # 0f0; }Aza hadinoina anefa fa mety hisy fiantraikany eo amin'ny fomba fiasan'ny rohy eo amin'ny sehatra misy azy io:
a {loko: # 00f; } a: active {color: # f00; }Na ny fomba fijerin'ity rohy ity fa efa nitsidika azy ianao:
a {loko: # 00f; } a: nitsidika {loko: # f0f; }Mba hametrahana izany rehetra izany:
a {loko: # 00f; } a: nitsidika {loko: # f0f; } a: hover {loko: # 0f0; } a: active {color: # f00; }Apetraho eo amin'ny rohy ny raki-peo mba hanampiana akambana na bala
Azonao atao ny mametraka ny rohy eo amin'ny rohy toy ny ao amin'ny lahatsoratra Stylish Backgrounds, fa amin'ny alalan'ny milalao kely miaraka amin'ny sary kely, azonao atao ny mamorona rohy misy sarimihetsika mifandraika. Misafidiana sary iray kely, manodidina ny 15px ho 15px, raha tsy mihoatra ny lahatsoratranao. Apetraho ny lafiny iray amin'ny lafiny iray amin'ny rohy ary apetaho ny safidy averina averimberina averina. Avy eo, alaivo ilay rohy mba hahafahan'ny lahatsoratra ao anaty rohy mankany amin'ny ankavia miankavanana na havia hizaha ilay icon.
a {padding: 0 2px 1px 15px; fototra: #fff url (ball.gif) afovoany havia no averina; loko: # c00; }Rehefa manana ny icono ianao, dia afaka mametraka sary hafa ianao rehefa hijery, mavitrika, ary mijery ireo sary mba hanovana ny rohy:
a {padding: 0 2px 1px 15px; fototra: #fff url (ball.gif) afovoany havia no averina; loko: # c00; } a: hover {background: #fff url (ball2.gif) havaozina miditra tsy-averina; } a: mavitrika {background: #fff url (ball3.gif) havaozina tsy mamerina; }Ataovy toy ny bokotra ny rohy misy anao
Tena be mpitia ny bokotra, fa mandra-pidiran'ny CSS dia tsy maintsy mamorona bokotra mampiasa sary ianao , izay mahatonga ny pejyo haharitra ela kokoa. Soa ihany fa misy fomba maromaro afaka manampy anao hamorona bokotra mitovy amin'ny CSS.
a {border: 4px; padding: 2px; text-decoration: tsy misy; } a: active {border: 4px inet; }Mariho fa rehefa mametraka loko eo am-piandohana sy ny endriny ianao, dia tsy mora toy izany koa ny fampisehoana azy ireo. Koa, eto ny bokotra faniry izay misy sisin-tany marobe:
a {border style: solid; border-width: 1px 4px 4px 1px; text-decoration: tsy misy; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }Ary mety hisy fiantraikany amin'ny toetran-java-manidina sy mavitrika amin'ny rohy bokotra, ampiasao fotsiny ireo kilasim-peo ireo:
a: rohy {rindrina-style: solid; border-width: 1px 4px 4px 1px; text-decoration: tsy misy; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }