Kiel Uzi la Span kaj Div HTML Elementoj

Uzu span kaj div kun CSS por pli granda stilo kaj aranĝo.

Multaj homoj, kiuj estas novaj al dezajno retejo kaj HTML / CSS uzas la elementojn kaj

en interŝanĝebleco kiam ili kreas retpaĝojn. La realaĵo, tamen, estas, ke ĉiu el ĉi tiuj HTML-elementoj servas malsamajn celojn. Lerni uzi ĉiun por sia intencita celo helpos vin evoluigi pli purajn retpaĝojn, kiuj kodo pli facile administras ĝenerale.

Uzante la
Elemento

La div-elemento difinas logikajn dividojn en via retpaĝaro.

Ĝi estas esence skatolo en kiu vi povas meti aliajn HTML-elementojn, kiuj logike iras kune. Divido povas havi multajn aliajn elementojn en ĝi, kiel alineoj, rubrikoj, listoj, ligiloj, bildoj ktp. Ĝi povas eĉ havi aliajn dividojn ene de ĝi por aldoni aldonan strukturon kaj organizon al via HTML-dokumento.

Por uzi la elementon de div, metu malfermitan etikedon

antaŭ la areo de via paĝo, kiun vi deziras kiel apartan dividon kaj fermu etikedon post ĝi:

enhavoj de div

Se la areo de via paĝo bezonas iujn pliajn informojn, kiujn vi poste uzos al stilo kun CSS, vi povas aldoni id-selectoron (ekz.

id = "myDiv">), aŭ klaso-elektilo (ekz., class = "bigDiv">). Ambaŭ ĉi tiuj atributoj povas esti elektitaj per CSS aŭ modifitaj per JavaScript. Nunaj plej bonaj praktikoj apogas al uzado de klasaj elektiloj anstataŭ IDoj, parte pro kiom specifaj ID-elektiloj estas. Fakte vi povus uzi ĉu unu kaj eĉ povas doni dividon kaj ID kaj klasan elektilon.

Kiam Uzi

Versus

La div-elemento estas malsama de la HTML5-sekcio-elemento ĉar ĝi ne donas la enhavitan enhavon ajnan semantikan signifon. Se vi ne certas ĉu la bloko de enhavo devus esti div aŭ sekcio, pensu pri kio la celo de la elemento kaj la enhavo estas helpi vin decidi kiun uzi:

  • Se vi bezonas la elementon simple aldoni stilojn al tiu areo de la paĝo, vi devas uzi la div-elementon.
  • Se la enhavo enhavita havas klaran fokuson kaj povus stari sur si mem, vi eble volas uzi la sekcion-elementon anstataŭe.

Finfine, ambaŭ divoj kaj sekcioj kondutas bele simile kaj vi povas doni al ili el ili atributajn valorojn kaj stiligi ilin per CSS por akiri la aspekton de via retejo, kiun vi bezonas. Ambaŭ ĉi tiuj estas blokaj nivelaj elementoj.

Uzante la Elemento

La spaca elemento estas enlinia elemento defaŭlte. Ĉi tio ĝin apartigas de la div kaj sekciaj elementoj. La spaca elemento ofte estas uzata por enmeti specifan pecon de enhavo, normale tekston, por doni al ĝi kroman "hokon" kiu poste povas esti stiligita. Uzata per CSS, ĝi povas ŝanĝi la stilon de la teksto, kiun ĝi ligas; tamen, sen ia ajn atributoj de stilo, la interna elemento nur havas neniun efikon en teksto.

Ĉi tiu estas la ĉefa diferenco inter la spaco kaj la divaj elementoj. Kiel menciita supre, la div-elemento inkluzivas alinean rompon, dum la daŭra elemento nur diras ke la retumilo apliki asociitajn CSS-normajn regulojn al tio, kio estas fermita per la etikedoj :


Emfazita teksto kaj ne-reliefigita teksto.

Aldonu la klaso = "reliefigi" aŭ alian klason al la interna elemento por stiligi la tekston kun CSS (ekz. Class = "highlight">).

La limiga elemento ne bezonas atributojn, sed la tri, kiuj estas la plej utilaj, estas samaj kiel tiuj de la div elemento:

  • stilo
  • klaso
  • id

Uzu spanon kiam vi volas ŝanĝi la stilon de enhavo sen difini tiun enhavon kiel novan blok-nivelon en la dokumento.

Ekzemple, se vi deziras, ke la dua vorto de h3-rubriko estu ruĝa, vi povus ĉirkaŭigi tiun vorton per etendita elemento, kiu stiligos tiun vorton kiel ruĝan tekston. La vorto ankoraŭ restas parton de la h3-elemento, sed nun ankaŭ montras en ruĝa:

Ĉi tio estas Mia Awesome Titolo

Redaktita de Jeremy Girard la 2/2/17