Tha ceanglaichean gu math cumanta air duilleagan-lìn, ach chan eil mòran de dhealbhadairean lìn a 'tuigsinn an cumhachd a th' aca le CSS gus na ceanglaichean aca a làimhseachadh agus a riaghladh gu h-èifeachdach. Faodaidh tu ceanglaichean a mhìneachadh le stàitean gnìomhach, tadhal, agus gnìomhach. Faodaidh tu cuideachd a bhith ag obair le crìochan agus cùl-ionadan gus do cheanglaichean barrachd pizzaz a thoirt seachad no an dèanamh coltach ri putanan no eadhon ìomhaighean.
Bidh a 'chuid as motha de dhealbhadairean lìn a' tòiseachadh le bhith a 'mìneachadh stoidhle air a' chlib "a":
a {dath: dearg; }Cuiridh seo stoidhle air gach taobh den cheangal (toll, tadhail, agus gnìomhach). Gus stoidhle a dhèanamh air gach pàirt fa leth, feumaidh tu clasaichean pseudo ceangail a chleachdadh.
Ceangail clasaichean fiadhaich
Tha ceithir seòrsachan bunaiteach de chlasaichean fallain ceangail ann as urrainn dhut mìneachadh:
- : link - is e seo an stoidhle bunaiteach airson a 'cheangal
- : thadhail thu - an dèidh do cheangal a bhith air a bhriogadh
- : hover - oir tha luchag air a chomharrachadh thairis air ceangal (pre-click)
- : gnìomhach - dìreach mar a tha an ceangal air a bhriogadh
Gus ceangal a dhèanamh air clas fiadhaich, cleachd e le tag anns a ' roghnaichear CSS agad. Mar sin, gus dath a thadhail thu air na ceanglaichean agad gu glas atharrachadh, sgrìobh:
a: thadhail {{dath: liath; }Ma stoidhleas tu aon chlas seòlaidh, is e deagh bheachd a th 'ann stoidhle a dhèanamh orra uile. Mar sin cha bhith iongnadh ort bho thoraidhean co-cheangailte. Mar sin ma tha thu dìreach airson an dath tadhail air atharrachadh gu glas, fhad 'sa tha a h-uile seilbh eile de do cheanglaichean fhathast dubh, sgrìobhaidh tu:
a: link, a: hover, a: active {color: black; } a: thadhail {{dath: liath; }Atharraich na Dathan Ceangail
Is e an dòigh as fheàrr le ceanglaichean stoidhle an dath atharrachadh nuair a tha an luchag a 'dol thairis air:
a {dath: # 00f; } a: hover {dath: # 0f0; }Ach na dìochuimhnich gum faod thu buaidh a thoirt air mar a tha an ceangal a 'coimhead mar a tha iad a' briogadh air leis an: seilbh gnìomhach:
a {dath: # 00f; } a: gnìomhach {dath: # f00; }No ciamar a tha an ceangal a 'coimhead às dèidh dhut tadhal air leis an: thadhail thu:
a {dath: # 00f; } a: thadhail {dath: # f0f; }Gus a h-uile càil a chuir còmhla:
a {dath: # 00f; } a: thadhail {dath: # f0f; } a: hover {dath: # 0f0; } a: gnìomhach {dath: # f00; }Cuir Cùl-fhiosrachadh air na ceanglaichean ri ìomhaighean a bharrachd a chur a-steach
Faodaidh tu cùl-fhiosrachadh a dhèanamh air ceangal mar a tha san artaigil Stylish Backgrounds, ach le bhith a 'cluich leis a' chùl beagan, faodaidh tu ceangal a chruthachadh aig a bheil ìomhaigh co-cheangailte. Tagh ìomhaigh a tha beag, timcheall air 15px le 15px, mura bheil an teacsa agad nas motha. Cuir cùl-raon air aon taobh den cheangal agus cuir an roghainn ath-bheothachaidh air dòigh gun ath-aithris. An uairsin, cuir a-steach an ceangal gus am bi an teacsa taobh a-staigh na ceangail air a ghluasad thairis gu leòr gu clì no deas gus an ìomhaigh fhaicinn.
a {padding: 0 2px 1px 15px; cùl-fhiosrachadh: #fff url (ball.gif) air an taobh chlì gun ath-aithris; dath: # c00; }Aon uair 's gum bi an ìomhaigh agad, faodaidh tu ìomhaigh eadar-dhealaichte a shuidheachadh mar na h-ìomhaigheagan agad, a tha gnìomhach, agus a thadhal ort gus an ceangal eadar-dhealaichte a dhèanamh:
a {padding: 0 2px 1px 15px; cùl-fhiosrachadh: #fff url (ball.gif) air an taobh chlì gun ath-aithris; dath: # c00; } a: hover {cùl-fhiosrachadh: #fff url (ball2.gif) air fhàgail air an ionad gun ath-aithris; } a: active {background: #fff url (ball3.gif) left left no-repeat; }Dèan na ceanglaichean agad a 'coimhead coltach ri putanan
Tha putanan air a mheas gu mòr, ach gus an tàinig CSS suas, dh'fheumadh tu putanan a chruthachadh le bhith a 'cleachdadh dhealbhan , a tha a' toirt do dhuilleagan nas fhaide airson luchdachadh. Gu fortanach, tha stoidhle crìche ann a dh'fhaodas do chuideachadh le bhith cruthachadh buaidh a 'phutan a tha coltach gu furasta le CSS.
a {border: 4px outset; gleabadh: 2px; teacs-sgeadachadh: gin; } a: active {border: 4px inset; }Thoir fa-near, cuin a chuireas tu dathan air a 'chiad dol-a-mach agus chan eil stoidhlichean, brabhsairean cho buailteach an toirt seachad mar a dh'fhaodadh tu a bhith an dùil. Mar sin, is e seo putan fancier le crìochan dathte:
a {stoidhle crìche: cruaidh; leud a 'chrìche: 1px 4px 4px 1px; teacs-sgeadachadh: gin; gleabadh: 4px; dath-crìche: # 69f # 00f # 00f # 69f; }Agus faodaidh tu buaidh a thoirt air an toll-dubh agus na stoidhlichean gnìomhach de cheangal a 'phutain cuideachd, dìreach cleachd na clasaichean pseudo sin:
a: ceangal {cruth-stoidhle: cruaidh; leud a 'chrìche: 1px 4px 4px 1px; teacs-sgeadachadh: gin; gleabadh: 4px; dath-crìche: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }