Span ja Div HTML-elementide kasutamine koos CSS-iga veebidisainis

click fraud protection

Divs ja ulatub pole veebilehtede koostamisel omavahel asendatavad. Mõlemal on erinevad eesmärgid ja teadmine, millal neid kasutada, aitab teil välja töötada puhtad ja hõlpsasti hallatavad veebisaidid.

Div-elemendi kasutamine

Divs defineerige oma veebilehel loogilised jaotused. A div—Jagamiseks mõeldud lühike - on põhimõtteliselt kast, kuhu saate paigutada muud HTML-elemendid mis kuuluvad kokku. Jaotises võib olla mitu muud elementi, näiteks lõigud, pealkirjad, loendid, lingid, pildid jne. Sellel võib olla isegi muid jaotusi, et pakkuda täiendavat struktuuri ja korraldust.

Kasutamiseks div element, asetage avatud märgend enne oma lehe ala, mille soovite eraldi jaotusena, ja sulgemine 

 silt selle järel:

div sisu sisu

Kui kujundate selle ala CSS-iga, saate selle lisada ID valija avatava div-märgendi juurde:


Või võite lisada klassi valija:


Seejärel saate nende elementidega töötada CSS-is või JavaScriptis.

Praegused parimad tavad kalduvad kasutama ID-de asemel klassivalijaid, osaliselt sellepärast, kui konkreetsed ID-valijad on. Mõlemad on siiski vastuvõetavad ja võite isegi anda a

instagram viewer
div nii ID kui ka klassi valija.

Divs või jaotised?

The div element erineb HTML5jaotises element, sest see ei anna suletud sisule mingit semantilist tähendust. Kui te pole kindel, kas sisuplokk peaks olema a div või a jaotises, mõelge elemendi ja sisu eesmärgi üle.

  • Kui vajate elementi lihtsalt selle lehe alale stiilide lisamiseks, peaksite kasutama nuppu div element.
  • Kui sisul on selge fookus ja see võib iseseisvalt seista, kaaluge selle kasutamist jaotises selle asemel element.

Lõppkokkuvõttes mõlemad divs ja sektsioonides käituge sarnaselt ja võite anda neile mõlemale atribuudid ja stiilida neid CSS-iga. Mõlemad on plokitaseme elemendid.

Spansi kasutamine

Span on vaikimisi sisemine element, erinevalt div ja jaotises elemendid. The span Elementi kasutatakse tavaliselt konkreetse sisutüki, näiteks teksti, pakkimiseks, et anda sellele täiendav konks, mida saate stiilide lisamiseks kasutada. Kuid ilma stiiliatribuutideta span ei mõjuta teksti üldse.

Teine erinevus span ja div elemendid on see, et div element sisaldab lõigu vahet, samas kui span element käsib brauseril rakendada seotud CSS-i stiilireegleid ka sellele, mis on sildid:


Esiletõstetud tekst  ja esiletõstmata tekst.



Võite lisada.

klass = "esiletõstmine"

vms span element CSS-iga teksti kujundamiseks.

Span-elemendil pole nõutavaid atribuute, kuid kolm kõige kasulikumat on samad, mis atribuudil div element:

  • stiil
  • klass
  • ID

Kasutage span kui soovite muuta sisu stiili, määramata seda sisu uuena plokitaseme element dokumendis.

Näiteks kui soovite teise sõna h3 punase pealkirjaga, võite selle sõna ümbritseda tähega span element, mis stiiliks selle sõna punase tekstina. Sõna on endiselt osa h3 element, kuid kuvatakse punasega.

instagram story viewer