Conas na hEilimintí HTML Span agus Div a úsáid

Bain úsáid as span and div le CSS le haghaidh stíl níos mó agus rialú leagan amach.

Úsáidtear go leor daoine atá nua le dearadh gréasáin agus HTML / CSS na heilimintí agus

in idirmhalartaithe agus iad ag tógáil amach leathanaigh ghréasáin. Is é an réaltacht, áfach, go bhfreastalaíonn gach ceann de na heilimintí HTML seo chun críocha éagsúla. Cabhróidh le foghlaim úsáid a bhaint as gach ceann dá chuspóir atá beartaithe leat leathanaigh ghréasáin níos glaine a fhorbairt a bhfuil cód níos éasca a bhainistiú go foriomlán.

Ag baint úsáide as an eilimint

Sainmhíníonn an ghné div rannáin loighciúla ar do leathanach gréasáin.

Go bunúsach tá bosca ann inar féidir leat eilimintí HTML eile a chur ar bun go loighciúil le chéile. Is féidir le heilimintí ilghnéitheacha eile a bheith ann, cosúil le míreanna, ceannteidil, liostaí, naisc, íomhánna, etc. Féadfaidh sé go mbeadh ranna eile ann taobh istigh d'fhonn struchtúr agus eagraíocht bhreise a sholáthar ar do dhoiciméad HTML.

Chun an ghné div a úsáid, cuir clibe

oscailte roimh réimse do leathanaigh ar mhaith leat mar rannán ar leithligh, agus clós dlúth tar éis é:

ábhar na div

Má tá roinnt eolais bhreise ag teastáil le réimse do leathanach a úsáidfidh tú chun stíl le CSS ina dhiaidh sin, is féidir leat roghnóir id a chur (eg,

id = "myDiv">), nó roghnóir ranga (m.sh., rang = "bigDiv">). Is féidir an dá cheann de na tréithe seo a roghnú ansin trí CSS a úsáid nó a mhodhnú trí úsáid a bhaint as JavaScript. Leanann na cleachtais is fearr atá ann faoi láthair chun úsáid a bhaint as roghnóirí ranga seachas IDanna, go páirteach mar gheall ar an gcaoi a bhfuil na sainithe roghnóirí ID. I bhfírinne, áfach, d'fhéadfá ceann a úsáid agus is féidir le rannán ID agus roghnóir ranga a roinnt fiú.

Nuair a Úsáid

Versus

Tá an ghné div difriúil ó eilimint alt HTML5 toisc nach dtugann sé brí siamantúil don ábhar iniata. Mura bhfuil tú cinnte ar chóir go mbeadh an bloc ábhar ina roinn nó ar roinn, smaoineamh ar cad é cuspóir an eilimint agus an t-ábhar chun cabhrú leat cinneadh a dhéanamh maidir le húsáid:

  • Más gá duit an eilimint ach stíleanna a chur leis an réimse sin den leathanach, ba chóir duit an ghné div a úsáid.
  • Má tá fócas ar leith ag an ábhar atá le fáil agus d'fhéadfadh sé seasamh ar a shon féin, b'fhéidir gur mhaith leat an eilimint rannáin a úsáid ina ionad.

I ndeireadh na dála, déanann an dá divs agus na rannóga iompar go maith mar an gcéanna agus is féidir leat luachanna tréith a thabhairt dóibh agus iad a stiúradh le CSS chun breathnú ar do shuíomh a theastaíonn uait. Is iad na heilimintí blocleibhéil iad araon.

Ag baint úsáide as an Eilimint

Is gné inlíne í an ghné réim de réir réamhshocraithe. Leagann sé seo amach ó na gnéithe div agus ailt. Úsáidtear an ghné réim go minic chun píosa sonrach ábhar a thíolacadh, de ghnáth téacs, chun "hook" breise a thabhairt dó is féidir a styled ina dhiaidh sin. Úsáidtear le CSS é, is féidir leis stíl an téacs a chuimsíonn sé a athrú; áfach, gan aon tréithe stíl, níl aon éifeacht ag an eilimint réim ar an téacs ar chor ar bith.

Is é seo an príomhdhifríocht idir an réimse agus na heilimintí div. Mar a luadh thuas, cuimsíonn an ghné div sos mír, ach níl an t-eilimint réime ach ag insint don bhrabhsálaí rialacha stíl CSS a bhaineann leis an méid atá faoi iamh ag na clibeanna a chur i bhfeidhm:


Téacs aibhsithe agus téacs neamhthreamaithe

Cuir an rang = "béim" nó an rang eile leis an ghné réim chun stíleáil an téacs le CSS (eg, class = "highlight">).

Níl tréithe riachtanacha ag an eilimint réim, ach is iad na trí cinn is mó a bhfuil an chuid is mó úsáideach leo siúd atá sa ghné div:

  • stíl
  • rang
  • id

Bain úsáid as réimse nuair is mian leat stíl an ábhair a athrú gan an t-ábhar sin a shainiú mar eilimint blocleibhéil nua sa doiciméad.

Mar shampla, más mian leat an dara focal de cheannteideal h3 a bheith dearg, d'fhéadfá an focal sin a thimpeallacht le heilimint réise a stílfí an focal sin mar théacs dearg. Tá an focal fós mar chuid den eilimint h3, ach anois taispeántar i dearg:

Is é seo mo Cheannlíne uamhnach

Arna eagarthóireacht ag Jeremy Girard ar 2/2/17