Si të përdorni Elementët Span dhe Div HTML

Përdorni hapësirën dhe div me CSS për stilin më të madh dhe kontrollin e faqeve.

Shumë njerëz që janë të rinj në dizajnimin e uebit dhe HTML / CSS përdorin elementet dhe

në mënyrë të ndërsjellë ndërsa ndërtojnë faqe të internetit. Realiteti, megjithatë, është që secili nga këto elementë HTML të shërbejë për qëllime të ndryshme. Të mësuarit për të përdorur secilën prej tyre për qëllimin e synuar do t'ju ndihmojë të zhvilloni faqet më të pastra të internetit të cilët kodi është më i lehtë për tu menaxhuar në përgjithësi.

Përdorimi i elementit

Elementi div përcakton ndarjet logjike në faqen tuaj web.

Është në thelb një kuti në të cilën mund të vendosni elementë të tjerë HTML që logjikisht shkojnë së bashku. Një ndarje mund të ketë elemente të shumëfishta në të, si paragrafët, titujt, listat, lidhjet, imazhet etj. Mund të ketë edhe ndarje të tjera brenda saj për të siguruar strukturë dhe organizim shtesë në dokumentin tuaj HTML.

Për të përdorur elementin div, vendosni një tag

të hapur përpara zonës së faqes tuaj që dëshironi si një ndarje të veçantë dhe një tag të ngushtë pas tij:

përmbajtja e div

Nëse zona e faqes tënde ka nevojë për disa informata shtesë që do t'i përdorni për të stilit me CSS më vonë, mund të shtoni një zgjedhës id (p.sh.,

id = "myDiv">), ose një përzgjedhës klase (p.sh., class = "bigDiv">). Të dy këto atribute pastaj mund të përzgjidhen duke përdorur CSS ose modifikuar duke përdorur JavaScript. Praktikat më të mira aktuale priren drejt përdorimit të selektorëve të klasës në vend të ID, pjesërisht për shkak të asaj se si janë selektorë specifikë të ID. Në të vërtetë, megjithatë, ju mund të përdorni ose një dhe mund edhe të japë një ndarje si një ID dhe një përzgjedhës të klasës.

Kur përdorni

Versus

Elementi div është i ndryshëm nga elementi i seksionit HTML5 sepse nuk i jep përmbajtjes së mbyllur ndonjë kuptim semantik. Nëse nuk jeni i sigurt nëse blloku i përmbajtjes duhet të jetë një div ose një seksion, mendoni se për çfarë qëllimi të elementit dhe përmbajtjes ju ndihmon të vendosni se cilat për të përdorur:

  • Nëse keni nevojë për elementin thjesht për të shtuar stilet në atë zonë të faqes, duhet të përdorni elementin div.
  • Nëse përmbajtja që duhet të përmbajë ka një fokus të veçantë dhe mund të qëndrojë më vete, ju mund të dëshironi të përdorni elementin seksional në vend.

Në fund të fundit, të dy divs dhe seksionet sillen goxha të ngjashme dhe ju mund të jepni secilën prej tyre atribut vlerat dhe stilin e tyre me CSS për të marrë pamjen e faqes tuaj që ju nevojitet. Të dyja këto janë elemente të nivelit të bllokut.

Duke përdorur Elementin

Elementi i hapësirës është një element i linjës në parazgjedhje. Kjo e bën atë të ndarë nga elementët e div dhe të seksionit. Elementi span shpesh përdoret për të përfunduar një pjesë specifike të përmbajtjes, normalisht, për t'i dhënë një "hundë" shtesë që mund të organizohet më vonë. Përdorur me CSS, ajo mund të ndryshojë stilin e tekstit që mbyll; megjithatë, pa ndonjë atributet e stilit, elementi span vetëm nuk ka efekt në tekst në të gjitha.

Ky është dallimi kryesor midis hapësirës dhe elementëve të div. Siç u përmend më lart, elementi i dytë përfshin një pushim paragrafi, ndërsa elementi span vetëm tregon shfletuesit për të aplikuar rregulla të lidhura me stilin CSS në atë që mbyllet nga tags :


Tekst i theksuar dhe teksti jo i theksuar.

Shto klasën = "highlight" ose klasë tjetër në elementin span për të stiluar tekstin me CSS (p.sh., class = "highlight">).

Elementi span nuk ka atribute të kërkuara, por të trejat që janë më të dobishme janë të njëjta me ato të elementit div:

  • stil
  • klasë
  • id

Përdor hapësirën kur dëshiron të ndryshosh stilin e përmbajtjes pa definuar atë përmbajtje si një element të ri të nivelit të bllokut në dokument.

Për shembull, nëse doni që fjala e dytë e një titulli h3 të jetë e kuqe, mund ta rrethoni atë fjalë me një element span që do ta stilonte atë fjalë si tekst të kuq. Fjala ende mbetet pjesë e elementit h3, por tani gjithashtu shfaqet në të kuqe:

Ky është titulli im i tmerrshëm

Redaktuar nga Jeremy Girard më 2/2/17