Paggamit ng Span at Div HTML Mga Sangkap na may CSS sa Web Design

Maraming tao na bago sa web design at HTML / CSS ang gumagamit at

ang mga elemento nang magkakasabay habang nagtatayo sila ng mga web page. Ang katotohanan, gayunpaman, ay ang bawat isa sa mga elemento ng HTML na ito ay nagsisilbing iba't ibang layunin. Ang pag-aaral na gamitin ang bawat isa para sa layunin nito ay tutulong sa iyo na bumuo ng mas malinis na mga web page na mas madaling pamahalaan ang code.

Gamit ang
Elemento

Ang elemento ng div ay tumutukoy sa lohikal na dibisyon sa iyong web page. Ito ay karaniwang isang kahon kung saan maaari kang maglagay ng iba pang mga elemento ng HTML na lohikal na magkakasama. Ang isang dibisyon ay maaaring magkaroon ng maraming iba pang mga sangkap sa loob nito, tulad ng mga talata, mga pamagat, mga listahan, mga link, mga imahe, atbp. Maaari pa ring magkaroon ng iba pang mga dibisyon sa loob nito upang magbigay ng karagdagang istraktura at organisasyon sa iyong HTML na dokumento.

Upang gamitin ang div element, ilagay ang isang bukas

tag bago ang lugar ng iyong pahina na gusto mo bilang isang hiwalay na dibisyon, at isang malapit

tag pagkatapos nito:

mga nilalaman ng div

Kung ang lugar ng iyong pahina ay nangangailangan ng ilang karagdagang impormasyon na gagamitin mo sa istilo sa CSS sa ibang pagkakataon, maaari kang magdagdag ng isang tagapili ng id (hal.,

id = "myDiv">

), o isang tagapili ng klase (hal.,

class = "bigDiv">
). Ang parehong mga katangiang ito ay maaaring mapili gamit ang CSS o mabago gamit ang JavaScript. Ang kasalukuyang mga pinakamahuhusay na gawi ay nakatuon sa paggamit ng mga tagapili ng klase sa halip ng mga ID, sa bahagi dahil sa kung paano ang mga tiyak na tagapili ng ID. Sa katunayan, gayunpaman, maaari mong gamitin ang alinman sa isa at maaari pa ring magbigay ng isang dibisyon parehong ID at isang tagapili ng klase. Kapag Gagamitin
Laban sa

Ang div element ay naiiba sa elemento ng seksyon ng HTML5 dahil hindi ito nagbibigay ng nakapaloob na nilalaman sa anumang kahulugan ng semantiko. Kung hindi ka sigurado kung ang bloke ng nilalaman ay dapat na isang div o isang seksyon, mag-isip tungkol sa kung ano ang layunin ng elemento at ng nilalaman upang tulungan kang magpasya kung anong gagamitin:

Kung kailangan mo ang elemento lamang upang magdagdag ng mga estilo sa lugar na iyon ng pahina, dapat mong gamitin ang div element.

Kung ang nilalaman na nilalaman ay may isang natatanging focus at maaaring tumayo sa sarili nitong, maaaring gusto mong gamitin ang elemento ng seksyon sa halip.

Sa huli, ang parehong mga div at mga seksyon ay kumikilos nang katulad din at maaari kang magbigay ng alinman sa mga ito sa mga halaga ng katangian at estilo ng mga ito sa CSS upang makuha ang hitsura ng iyong site na kailangan mo. Ang dalawa sa mga ito ay mga elemento ng antas ng block.

Gamit ang Elemento

Ang span na elemento ay isang inline elemento sa pamamagitan ng default. Ito ay nagtatakda nito mula sa mga elemento ng div at seksyon. Ang span na elemento ay kadalasang ginagamit upang balutin ang isang tiyak na piraso ng nilalaman, karaniwang teksto, upang bigyan ito ng karagdagang "kawit" na maaaring istilo mamaya. Ginagamit gamit ang CSS, maaari itong baguhin ang estilo ng teksto na nakapaloob nito; gayunpaman, nang walang anumang mga katangian ng estilo, ang span na elemento lamang ay walang epekto sa teksto sa lahat.

Ito ang pangunahing pagkakaiba sa pagitan ng span at ng mga elemento ng div. Tulad ng nabanggit sa itaas, ang elemento ng div ay nagsasama ng break na talata, samantalang ang span elemento ay nagsasabi lamang sa browser na ilapat ang nauugnay na mga panuntunan sa estilo ng CSS sa kung ano ang nakapaloob sa mga tag:

Naka-highlight na teksto at hindi naka-highlight na teksto.

Idagdag ang

class = "highlight"
o ibang klase sa elemento ng span upang estilahin ang teksto gamit ang CSS (hal.,

class = "highlight">
) Ang span element ay walang kinakailangang mga katangian, ngunit ang tatlo na ang pinaka kapaki-pakinabang ay kapareho ng mga elemento ng div:

estilo

klase

id

Gamitin ang span kung gusto mong baguhin ang estilo ng nilalaman nang hindi tinutukoy ang nilalaman na bilang isang bagong elemento ng antas ng block sa dokumento.

Halimbawa, kung gusto mo ang ikalawang salita ng isang heading na h3 ay mapula, maaari mong palibutan ang salitang iyon sa isang elemento ng span na mag-style na salita bilang pulang teksto. Ang salita ay nananatiling bahagi ng h3 elemento, ngunit ngayon ay nagpapakita din ng pula:

Ito ang Aking Galing Headline