Amfani da Kayan Yanayi da ID

Kasuwanci da taimakon ID don taimaka maka CSS

Gidajen yanar gizon yanar gizo a yau suna buƙatar fahimtar CSS (Cascading Style Sheets). Waɗannan su ne umarnin da ka bayar da shafin yanar gizon don sanin yadda za a shimfida a cikin browser browser. Kuna amfani da jerin "styles" zuwa takardunku na HTML wanda zai haifar da kallo da jin dadin yanar gizonku.

Akwai hanyoyi da dama don amfani da waɗannan sifofin da aka ambata a cikin takardun, amma yawancin da kake so ka yi amfani da salon kan kawai wasu abubuwa a cikin takardun, amma ba duk lokuttan wannan ba.

Kuna iya so a ƙirƙirar salon da za ka iya amfani da su zuwa abubuwa da yawa a cikin wani takardun, ba tare da sake maimaita tsarin mulki na kowane mutum ba. Don cimma wadannan nau'ukan da ake so, za ku yi amfani da jinsi da nau'ikan ID HTML. Waɗannan halayen sune halayen duniya waɗanda za a iya amfani da shi kusan kusan kowace tagulla .Wannan yana nufin cewa ko kuna salo na rarraba, sakin layi, haɗi, lissafi ko wani daga cikin wasu sassan HTML a cikin takardunku, za ku iya juyawa zuwa kundin ajiya da ID don taimake ku cika wannan aiki!

Yan Zaɓuɓɓuka

Zaɓin zaɓin ya ba ka damar saita tsarin da yawa zuwa wannan nau'i ko tag a cikin takardun. Alal misali, ƙila za ku so a sami wasu sassa na rubutunku da aka kira a cikin launi daban-daban daga sauran rubutun a cikin takardun. Wadannan sassan da aka nuna alama za su iya kasancewa "faɗakarwa" cewa kana tsaye akan shafin. Kuna iya sanya sakin layi tare da ɗalibai kamar haka:


