Hoe brûke de Span en Div HTML Elements

Brûk span en div mei CSS foar gruttere styl en layoutkontrôle.

In soad minsken dy't nij binne foar webûntwerp en HTML / CSS brûke de en

eleminten yn wikseljend as se websteeën bouwe. De wurklikheid is lykwols dat elk fan dizze HTML-eleminten ferskate doelen betsjinje. Learje elk foar har bepaalde doel helje jo ûntwikkelere websiden dy't koade makliker is om algemien te beheinen.

Brûk de
elemint

It div elemint definiearret logyske divyzjes ​​op jo webside.

It is yn haadsaak in fakje wêryn jo oare HTML-eleminten pleatse kinne, dy't logysk gegevens opnimme. In divyzje kin in meardere oare eleminten hawwe, lykas ôfdielingen, kopteksten, listen, keppels, ôfbyldings, ensfh. It kin sels oare divyzjes ​​yn binnen hawwe om oanfoljende struktuer en organisaasje oan jo HTML-dokumint te jaan.

Om it div elemint te brûken, set in iepen

tag foar it gebiet fan jo side dy't jo wolle as in aparte divyzje en tagelyk in ticht tag folgje:

ynhâld fan div

As it gebiet fan jo side in oantal oanfoljende ynformaasje nedich is dy't jo brûke wolle om te styl mei CSS te styljen, kinne jo in id selektearje (bgl.

id = "myDiv">), of in klasse selektor (bgl, class = "bigDiv">). Beide fan dizze eigenskippen kinne dan selektearre wurde mei CSS of wizige troch JavaScript. Aktuele bêste praktiken lykje op it brûken fan klasse-seleksjes yn plak fan ID's, yn diel fanwege hoe spesifike ID-seleksjes binne. Yn 'e wierheid kinne jo lykwols ien brûke en kinne sels in divyzje jaan as in ID en in klasse selektor.

Wannear jo

fersus brûke

It div elemint is oars as it elemint fan 'e HTML5-ôfdieling, omdat it gjin semantyske betsjutting de bepalende ynhâld jouwt. As jo ​​net wis binne oft it blok fan ynhâld in div of in paragraaf wêze moat, tinke oer hoe't it doel fan it elemint en de ynhâld jo helpe kinne jo beslute hoe't jo brûke kinne:

  • As jo ​​it elemint nedich hawwe om stilen oan dy gebiet fan 'e side te meitsjen, moatte jo it div elemint brûke.
  • As de ynhâld dy't bewarre bleaun is, hat in bepaald fokus en kin op himsels stean, dan kinne jo it seksje elemint ynstelle.

Lústerje, beide divyzjes ​​en paragrafen behannelje krekt lykas en jo kinne elk fan har attribje wearden en stjoere se mei CSS om it look fan jo side te meitsjen dy't jo nedich hawwe. Beide dêrfan binne blokstieneleminten.

Mei de elemint

It span-elemint is in ynliny-elemint foar standert. Dit set it apart út 'e div en paragrafen eleminten. It spanelegel wurdt faak brûkt om in spesifyk stikje ynhâld te wapjen, normaal tekst, om in ekstra "hook" te jaan dy't letter spesjalisearre wurde kin. Brûkt mei CSS, kin it de styl fan it tekst feroarje, dat it slachtoffert; Mar sûnder elke styl-attributen hat it spanelik allinich gjin effekt op tekst.

Dit is it haad ferskil tusken de span en de div-eleminten. As hjirboppe neamd wurdt, befettet it div-elemint in paragraafbrek, wylst it spanningsliel allinich de browser fertelt om tagonklik CSS-stylregels te aplicearjen oan wat is omskreaun troch de tags:


Hichte tekst en net-markearre tekst

Add the class = "highlight" of another class to the span element to style the text with CSS (eg class = "highlight">).

It spannende elemint hat gjin ferplichte attributen, mar de trije dy't de brûkber binne binne itselde as dy fan it div elemint:

  • styl
  • klasse
  • id

Spand brûke as jo de styl fan ynhâld wizigje wolle sûnder dat ynhâld te definiearjen as in nije blok-nivo- elemint yn it dokumint.

As jo ​​bygelyks it twadde wurd fan in h3 kopiearje wolle, kinne jo it wurd mei in spand elemint omskriuwe dat it wurd as read tekst sil styl wêze. It wurd bliuwt noch in diel fan it h3-elemint, mar tsjintwurdich is ek werjûn yn read:

Dit is myn Awesome Headline

Edited by Jeremy Girard on 2/2/17