Skip to main content

Izmantojot Span un Div HTML elementus ar CSS Web dizainā

Anonim

Daudzi cilvēki, kas ir jauni tīmekļa dizains un HTML / CSS izmanto un

elementi savstarpēji aizstājami, jo tie izveido tīmekļa lapas. Tomēr realitāte ir tā, ka katrs no šiem HTML elementiem kalpo dažādiem mērķiem. Mācīšanās izmantot katru no saviem paredzētajiem mērķiem palīdzēs jums izveidot tīrākas tīmekļa lapas, kuru kodu vieglāk pārvaldīt kopumā.

Izmantojot
Elements

Div elements definē loģiskās šķelšanās jūsu tīmekļa lapā. Tas ir būtībā lodziņš, kurā varat ievietot citus HTML elementus, kas loģiski iet kopā. Sadalījumam var būt vairāki citi elementi, piemēram, rindkopas, virsraksti, saraksti, saites, attēli u.c.. Tajā pat var būt citas sadaļas iekšpusē, lai jūsu HTML dokumentā nodrošinātu papildu struktūru un organizāciju.

Lai izmantotu div elementu, novietojiet atvērtu

atzīmējiet vietni, kuru vēlaties kā atsevišķu sadaļu, un tuvu
atzīme pēc tā:

satura div

Ja jūsu lapas apgabalam ir nepieciešama papildu informācija, kuru jūs vēlāk izmantosit CSS stilā, varat pievienot id atlasītāju (piemēram,

id = "myDiv">

) vai klases atlasītājs (piemēram,

class = "bigDiv">

) Abus šos atribūtus pēc tam var atlasīt, izmantojot CSS vai modificējot, izmantojot JavaScript. Pašreizējās labākās prakses pamatā ir klases atlasītāju izmantošana ID vietā, daļēji tāpēc, ka ir īpašie ID atlasītāji. Patiesībā, tomēr jūs varētu izmantot vienu un pat var piešķirt dalījumu gan ID, gan klases atlasītāju. Kad to izmantot
Pret

Div elements atšķiras no HTML5 sadaļas elementa, jo tam nav pievienota satura semantiska nozīme. Ja neesat pārliecināts, vai satura bloks ir divs vai sadaļa, domā par to, ko elementa un satura mērķis ir, lai palīdzētu jums izlemt, ko izmantot:

  • Ja jums ir nepieciešams elements, lai vienkārši pievienotu stilus šai lapai, jums vajadzētu izmantot div elementu.
  • Ja saturam, kas jāiekļauj, ir īpašs fokuss un tas varētu būt viens pats, iespējams, vēlēsities izmantot sadaļas elementu.

Galu galā gan divi posmi, gan iedaļas darbojas diezgan līdzīgi, un jūs varat dot jebkuram no tiem atribūtu vērtības un stilu ar CSS, lai iegūtu nepieciešamo vietnes izskatu. Abi ir bloku līmeņa elementi.

Izmantojot Elements

Pēc noklusējuma span elements ir inline elements. Tas to nošķir no div un sadaļas elementiem. Span elementu bieži izmanto konkrēta satura gabala, parasti teksta, aploksnē, lai piešķirtu tai papildu "āķi", kuru var veidot vēlāk. Izmantots ar CSS, tas var mainīt tā teksta stilu; tomēr bez stila atribūtiem vienīgais span elements neietekmē tekstu vispār.

Šī ir galvenā atšķirība starp span un diviem elementiem. Kā jau minēts iepriekš, div elementā ir iekļauts punkts pārtraukums, savukārt span elements tikai norāda pārlūkprogrammai, ka saistītās CSS stila noteikumi tiek piemēroti tam, kas ir pievienots tags:

Izceltais teksts un neatzīmēts teksts.

Pievienojiet

klase = "izcelt"

vai cita veida klasei, lai veidotu tekstu ar CSS (piemēram,

class = "highlight">

). Span elementam nav nepieciešamo atribūtu, bet tie, kas ir visnoderīgākie, ir tādi paši kā div elementa elementi:

  • stils
  • klase
  • id

Izmantojiet atstarpi, ja vēlaties mainīt satura stilu, nenosakot šo saturu kā jaunu bloka līmeņa elementu dokumentā.

Piemēram, ja jūs vēlaties, lai h3 virsraksta otrais vārds būtu sarkans, varat šo vārdu iespiest ar garuma elementu, kas šo vārdu izveidotu kā sarkanu tekstu. Šis vārds joprojām ir daļa no h3 elementa, bet tagad arī parādās sarkanā krāsā:

Šī ir mana satriecošā virsraksts