p {launi: # 0000ff; }
p.alert {launi: # ff0000; }

Wadannan styles zasu sanya launi na dukkan sassan layi zuwa blue (# 0000ff), amma kowane sakin layi da sifa na "jijjiga" zai sanya ta a cikin ja (# ff0000). Wannan shi ne saboda faɗakarwar kamfanonin yana da ƙari fiye da ka'idar CSS ta farko, wanda kawai ke amfani da mai zaɓin tag.

A lokacin da ke aiki tare da CSS, wata takamaiman ƙayyadadden tsarin mulki zai shafe ƙananan takamaiman. Saboda haka a cikin wannan misali, yawancin sararin samaniya ya tsara launi na dukan sassan, amma na biyu, ƙayyadaddun tsarin mulki fiye da rinjaye wannan kafa kawai a wasu sassan.

Anan ne yadda za a iya amfani da wannan a cikin saitin HTML:


Wannan sakin layi zai nuna a blue, wanda shine tsoho don shafin.


Wannan sakin layi zai kasance cikin blue.


Kuma wannan sakin layi za a nuna shi a ja saboda kullin sashi zai sake rubuta launin launi mai launin launi daga mai zane mai zane.

A cikin wannan misali, salon "p.alert" zai yi amfani ne kawai da abubuwan sassan da suke amfani da wannan "faɗakarwa" class.If kuna so ku yi amfani da wannan kundin a kan abubuwa masu yawa na HTML, za ku cire ƙa'idar HTML kawai daga farkon kira style (kawai ku tabbata barin lokacin (.) a wuri), kamar wannan:


.alert {baya-launi: # ff0000;}

Wannan kundin yanzu yana samuwa ga duk wani abu wanda yake buƙatar shi. Duk wani yanki na HTML ɗin da ke da darajar sifa na "jijjiga" zai sami wannan salon. A cikin HTML a ƙasa, muna da duka sakin layi da wani matakin matakin 2 wanda yayi amfani da kundin "jijjiga". Dukansu biyu za su sami launin jan launin ja bisa ga CSS da muka nuna kawai.


Wannan sakin layi za a rubuta a ja.

Kuma wannan h2 zai zama ja.

A kan shafukan intanet a yau, ana amfani da halayen halayen a mafi yawan abubuwa saboda suna da sauƙi don aiki tare da wani hangen nesa wanda ID ke. Za ka sami mafi yawan shafukan HTML na yau da za a cika da halayen halayen, wasu daga abin da aka maimaita sau da yawa a cikin wani takardu da sauransu waɗanda ba za su iya bayyana ba sau ɗaya kawai.

ID Zaɓaɓɓen

Zaɓin ID yana ba ka damar bada sunan zuwa wani nau'i na musamman ba tare da haɗa shi da tag ko wasu abubuwan HTML ba . Ka ce kuna da rabuwa a cikin rubutun ku na HTML wanda ya ƙunshi bayani game da wani taron.

Kuna iya ba wannan ɓangaren nau'in ID na "taron", sa'an nan kuma idan kuna so ya tsara wannan rarraba tare da iyakoki na baki 1-pixel baki ɗaya ku rubuta lambar ID kamar wannan:


#event {iyaka: 1px m # 000; }

Kalubale tare da masu zaɓin ID shine ba za a iya maimaita su a cikin takardun HTML ba. Dole ne su zama na musamman (za ku iya amfani da wannan ID a shafuka masu yawa na shafinku, amma sau ɗaya a kowane takardun HTML). Don haka idan kana da abubuwa uku da suka buƙaci wannan iyakar, za ka buƙaci ka ba su siffofin ID na "event1", "event2" da "event3" da kuma kowanne daga cikinsu. Saboda haka, zai zama mafi sauƙi a yi amfani da alamar "taron" da aka ambata a baya da kuma sa su gaba daya.

Wani kalubale tare da nau'in ID shine cewa suna da fifiko fiye da nau'in halayen. Wannan yana nufin cewa idan kana buƙatar samun CSS wanda ya shafe tsarin da aka rigaya, zai iya zama da wuya a yi haka idan kun dogara sosai akan ID. Wannan shi ne dalilin da yawa da yawa masu tasowa yanar gizo suka janye daga yin amfani da ID a cikin alamar su, koda kuwa sun yi niyyar amfani da wannan darajar sau ɗaya, kuma sun juya zuwa ga dabi'un ƙananan takamaiman kusan dukkanin sassa.

Yanayin da yanayin ID ya shiga cikin wasa shi ne lokacin da kake son ƙirƙirar shafi wanda ke da alaƙa na alamar shafi. Alal misali, idan kana da shafin yanar gizon abin da ya ƙunshi dukkan abin da ke cikin shafi ɗaya tare da haɗin da ke "tsalle" zuwa sassa daban-daban na shafin. Ana yin wannan ta amfani da alamomin ID da kuma haɗin rubutu da suke amfani da waɗannan alaƙa.

Za ku kawai ƙara darajar wannan alamar, wadda ta riga ta gaba da alamomin #, zuwa alamar href na mahada, kamar wannan:

Wannan shine mahada

Lokacin da aka danna ko taɓawa, wannan haɗin zai yi tsalle zuwa ɓangaren shafin da ke da wannan alamar ID. Idan babu wani abu a shafin da aka yi amfani da wannan adadin ID, to haɗin ba zai yi wani abu ba.

Ka tuna, idan kana son ƙirƙirar shafi a shafi, amfani da alamun ID zai buƙaci, amma har yanzu zaka iya juyawa zuwa ɗalibai don dalilai na CSS. Wannan shi ne yadda zan sa shafukan yanar gizo a yau - Na yi amfani da masu zaɓaɓɓun kundin karatu yadda ya kamata kuma kawai in juya zuwa ID lokacin da na buƙatar alamar ta yi aiki ba kawai a matsayin ƙugiya don CSS ba har ma a matsayin hanyar haɗin shafi.

Labari na farko daga Jennifer Krynin. Edited by Jeremy Girard a ranar 8/9/17