Span un Div HTML elementu izmantošana ar CSS tīmekļa dizainā

click fraud protection

Divs un laidumi nav savstarpēji aizstājami tīmekļa lapu veidošanā. Katrs no tiem kalpo dažādiem mērķiem, un, zinot, kad tos izmantot, tas palīdzēs jums izveidot tīras, viegli pārvaldāmas vietnes.

Div elementa izmantošana

Divs definēt loģiskās sadalījumus savā tīmekļa lapā. A div- īss sadalīšanai - būtībā ir lodziņš, kurā varat ievietot citus HTML elementi kas pieder kopā. Sadalījumā var būt vairāki citi elementi, piemēram, rindkopas, virsraksti, saraksti, saites, attēli utt. Tā iekšpusē var būt pat citas nodaļas, lai nodrošinātu papildu struktūru un organizāciju.

Lai izmantotu div elements, novietojiet atvērtu tagu pirms lapas apgabala, kuru vēlaties izveidot kā atsevišķu sadalījumu, un aizvēršanu 

 tagu pēc tā:

div. saturs

Ja veidosit šo apgabalu ar CSS, varat pievienot ID atlasītāja atvēršanas div tagam:


Vai arī varat pievienot klases atlasītāju:


Pēc tam jūs varat strādāt ar šiem elementiem CSS vai JavaScript.

Pašreizējā paraugprakse ir vērsta uz klases selektoru izmantošanu ID vietā, daļēji tāpēc, ka ir specifiski ID atlasītāji. Jebkurš no tiem tomēr ir pieņemams, un jūs pat varat dot

instagram viewer
div gan ID, gan klases atlasītājs.

Divs vai sadaļas?

The div elements atšķiras no HTML5sadaļā elementu, jo tas nedod slēgtajam saturam nekādu semantisku nozīmi. Ja neesat pārliecināts, vai satura blokam jābūt: div vai a sadaļā, padomājiet par elementa un satura mērķi.

  • Ja jums ir nepieciešams elements, lai vienkārši pievienotu stilus šajā lapas apgabalā, jums vajadzētu izmantot div elements.
  • Ja saturam ir īpaša uzmanība un tas varētu palikt pats par sevi, apsveriet iespēju izmantot sadaļā tā vietā.

Galu galā abi divs un sadaļās izturieties līdzīgi, un jūs varat piešķirt kādu no šiem atribūtiem un veidot tos ar CSS. Abi ir bloku līmeņa elementi.

Spans izmantošana

Span atšķirībā no noklusējuma ir inline elements pēc noklusējuma div un sadaļā elementi. The laidums elements parasti tiek izmantots, lai ietītu noteiktu satura gabalu, piemēram, tekstu, lai piešķirtu tam papildu āķi, kuru varat izmantot stilu pievienošanai. Tomēr bez jebkādiem stila atribūtiem laidums vispār neietekmē tekstu.

Vēl viena atšķirība starp laidums un div elementi ir tas, ka div elements ietver rindkopu pārtraukumu, bet laidums elements pārlūkprogrammai tikai liek piemērot saistītos CSS stila noteikumus tam, ko ietver tagi:


Izceltais teksts  un neizcelts teksts.



Jūs varētu pievienot.

klase = "izcelt"

vai līdzīgi laidums elements teksta ieveidošanai ar CSS.

Span elementam nav nepieciešamo atribūtu, bet trīs visnoderīgākie ir tādi paši kā div elements:

  • stils
  • klasē
  • ID

Izmantot laidums kad vēlaties mainīt satura stilu, nenosakot šo saturu kā jaunu bloka līmeņa elements dokumentā.

Piemēram, ja vēlaties otro vārdu h3 virsraksts ir sarkans, jūs varētu apņemt šo vārdu ar a laidums elements, kas veidotu šo vārdu kā sarkanu tekstu. Šis vārds joprojām ir daļa no h3 elements, bet tiks parādīts sarkanā krāsā.

instagram story viewer