Kwa mtazamo wa kwanza, hakuna tofauti ya kutumia: id au darasa. Baada ya yote, kwa kupewa sawa Chaguzi za CSS mitindo ya kitambulisho na darasa - matokeo yatakuwa sawa. Kwa kweli, hakuna tofauti kati ya id na darasa katika CSS, isipokuwa kwa kipaumbele cha usindikaji wao. Lakini katika hali zingine, ambazo hutumiwa mara nyingi katika ukuzaji wa wavuti, tofauti hiyo inaonekana kabisa. Nakala hii inaangazia tofauti zote kati ya darasa na id.

ID

Kitambulisho ndicho kitambulisho cha kipekee cha kipengele. Katika ukurasa mmoja, kitambulisho kimoja kinatumika mara moja tu, ingawa inawezekana kutumia vitambulishi kadhaa vinavyofanana ndani ya ukurasa huo huo, lakini hii inaweza kusababisha matatizo wakati wa kutumia nanga za HTML na JS. Ukijaribu kugawa vitambulisho viwili tofauti kwa kipengee kimoja (lebo ya HTML), basi sheria kutoka kwa kitambulisho cha kwanza (kilicho kushoto kabisa) ndizo zitafanya kazi.

Mfano 1: jinsi si vyema kutumia vitambulisho (vitambulisho)

Kizuizi cha maandishi kilichochaguliwa

Kizuizi cha maandishi kilichochaguliwa

Mfano wa 2: jinsi ya kutotumia vitambulisho (vitambulisho)

Kukabidhi vitambulisho viwili au zaidi kwa kipengele cha 1 hakuruhusiwi

Katika kesi ya utumizi wa wakati mmoja wa kitambulisho na darasa kwa kipengele kimoja, kipaumbele cha kitambulisho kitakuwa cha juu kuliko cha darasa:

Ufafanuzi Mitindo ya CSS

#my_id_r7t ( rangi : kijani ; uzito wa fonti: bold;)

Aya hii imepewa darasa my_class na kitambulisho my_id.

Kama unaweza kuona, rangi imepata maadili yaliyorekodiwa katika kitambulisho. Lakini ukiangalia kwa karibu, kitambulisho na darasa vinaweza kukamilishana kwa mafanikio: herufi nzito, iliyobainishwa katika kitambulisho, imeunganishwa na mtindo wa italiki ulioandikwa darasani.

Ukiongeza mtindo: kwa maelezo, matokeo yatakuwa kama hii:

wengi zaidi kipaumbele cha juu ina mtindo uliopewa kielezi kwa kutumia style="...".

Mfano mzuri wa vipaumbele umetolewa katika nyaraka rasmi za CSS (eng). Kwa kifupi, vipaumbele katika mpangilio wa kushuka ni: mtindo, kitambulisho, darasa, mtindo wa lebo.

Kipengele cha kitambulisho kinaweza kutumika kama nanga ya HTML, badala ya ujenzi wa zamani zaidi, ili uweze kuunganisha kwa sehemu maalum ya ukurasa bila kuipakia upya kwa usaidizi wa Rudi Juu. Ikiwa kuna vitambulisho kadhaa vinavyofanana kwenye ukurasa, hali isiyoeleweka itatokea.

Wakati wa kupanga kurasa kwa kutumia JS, kitendakazi cha getElementById() hutumiwa mara nyingi, ambacho pia "kinatarajia" kwamba kitambulisho lazima kiwe cha kipekee. Vinginevyo, makosa yanaweza kutokea katika kanuni.

Darasa

Unapotumia class , kielezi kimoja cha HTML kinaweza kupewa mitindo kutoka kwa madarasa kadhaa kwa wakati mmoja:

My_class_r7t ( rangi: bluu; mtindo wa fonti: italiki;)
.my_class_ffR5 ( rangi : nyeusi ; rangi ya mandharinyuma : #fafafa ; pedi : 3px ; mpaka : 1px imara #757575 ; ukingo-kushoto : 30px ;)

Majina ya madarasa anuwai yameandikwa yakitenganishwa na nafasi:

Mfano wa kutumia madarasa 2 tofauti kwa lebo 1 ya HTML.

Matokeo ya kutumia madarasa mawili tofauti kwa kifafanuzi cha 1 cha HTML.

Madarasa my_class_r7t na my_class_ffR5 huweka rangi tofauti kwa maudhui ya lebo ya HTML. Rangi ambayo imefafanuliwa baadaye katika faili ya mtindo itatumika (in kwa kesi hii class my_class_ffR5 imeandikwa baada ya my_class_r7t). Mpangilio ambao madarasa yanatumika katika kifafanuzi cha HTML yenyewe haijalishi.

Kupeana thamani ya kipekee kwa madarasa ya mchanganyiko mtindo, zimeandikwa pamoja, bila matatizo:

My_class_bbbb755 ( font-weight: bold;)
.my_class_ffR5 .my_class_bbbb755 ( panga maandishi : kulia ; )

Mpangilio wa kulia utatumika tu wakati kifafanuzi kimoja cha HTML kitapewa madarasa 2 kwa wakati mmoja:

Mfano wa kutumia mitindo kwa madarasa ya mchanganyiko

Tazama hapa chini jinsi inavyoonekana:

Mfano wa kutumia mitindo kwa madarasa ya mchanganyiko

Darasa lile lile, tofauti na kitambulisho, linaweza kupewa kwa urahisi idadi isiyo na kikomo ya vitu tofauti:

...
...
...
...
...

Darasa au kitambulisho - nini cha kutumia?

Kwa kweli, huwezi kuchagua kutumia darasa au kitambulisho. Hii ni sawa na jinsi ya kuchagua kile kilicho bora zaidi: kula au kunywa? Inahitajika kutumia madarasa yote na vitambulisho, kulingana na lengo. Katika hali nyingi, ni bora kutumia darasa ili kuzuia kutumia kitambulisho kwa bahati mbaya zaidi ya mara moja kwenye ukurasa mmoja. Lakini inapobidi, unahitaji kutumia id: kuonyesha kizuizi cha kipekee cha ukurasa, kwa nanga, kwa JS, nk.

Udhibiti mwonekano Vipengele vya HTML kwenye ukurasa vinaweza kuundwa kwa kutumia viteuzi kadhaa. Kitambulisho na darasa la CSS ni la kawaida zaidi, ambalo husaidia sio tu katika kuunda markup ya hati ya HTML, lakini pia katika muundo wao (styling).

Jinsi ya Kutumia Kiteuzi cha Kitambulisho cha CSS

Kiteuzi cha kitambulisho kinatumika kuteua kipengele kimoja cha HTML kwa kutumia thamani ya kipekee ya kitambulisho. Mfano ufuatao unawakilisha kipengele ambacho thamani ya kitambulisho chake ni kichwa.

Katika CSS, unaweza kutumia mitindo tofauti kwa kipengele hiki cha div:

#kichwa ( upana: 100%; urefu: 80px; mandharinyuma: bluu)

Kumbuka kutumia ishara # (hashtag) kabla ya jina lako. Unaweza kujua zaidi kuhusu hili hapa na hapa.

Jinsi ya kutumia kichaguzi cha darasa la CSS

Kiteuzi cha darasa la HTML CSS kinatumika kuchagua mtu binafsi au kikundi cha vipengele vya HTML vilivyo na thamani ya sifa ya darasa sawa.

Katika CSS, unaweza kutumia mtindo tofauti kwa aya nyingi:

Maudhui ( ukingo: 20px 0; urefu wa mstari: 24px; ukubwa wa fonti: 15px)

Usisahau kutumia ishara. (dot) kabla ya jina la darasa wakati wa kutangaza sheria ya CSS. Unaweza kujua zaidi kuhusu hili hapa na hapa.

Tofauti ni nini Darasa la CSS na kitambulisho

Kiteuzi cha kitambulisho kinatumika kwa vipengele vya ukurasa mahususi (#header), huku kiteuzi cha darasa (.yaliyomo) kinatumika kwa kadhaa. Kwa kuwa thamani ya kitambulisho imetolewa kwa kipengele kimoja tu cha HTML. Kwa maneno mengine, vipengele vingi haviwezi kuwa thamani sawa id ndani ya moja ukurasa tofauti. Kwa mfano, unaweza kuwa na kipengele kimoja pekee chenye id #header , au kipengele kimoja chenye kitambulisho #footer .

Thamani sawa ya darasa inaweza kutolewa kwa kipengele kimoja au zaidi cha HTML. Kwa mfano, unaweza kuwa na aya kadhaa na darasa la .content, au viungo kadhaa na darasa la .external.

Mfano ufuatao utakusaidia kuelewa vyema tofauti kati ya darasa la CSS na kitambulisho na jinsi ya kuitumia kwa usahihi:

Kiungo 1 Kiungo 2 Kiungo 3 Kiungo cha 4

Hii ni aya yetu ya kwanza.

Hii ni aya yetu ya pili.

Hii ni aya yetu ya tatu.

Tulianza alama ya HTML hapo juu na kipengee cha div cha kontena. Tuliipa kitambulisho (#chombo) kwani kutakuwa na kontena moja tu kwenye ukurasa wetu. Ndani yake tunaweka sehemu za menyu (#menu) na maudhui (#maudhui). Kama ilivyo kwa kontena, tutakuwa na menyu moja tu na sehemu moja ya yaliyomo. Kuna viungo vinne ndani ya menyu , lakini tulitumia darasa la CSS (.link) kwa kila mojawapo. Vile vile, tulitumia darasa la (.text) kwa kila aya katika kipengele cha div ya maudhui.

Ikiwa unahitaji kutengeneza vitu hivi, unaweza kutumia mfano ufuatao:

#chombo ( upana: 1080px; ukingo: 0 otomatiki; usuli: #eee ) #menu ( urefu: 90px; usuli: #ddd ) .kiungo ( rangi: #000; upambaji wa maandishi: hakuna ) #yaliyomo ( padding: 20px ) maandishi (ukubwa wa fonti: 15px)

Darasa linatumika lini na kitambulisho kinatumika lini?

Kitambulisho kinatumika kwa vipengele vya kibinafsi vinavyoonekana mara moja tu kwenye ukurasa. Kwa mfano, kichwa, kijachini, menyu, n.k. Kiteuzi cha darasa kinatumika kwa kipengele kimoja au zaidi kinachoonekana mara nyingi kwenye ukurasa. Kwa mfano, aya, viungo, vifungo, vipengele vya kuingiza. Na ingawa unaweza kutumia darasa kwa kipengele cha mtu binafsi, lakini ni bora kutumia wateule hawa kwa madhumuni yao yaliyokusudiwa.

Unapaswa pia kuzingatia kwamba kipengele cha HTML kinaweza kuwa na id na darasa. Hebu tufikiri kwamba kuna vitalu viwili kwenye ukurasa na ukubwa sawa na styling, lakini kwa nafasi tofauti. Katika kesi hii, unaweza kutumia darasa moja kwa vitalu hivi kwa kubadilisha ukubwa na mtindo, na kisha utumie kiteuzi tofauti cha kitambulisho kwenye kila kizuizi ili kuwapa nafasi tofauti.

Vipengele vinaweza pia kufungwa kwa madarasa mengi kwa wakati mmoja. Hii ni muhimu sana wakati unahitaji kuomba styling kwa kikundi tofauti vipengele aina fulani. Kwa mfano, kuna darasa .maudhui ambayo inatumika kwa aya zote. Ikiwa unahitaji kuongeza mpaka au stylization nyingine yoyote kwa kadhaa aya tofauti, basi unaweza kufanya hivi kwa kutumia CSS p class ya ziada .bordered :

Hatua hii haina mipaka.

Hatua hii ina mipaka.

Angalia nafasi nyeupe kati ya majina mawili ya darasa ndani sifa ya darasa aya ya pili. Chini ni mfano wa nambari ya CSS:

Maudhui (pembezoni: 10px; saizi ya fonti: 15px; rangi: bluu). yenye mpaka (mpaka: 2px imara #222)

Ni muhimu kutumia kitambulisho na darasa la CSS kwa usahihi, kama wao matumizi mabaya inaweza kusababisha makosa katika kuonyesha msimbo wa HTML.

Tafsiri ya makala "Class Class vs ID: Ipi ya Kutumia" ilitayarishwa na timu rafiki ya mradi.

Nzuri mbaya

Leo ni vigumu kupata tovuti ambapo vile muhimu na tagi muhimu. Angalia msimbo wa tovuti yoyote unayopata kwenye Mtandao na utaona kwamba lebo inaonekana mara nyingi zaidi kuliko vitambulisho vingine kwenye hati ya HTML. Sababu ya umaarufu huu ni mpangilio wa kuzuia. Kwa maneno mengine, tovuti zimeundwa kwa kutumia lebo ya kuzuia.

Shukrani kwa lebo hii, msimbo mzima wa HTML wa hati una muundo unaoonekana na unaoeleweka kimantiki. Ni rahisi kuelewa sio tu kwa mtengenezaji wa mpangilio, bali pia kwa wataalamu wengine wanaofanya kazi pamoja kwenye mradi mmoja. Walakini, lebo isiyo na "satelaiti" - kitambulisho na wateuzi wa darasa - haina thamani.

Madarasa na Vitambulisho

Madarasa (darasa) na vitambulisho (id) hufanya kazi sawa. Wanauliza mitindo tofauti kwa tagi kama ilivyo CSS ya nje faili, na ndani ya hati, kupitia lebo ya mtindo. Hapa ni muhimu kufafanua kwamba wanafanya kazi kwa kushirikiana si tu na tag, lakini pia na vitambulisho vingine vingi.

Fikiria msimbo wa markup wa HTML kama mfano: