Kaip naudotis Span ir Div elementais

Naudokite span and div su CSS, kad padidintumėte stilių ir išdėstymo kontrolę.

Daugelis interneto svetainių kūrėjams ir HTML / CSS naudojantiems elementus naudoja elementus ir

vienodai, nes kuria tinklalapius. Vis dėlto realybė yra tai, kad kiekvienas iš šių HTML elementų tarnauja skirtingiems tikslams. Mokymasis naudoti kiekvieną pagal numatytą paskirtį padės sukurti švaresnius tinklalapius, kurių kodą lengviau valdyti.

Naudojant elementą

Div elementas apibrėžia loginius skyrius jūsų tinklalapyje.

Iš esmės tai langelis, kuriame galite įdėti kitus HTML elementus, kurie logiškai eina kartu. Skyriuje gali būti keli kiti elementai, pvz., Paragrafai, antraštės, sąrašai, nuorodos, vaizdai ir tt. Jame gali būti kitų skirtumų viduje, kad jūsų HTML dokumentas suteiktų papildomą struktūrą ir organizaciją.

Norėdami naudoti div elementą, atidarykite žymę

prieš pageidaujamo puslapio plotą kaip atskirą skyrių ir uždarą žymą po jo:

turinys div

Jei jūsų puslapio plote reikalinga tam tikra papildoma informacija, kurią vėliau naudosite CSS stiliui, galite pridėti id selektorių (pvz.,

id = "myDiv">) arba klasės parinkiklis (pvz., class = "bigDiv">). Tada abu šie požymiai gali būti parinkti naudojant CSS arba modifikuoti naudojant "JavaScript". Dabartinė geroji patirtis priklauso nuo klasės selektorių naudojimo, o ne su identifikatoriais, iš dalies dėl to, kad yra specifinių ID rinkiklių. Tiesą sakant, jūs galite naudoti vieną ir netgi galite padalinti tiek ID, tiek klasės selektorių.

Kada naudoti

Versus

Div elementas skiriasi nuo HTML5 sekcijos elemento, nes jis nesuteikia pridėto turinio jokios semantinės reikšmės. Jei nesate tikri, ar turinio blokas turėtų būti div arba skirsnis, pagalvokite apie tai, kokiu elemento ir turinio tikslas yra padėti jums nuspręsti, kokį naudoti:

  • Jei jums reikia elemento, tiesiog pridėti stilių į tą puslapio plotą, turėtumėte naudoti div elementą.
  • Jei norimo turinio skiriamasis dėmesys skiriamas tam tikram tikslui, galbūt norėsite naudoti skirsnio elementą.

Galiausiai, tiek divos, tiek sekcijos elgiasi gana panašiai ir jūs galite duoti bet kurį iš jų atributų vertes ir stiliaus juos su CSS, kad gautumėte jums reikalingą jūsų svetainės išvaizdą. Abi šios yra bloko lygio elementai.

Naudodamiesi elementu

Span elementas yra numatytasis elementas. Tai išsiskiria iš div ir sekcijos elementų. Span elementas dažnai naudojamas konkretaus turinio, paprastai teksto, apvyniojimui tam, kad būtų sukurtas papildomas "kablys", kuris vėliau gali būti stilizuotas. Naudojamas su CSS, jis gali pakeisti teksto stilių, kurį jis aptraukia; tačiau be stiliaus atributų vien tik spinduliuojantis elementas apskritai neturi įtakos tekstui.

Tai yra pagrindinis skirtumas tarp span ir div elementų. Kaip minėta pirmiau, div elementas apima pastraipos pertrauką, o span elementas tik nurodo naršyklę taikyti susijusias CSS stiliaus taisykles prie to, kas yra įtraukta į žymeles:


Pažymėtas tekstas ir nepasirašytas tekstas.

Pridėkite class = "highlight" arba kitą klasę į span elementą, kad stiliaus tekstas su CSS (pvz., Class = "highlight">).

Span elementas neturi reikalingų atributų, tačiau trys, kurie yra labiausiai naudingi, yra tokie patys kaip div elemento elementai:

  • stilius
  • klasė
  • id

Naudokite "span", kai norite pakeisti turinio stilių, nenurodydamas šio turinio kaip naujo bloko lygio elemento dokumente.

Pavyzdžiui, jei norite, kad antrasis žodis "h3" pavadinime būtų raudonas, šį žodį galėtumėte suprasti su spindžiu elementu, kuris šį žodį sutaptų kaip raudoną tekstą. Šis žodis tebėra h3 elemento dalis, tačiau dabar jis taip pat rodomas raudonai:

Tai yra mano nuostabi antraštė

Redagavo Jeremy Girard 2/2/17