Yadda za a Hanya Hotuna tare da CSS

Abubuwan hulɗa suna da yawa a shafukan yanar gizo, amma masu yawa masu zane-zane na yanar gizo ba su fahimci ikon da suke da shi ba tare da CSS don sarrafawa da sarrafa hanyoyin su yadda ya kamata. Zaka iya ƙayyade hanyoyi tare da ziyarta, ɓoyewa, da jihohin aiki. Zaka kuma iya aiki tare da iyakoki da ɗakoki don ba da hanyoyinka fiye da pizzaz ko sanya su kama da maɓalli ko ma hotuna.

Yawancin masu zane-zane na yanar gizo suna farawa ta hanyar bayyana fasalin akan "a" tag:

a {launi: ja; }

Wannan zai sa kowane nau'i na mahaɗin (hawan, ziyarci, da aiki). Don yin kowanne ɓangaren daban, dole ne ka yi amfani da jere-jigon haɗi.

Kayan Wurin Lantarki

Akwai nau'ikan nau'ikan nau'in nau'i nau'i nau'in haɗin kai wanda za ka iya ayyana:

Don ƙaddamar da layi na hanyar sadarwa, yi amfani da shi tare da tag a cikin mai shiga CSS . Don haka, don canza launin da aka ziyarta na duk hanyoyinka zuwa launin toka, rubuta:

a: ziyarci {launi: launin toka; }

Idan kayi jigon jigon kuɗi ɗaya, yana da kyakkyawan ra'ayin da za ku tsara su duka. Wannan hanyar ba za ku yi mamakin sakamakon da ba kuyi ba. Don haka idan kana so ka canja launin da aka ziyarta zuwa launin toka, yayin da duk duk abubuwan da ke cikin haɗinka sun zama baki, za ka rubuta:

a: hanyar haɗi, a: hover, a: aiki {launi: baki; }: ziyarci {launi: launin toka; }

Canja Launin Lines

Hanyar da ta fi dacewa ta hanyar haɗin gwal shine canja yanayin lokacin da linzamin kwamfuta ya motsa shi:

a {launi: # 00f; } a: hover {launi: # 0f0; }

Amma kar ka manta cewa zaka iya shafar yadda mahaɗin ke kallo yayin da suke danna shi tare da: dukiya mai aiki:

a {launi: # 00f; } a: aiki {launi: # f00; }

Ko yadda mahaɗin ke duba bayan ka ziyarci ta tare da: ziyarci dukiya:

a {launi: # 00f; }: ziyarci {launi: # f0f; }

Don sanya shi duka tare:

a {launi: # 00f; }: ziyarci {launi: # f0f; } a: hover {launi: # 0f0; } a: aiki {launi: # f00; }

Sanya Bayanan Bayani akan Abubuwan Hulɗa don Ƙara Ƙari ko Bullets

Zaka iya sanya bayanan a kan hanyar haɗi kamar yadda a cikin Rubutattun Bayanan Bayani, amma ta wasa tare da bayanan baya kaɗan, zaka iya ƙirƙirar haɗin da ke da alamar da aka hade. Zaɓi gunkin da yake ƙananan, a kusa da 15px ta 15px, sai dai idan rubutunku ya fi girma. Sanya bango zuwa gefe ɗaya na mahada kuma saita zaɓi na sakewa don sake maimaitawa. Bayan haka, haɗi da haɗin don haɗin rubutu a cikin mahaɗin din ya motsa yafi zuwa hagu ko dama don ganin gunkin.

a {padding: 0 2px 1px 15px; Bayanan: #fff url (ball.gif) cibiyar hagu ba maimaitawa ba; launi: # c00; }

Da zarar ka samo gunkinka, zaka iya saita hoto daban-daban kamar hover, aiki, da kuma ziyarci gumakan don sa mahaɗin canza:

a {padding: 0 2px 1px 15px; Bayanan: #fff url (ball.gif) cibiyar hagu ba maimaitawa ba; launi: # c00; }:: hover {baya: #fff url (ball2.gif) cibiyar hagu ba maimaitawa ba; } a: aiki {baya: #fff url (ball3.gif) cibiyar hagu ba maimaitawa ba; }

Yi Maɓallan Bincike Abun Hulɗarku

Buttons suna da mashahuri, amma har sai CSS ya zo, dole ne ka ƙirƙiri maɓalli ta yin amfani da hotunan , wanda ke sa shafukanka su ɗauki tsayi. Abin takaici, akwai yanayin layi wanda zai iya taimaka maka ƙirƙirar maɓallin button kamar yadda CSS yake.

Yankin iyaka: 4px farawa; Dama: 2px; kayan rubutu: babu; } a: aiki {iyakar: 4px shafi; }

Lura, lokacin da ka sa launuka a farkon da kuma salon saiti, masu bincike bazai iya ba su kamar yadda kake tsammani ba. Saboda haka, a nan akwai maɓallin fancier tare da iyakoki mai launi:

Yanayin iyakoki: m; iyakar iyaka: 1px 4px 4px 1px; kayan rubutu: babu; Dama: 4px; iyakar launi: # 69f # 00f # 00f # 69f; }

Kuma zaku iya rinjayar hanyar haɓaka da kuma aiki masu mahimmanci na maɓallin maballin kuma, kawai amfani da waɗannan nau'in-nau'i-nau'i:

a: danganta {Yankin iyaka: m; iyakar iyaka: 1px 4px 4px 1px; kayan rubutu: babu; Dama: 4px; iyakar launi: # 69f # 00f # 00f # 69f; }:: yanki layin launi: #ccc; }