Cara Nggunakake Elemen Span lan Div HTML

Gunakake span lan div karo CSS kanggo gaya luwih lan kontrol tata letak.

Akeh wong sing anyar kanggo desain web lan HTML / CSS nggunakake lan

elemen sing saling diganti nalika mbangun kaca web. Kasunyatan, manawa saben elemen HTML iki ngawasi tujuan sing beda-beda. Learning nggunakake saben tujuane sing dimaksud bakal mbantu ngembangake kaca web luwih alus sing kode luwih gampang ngatur sakabehe.

Nggunakake unsur

Unsur div nemtokake bagean logis ing kaca web sampeyan.

Iku pancene sawijining kothak ing ngendi sampeyan bisa nempatake unsur HTML liyane sing kanthi logika bebarengan. Divisi bisa duwe pirang-pirang elemen liyane, kayata paragraf, judhul, dhaptar, pranala, gambar, lan liya-liyane. Malah bisa uga duwe bagean liyane ing njero kanggo menehi struktur lan organisasi tambahan ing dokumen HTML sampeyan.

Kanggo nggunakake unsur div, nyelehake tag

sing mbukak sadurunge area halaman sing sampeyan pengin minangka divisi kapisah, lan tag sing cedhak sawise:

isi div

Yen area kaca sampeyan butuh sawetara informasi tambahan sing bakal digunakake kanthi gaya nganggo CSS mengko, sampeyan bisa nambah pamilih id (eg,

id = "myDiv">), utawa pemilih kelas (contone, class = "bigDiv">). Loro atribut kasebut banjur bisa dipilih nganggo CSS utawa diowahi kanthi nggunakake JavaScript. Saiki praktik-praktik sing paling apik kanggo nggunakake pemilih kelas tinimbang ID, sabanjure amarga kepilih ID sing dipilih. Nanging, sampeyan bisa nggunakake salah siji lan malah menehi divisi loro ID lan pemilih kelas.

Nalika Nggunakake

Versus

Unsur div beda saka unsur bagean HTML5 amarga ora menehi isi sing kasedhiya ing sembarang makna semantic. Yen sampeyan ora yakin apa pemblokiran isi kudu div utawa bagean, pikirake babagan apa waé unsur lan isi kanggo mbantu arep nggunakake:

  • Yen sampeyan perlu unsur mung kanggo nambah gaya menyang area kaca, sampeyan kudu nggunakake unsur div.
  • Yen isi sing wis ana nduweni fokus sing béda lan bisa ngadeg dhewe, sampeyan uga pengin nggunakake unsur bagean.

Wekasanipun, divs lan seksi-aktual uga padha lan sampeyan bisa menehi salah siji saka sing ngubungake nilai-nilai lan gaya karo CSS kanggo nggoleki tampilan situs sing sampeyan butuhake. Loro-lorone iki minangka unsur tingkat blok.

Nggunakake Elemen

Unsur span minangka unsur inline kanthi standar. Iki nyetel saka unsur div lan bagean. Unsur span asring digunakake kanggo mbungkus potongan tartamtu isi, teks biasane, kanggo menehi tambahan "pancing" sing bisa diganti maneh. Digunakake nganggo CSS, bisa ngganti gaya teks kasebut; Nanging, tanpa atribut gaya, unsur span dhewe ora duwe pangaruh ing teks.

Iki minangka prabédan utama antarane span lan unsur div. Minangka kasebut ing ndhuwur, unsur div kalebu sawijining break pahlawan, dene elemen span mung ngandhani browser kanggo ngatur aturan CSS sing ana hubungane karo apa sing dilampirake dening tags:


Teks sing ditampilake lan teks sing ora disorot.

Nambah kelas = "padhang" utawa kelas liyane menyang elemen jembar supaya gaya teks nganggo CSS (contone, class = "highlight">).

Unsur span ora ana atribut sing dibutuhake, nanging telu sing paling migunani padha karo unsur div:

  • gaya
  • kelas
  • id

Gunakake span nalika sampeyan pengin ngganti gaya isi tanpa nemtokake isi kasebut minangka elemen tingkat blok anyar ing dokumen kasebut.

Contone, yen sampeyan pengin tembung kapindho saka h3 judhul dadi abang, sampeyan bisa ngubengi tembung kasebut kanthi unsur span sing bakal ngganti tembung kasebut minangka teks abang. Tembung isih tetep dadi bagian saka unsur h3, nanging saiki uga katon abang:

Iki Kula Awesome Headline

Diedit dening Jeremy Girard ing 2/2/17