Ir-rabtiet huma komuni ħafna fuq il-paġni tal-web, iżda bosta disinjaturi tal-web ma jirrealizzawx il-poter li għandhom ma ' CSS biex jimmanipulaw u jamministraw ir-rabtiet tagħhom b'mod effettiv. Tista 'tiddefinixxi l-konnessjonijiet ma' l-istati miżjura, imqabbda, u attivi. Tista 'wkoll taħdem mal-fruntieri u l-isfondi biex tagħti l-links tiegħek aktar pizzaz jew tagħmilhom look like buttuni jew anke immaġini.
Bosta disinjaturi tal-web jibdew billi jiddefinixxu stil fuq it-tikketta "a":
a {kulur: aħmar; }Dan se jistira l-aspetti kollha tal-link (imbagħad jerġgħu jżuruh, żaruhom u huma attivi). Għall-istil ta 'kull parti separatament, għandek tuża r-rabta psewdo-klassijiet.
Rabta Pseudo-Klassijiet
Hemm erba 'tipi bażiċi ta' pseudo-klassijiet ta 'rabta li tista' tiddefinixxi:
- : link - dan huwa l-istil awtomatiku għar-rabta
- : miżjura - wara li għafas il-link
- : imbagħad - bħala ġurdien huwa lest fuq link (ikklikkja minn qabel)
- : attiva - id-dritt hekk kif il-link qed issir għafsa
Biex tiddefinixxi rabta psewdo-klassi, użaha bit-tikketta fis- selettur tas - CSS tiegħek. Allura, biex tibdel il-kulur miżjur tal-links kollha tiegħek għall-griż, ikteb:
a: miżjura {kulur: griż; }Jekk inti stil wieħed pseudo-klassi rabta, hija idea tajba li stilhom kollha. B'dak il-mod intom mhux se tkun sorpriż b'riżultati estranji. Mela jekk inti biss trid tibdel il-kulur miżjur għal griż, filwaqt li l-psewdo-proprjetajiet l-oħra tal-links tiegħek għadhom iswed, int tikteb:
a: link, a: imbagħad, a: attiv {kulur: iswed; } a: żar {kulur: griż; }Ibdel il-Kuluri tal-Link
Il-mod l-aktar popolari għal links ta 'l-istil huwa li jibdlu l-kulur meta l-maws isib fuqha:
a {kulur: # 00f; } a: hover {color: # 0f0; }Imma ma ninsewx li tista 'taffetwa kif il-link jidher kif qed tikklikkja fuqha ma': il-proprjetà attiva:
a {kulur: # 00f; } a: attiva {kulur: # f00; }Jew kif il-link iserraħ wara li tkun żortha mal-proprjetà ta ': żjara:
a {kulur: # 00f; } a: żar {kulur: # f0f; }Biex nagħmlu dan kollu flimkien:
a {kulur: # 00f; } a: żar {kulur: # f0f; } a: hover {color: # 0f0; } a: attiva {kulur: # f00; }Poġġi l-Isfond fuq ir-Rabtiet biex Żid Ikoni jew Bullets
Tista 'tpoġġi sfond fuq link bħal fl-artikolu Sfond Stylish, iżda billi tilgħab bl-isfond ftit, tista' toħloq link li għandu ikona assoċjata. Agħżel ikona żgħira, madwar 15px minn 15px, sakemm it-test tiegħek ma jkunx ikbar. Poġġi l-isfond fuq naħa waħda tal-link u ssettja l-għażla ripetuta biex ma tirrepetix. Imbagħad, aqleb il-link sabiex it-test fil-link jitmexxa fuq il-bogħod biżżejjed biex ix-xellug jew il-lemin jaraw l-ikona.
a {padding: 0 2px 1px 15px; isfond: #fff url (ball.gif) xellug tax-xellug no-repeat; kulur: # c00; }Ladarba tkun ħadt l-ikona tiegħek, tista 'tissettja immaġni differenti bħala l-ikoni tal-qlib, l-attiv u l-ismijiet miżmuma biex tagħmel il-bidla fil-link:
a {padding: 0 2px 1px 15px; isfond: #fff url (ball.gif) xellug tax-xellug no-repeat; kulur: # c00; } a: hover {isfond: #fff url (ball2.gif) xellug left-no-repeat; } a: attiva (sfond: #fff url (ball3.gif) ċentru tax-xellug ebda ripetizzjoni; }Għamla Your Links Ħares Bħall Buttuni
Buttuni huma popolari ħafna, iżda sakemm is-CSS wasal flimkien, inti kellha toħloq buttuni li jużaw immaġini , li tagħmel il-paġni tiegħek tieħu aktar it-tagħbija. B'xorti tajba, hemm stil tal-fruntiera li jista 'jgħinek toħloq buttuna simili b'mod faċli ma' CSS.
a {fruntiera: bidu 4px; ikkuttunar: 2px; dekorazzjoni tat-test: ħadd; } a: attiva {fruntiera: 4px inset; }Innota, meta tpoġġi l-kuluri mill-bidu u tinstalla l-istili, il-browsers mhumiex probabbli li jirrenduhom kif tista 'tistenna. Allura, hawnhekk hawn buttuna aktar fancier bi fruntieri kkuluriti:
a {border-style: solidu; wisa 'tal-fruntiera: 1px 4px 4px 1px; dekorazzjoni tat-test: ħadd; ikkuttunar: 4px; kulur tal-fruntiera: # 69f # 00f # 00f # 69f; }U tista 'taffetwa l-istil tal-imblukkar u l-istili attivi ta' link buttuna wkoll, uża biss dawk is-psewdo-klassijiet:
a: link {stil tal-fruntiera: solidu; wisa 'tal-fruntiera: 1px 4px 4px 1px; dekorazzjoni tat-test: ħadd; ikkuttunar: 4px; kulur tal-fruntiera: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }