Jinsi ya kutumia Span na Div Elements HTML

Tumia muda na div kwa CSS kwa udhibiti mkubwa wa mtindo na mpangilio.

Watu wengi ambao ni mpya kwa kubuni wavuti na HTML / CSS hutumia na

vipengele kwa njia tofauti wakati wajenga wavuti za wavuti. Ukweli, hata hivyo, ni kwamba kila moja ya mambo haya ya HTML hutumia malengo tofauti. Kujifunza kutumia kila kusudi lake linalotarajiwa kukusaidia kuunda kurasa za wavuti safi ambazo kanuni ni rahisi kusimamia kwa ujumla.

Kutumia
Element

Kipengele cha div kinafafanua mgawanyiko wa mantiki kwenye ukurasa wako wa wavuti.

Ni kimsingi sanduku ambalo unaweza kuweka vipengele vingine vya HTML vinavyoenda kwa pamoja. Mgawanyiko unaweza kuwa na vipengele vingi vingi ndani yake, kama aya, vichwa, orodha, viungo, picha, nk. Inaweza hata kuwa na mgawanyiko mwingine ndani yake kutoa muundo wa ziada na shirika kwenye hati yako ya HTML.

Ili kutumia kipengele cha div, fungua lebo

wazi kabla ya eneo la ukurasa wako unayotaka kama mgawanyiko tofauti, na lebo ya karibu baada yake:

yaliyomo ya div

Ikiwa eneo la ukurasa wako linahitaji maelezo ya ziada ambayo utatumia kwa mtindo na CSS baadaye, unaweza kuongeza mteuzi wa id (kwa mfano,

id = "myDiv">), au mchezaji wa darasa (kwa mfano, darasa = "bigDiv">). Wote sifa hizi zinaweza kuchaguliwa kwa kutumia CSS au kubadilishwa kwa kutumia JavaScript. Mazoea ya sasa yanapendana na kutumia watunzaji wa darasa badala ya vitambulisho, kwa sehemu kwa sababu ya wapigaji wa ID maalum. Kwa kweli, hata hivyo, unaweza kutumia moja na unaweza hata kutoa mgawanyiko ID na mchezaji wa darasa.

Wakati wa kutumia

Versus

Kipengele cha div kina tofauti na kipengele cha sehemu ya HTML5 kwa sababu haitoi maudhui yaliyomo yaliyo maana ya semantic. Ikiwa hujui kama kizuizi cha maudhui kinapaswa kuwa div au sehemu, fikiria kuhusu kusudi la kipengele na maudhui ni kukusaidia kuamua nini cha kutumia:

  • Ikiwa unahitaji kipengele tu kuongeza mitindo kwenye eneo hilo la ukurasa, unapaswa kutumia kipengele cha div.
  • Ikiwa maudhui yanayomo yana mtazamo tofauti na inaweza kusimama peke yake, unaweza kutaka kutumia kipengele cha sehemu badala yake.

Hatimaye, wote vipande na sehemu hufanya sawa sawa na unaweza kuwapa ama ama maadili na mtindo wao na CSS ili uoneke kwa tovuti yako unayohitaji. Yote haya ni mambo ya kiwango cha kuzuia.

Kutumia Element

Kipengele cha span ni kipengele cha ndani na chaguo-msingi. Hii inaweka mbali na div na vipengele vya sehemu. Kipengele cha span mara nyingi hutumiwa kuunganisha kipande maalum cha maudhui, kwa kawaida maandishi, ili kuipa "ndoano" ya ziada inayoweza kuingizwa baadaye. Kutumiwa na CSS, inaweza kubadilisha mtindo wa maandishi unayoingia; hata hivyo, bila sifa za mtindo wowote, kipengele cha span peke yake haina athari kwa maandiko kabisa.

Hii ni tofauti kuu kati ya muda na vipengele vya div. Kama ilivyoelezwa hapo juu, kipengele cha div kinajumuisha mapumziko ya kifungu, wakati kipengele cha span kinauambia kivinjari kutumia sheria zinazohusiana na style ya CSS kwa kile kilichofungwa na vitambulisho :


Maandishi yaliyotajwa na asilia yaliyotajwa.

Ongeza darasa = "kuonyesha" au darasa lingine kwenye kipengele cha span kwa mtindo wa maandishi na CSS (kwa mfano, darasa = "kuonyesha">).

Kipengele cha span hakina sifa zinazohitajika, lakini tatu ambazo ni muhimu zaidi ni sawa na za kipengele cha div:

  • mtindo
  • darasa
  • id

Tumia nafasi wakati unataka kubadilisha mtindo wa maudhui bila kuelezea maudhui hayo kama kipengele kipya cha kiwango cha kuzuia kwenye hati.

Kwa mfano, ikiwa unataka neno la pili la h3 linaloelekea kuwa nyekundu, unaweza kuzunguka neno hilo kwa kipengele cha span ambacho kinaweza kuwa neno hilo kama maandishi nyekundu. Neno bado ni sehemu ya kipengele cha h3, lakini sasa pia inaonyesha katika nyekundu:

Hii ni kichwa changu cha kushangaza

Iliyotengenezwa na Jeremy Girard mnamo 2/2/17