Hvernig á að nota Span og Div HTML Elements

Notaðu span og div með CSS fyrir meiri stíl og skipulagsstýringu.

Margir sem eru nýir við vefhönnun og HTML / CSS nota og

þættina á víxl eins og þeir byggja upp vefsíðum. Staðreyndin er hins vegar að hvert þessara HTML þætti þjóna mismunandi tilgangi. Að læra að nota hvert fyrir það sem ætlað er, mun hjálpa þér að þróa hreinari vefsíður þar sem kóða er auðveldara að stjórna öllu.

Notkun
Element

Div-þátturinn skilgreinir rökréttar deildir á vefsíðunni þinni.

Það er í grundvallaratriðum kassi þar sem þú getur sett aðra HTML þætti sem rökrétt fara saman. A deild getur haft marga aðra þætti í henni, eins og málsgreinar, fyrirsagnir, listi, tengla, myndir osfrv. Það getur jafnvel haft aðrar deildir inni í því til að veita frekari uppbyggingu og skipulagningu í HTML skjalið þitt.

Til að nota div frumefni skaltu setja opna

tag fyrir svæðið á síðunni þinni sem þú vilt sem aðskild deild og loka merkið eftir það:

innihald div

Ef svæðið á síðunni þinni þarfnast viðbótarupplýsinga sem þú notar til að stilla með CSS seinna geturðu bætt við kennimerki (td,

id = "myDiv">) eða bekkjarvelta (td flokki = "bigDiv">). Báðir þessir eiginleikar geta síðan verið valnar með því að nota CSS eða breytt með JavaScript. Núverandi bestu starfsvenjur halla sér í átt að því að nota kennara í staðinn fyrir auðkenni, að hluta til vegna þess hvernig tilteknar auðkenni valendur eru. Í sannleika geturðu þó notað annað hvort og getur jafnvel gefið skiptingu bæði auðkenni og kennara.

Hvenær á að nota

móti

Div þátturinn er frábrugðin HTML5 kafla þátturinn því það gefur ekki meðfylgjandi efni einhver merkingartækni merkingu. Ef þú ert ekki viss um hvort innihaldsefnið ætti að vera div eða hluti skaltu hugsa um hvað tilgangur frumefnisins og efnisins er til að hjálpa þér að ákveða hver á að nota:

  • Ef þú þarft þátturinn einfaldlega til að bæta við stíl við það svæði síðunnar ættir þú að nota div frumefni.
  • Ef innihaldið sem á að innihalda hefur sérstakt fókus og gæti staðið á eigin spýtur, gætirðu viljað nota hluti þátturinn í staðinn.

Að lokum hegða sér bæði deildir og köflum á svipaðan hátt og þú getur gefið öðrum þeim eiginleikum og stíll þau með CSS til að fá útlit vefsvæðis þíns sem þú þarft. Báðir þessir eru blokkarþættir.

Notkun Element

Spannþátturinn er sjálfvirkur þáttur. Þetta setur það í sundur frá div og hluta þætti. Spennubúnaðurinn er oft notaður til að vefja tiltekið efni, venjulega texta, til að gefa það viðbótar "krók" sem hægt er að stilla síðar. Notað með CSS, það getur breytt stíll textans sem það encloses; Hins vegar, án þess að stilla eiginleika, hefur span frumefni einn engin áhrif á texta yfirleitt.

Þetta er aðal munurinn á span og div þættirnar. Eins og áður hefur komið fram inniheldur div-þátturinn punktabrot, en spjaldþátturinn segir aðeins vafranum að tengja CSS stíl reglur við það sem fylgir með tags:


Hápunktur texti og ómerktur texti.

Bættu við bekknum = "hápunktur" eða annarri tegund í þætti til að stilla textann með CSS (td flokki = "hápunktur">).

The span frumefni hefur engin krafist eiginleika, en þrír sem eru gagnlegustu eru þau sömu og div deildarinnar:

  • stíl
  • bekknum
  • id

Notaðu spennu þegar þú vilt breyta stíl efnisins án þess að skilgreina það sem nýtt blokkarnúmer í skjalinu.

Til dæmis, ef þú vilt að annað orðið h3 fyrirsögn sé rautt, gætirðu umkringt orðið með spjaldþætti sem myndi stilla þetta orð sem rautt texta. Orðið er enn hluti af h3 frumefni, en nú birtist hún einnig í rauðu:

Þetta er ógnvekjandi fyrirsögnin mín

Breytt af Jeremy Girard á 2/2/17