Kif tuża l-Elementi Span u Div HTML

Uża span u div b'CSS għal kontroll akbar ta 'stil u tqassim.

Ħafna nies li huma ġodda għad-disinn tal-web u l-HTML / CSS jużaw l-elementi u

b'mod indaqs kif jibnu paġni tal-web. Ir-realtà, madankollu, hija li kull wieħed minn dawn l-elementi HTML iservi għal skopijiet differenti. Tagħlim biex tuża kull wieħed għall-iskop maħsub tiegħu jgħinek tiżviluppa paġni tal-web aktar nodfa li l-kodiċi huwa aktar faċli biex jamministra b'mod ġenerali.

Uża l-Element

L-element div jiddefinixxi diviżjonijiet loġiċi fuq il-paġna web tiegħek.

Bażikament hija kaxxa fejn tista 'tpoġġi elementi HTML oħra li loġikament imorru flimkien. Diviżjoni jista 'jkollha elementi oħra multipli fiha, bħal paragrafi, intestaturi, listi, links, stampi, eċċ. Tista' saħansitra jkollha diviżjonijiet oħra ġewwa fiha biex tipprovdi struttura u organizzazzjoni addizzjonali lid-dokument HTML tiegħek.

Biex tuża l-element div, poġġi

tikketta miftuħa qabel l-erja tal-paġna tiegħek li trid bħala diviżjoni separata, u tikketta mill-qrib warajha:

kontenut ta 'div

Jekk l-erja tal-paġna tiegħek teħtieġ xi informazzjoni addizzjonali li tuża għall-istil mas-CSS aktar tard, tista 'żżid selettur id (eż.

id = "myDiv">), jew selettur tal-klassi (eż., klassi = "bigDiv">). Dawn iż-żewġ attributi jistgħu mbagħad jintgħażlu bl-użu ta 'CSS jew modifikati bl-użu ta' JavaScript. L-aħjar prattiki kurrenti jxaqilbu lejn l-użu ta 'seletturi tal-klassi minflok IDs, parzjalment minħabba l-mod kif huma magħżula speċifikament l-ID. Fil-verità, madankollu, tista 'tuża waħda u tista' saħansitra tagħti diviżjoni kemm ID kif ukoll selettur tal-klassi.

Meta tuża

Versus

L-element div huwa differenti mill-element tas-sezzjoni HTML5 minħabba li ma jagħti l-ebda kontenut semantiku lill-kontenut magħluq. Jekk m'intix ċert jekk il-blokk tal-kontenut għandux ikun div jew sezzjoni, aħseb dwar x'inhu l-iskop tal-element u l-kontenut biex jgħinuk tiddeċiedi liema tuża:

  • Jekk għandek bżonn l-element sempliċement biex iżżid stili għal dik iż-żona tal-paġna, għandek tuża l-element div.
  • Jekk il-kontenut li għandu jkun fih fokus distint u jista 'joqgħod waħdu, tista' tkun trid tuża l-element tas-sezzjoni minflok.

Fl-aħħar mill-aħħar, iż-żewġ divs u s-sezzjonijiet jġibu ruħhom pjuttost b'mod simili u tista 'tagħti xi waħda minnhom attribwixxi valuri u stilhom bis-CSS biex tikseb id-dehra tas-sit tiegħek li għandek bżonn. Dawn it-tnejn huma elementi ta 'livell ta' blokk.

Uża l-Element

L-element tal-firxa huwa element inline awtomatikament. Dan jiddistingwih mill-elementi tad-div u s-sezzjoni. L-element ta 'span spiss jintuża biex irażżel biċċa speċifika ta' kontenut, normalment test, biex tagħtiha "ganċ" addizzjonali li jista 'jkun imsejjaħ aktar tard. Użat bis-CSS, jista 'jibdel l-istil tat-test li jdawwar; madankollu, mingħajr ebda attribut ta 'stil, l-element ta' span waħdu m'għandux effett fuq it-test.

Din hija d-differenza ewlenija bejn il-firxa u l-elementi div. Kif imsemmi hawn fuq, l-element div jinkludi waqfa fil-paragrafi, filwaqt li l-element ta 'medda jgħid biss lill-browser biex japplika regoli ta' stil CSS assoċjati ma 'dak li hu magħluq mit-tags :


Test imdawwar u test mhux enfasizzat

Żid il-klassi = "enfasi" jew klassi oħra għall-element ta 'span biex tistudja t-test b'CSS (eż., Klassi = "jenfasizza">).

L-element ta 'span m'għandu l-ebda attribut meħtieġ, iżda t-tlieta li huma l-aktar utli huma l-istess bħal dawk tal-element div:

  • stil
  • klassi
  • id

Uża l-firxa meta trid tibdel l-istil tal-kontenut mingħajr ma tiddefinixxi dak il-kontenut bħala element ta ' blokk ġdid fid-dokument.

Per eżempju, jekk trid it-tieni kelma ta 'intestatura h3 li tkun ta' aħmar, tista 'timmarka dik il-kelma b'element ta' medda li tpoġġi dik il-kelma bħala test aħmar. Il-kelma tibqa 'parti mill-element h3, iżda issa tidher ukoll bl-aħmar:

Dan huwa headline tal-biża 'tiegħi

Editjat minn Jeremy Girard fit-2/2/17