Kuidas kasutada Spani ja Divi HTML-elemente

Suuremale stiilile ja paigutuskontrollile kasutage CSS-i span and div.

Paljud veebidisaini ja HTML / CSS-i kasutavad kasutavad ja

elemente vaheldumisi, kui nad veebilehti loovad. Kuid reaalsuseks on see, et igaüks neist HTML-i elementidest teenib erinevaid eesmärke. Õppimine kasutama kõiki oma ettenähtud otstarbel aitab teil luua puhtamaid veebisaite, kelle koodi on üldiselt lihtsam hallata.

Kasutades
elementi

Div-element määrab veebisaidile loogilised jagunemised.

Tegemist on põhimõtteliselt kastiga, kus saate paigutada teisi HTML-elemente, mis loogiliselt kokku puutuvad. Jaos võib olla mitu teist elementi, nagu lõikud, rubriigid, loendid, lingid, pildid jms. Sellel HTML-dokumendil võib olla ka teisi jagunemisi, et pakkuda täiendavat struktuuri ja organisatsiooni.

Div-elemendi kasutamiseks asetage avatud

silt enne oma lehe ala, mida soovite eraldiseisvaks jagamiseks, ja pärast seda sulgemiseks -tähist:

divi sisu

Kui teie lehe ala vajab mõnda lisateavet, mida hiljem CSS-i stiilides kasutate, saate lisada ID-valijat (nt

id = "myDiv">) või klassi valija (nt class = "bigDiv">). Mõlemad atribuudid saab siis valida CSS-i abil või muuta JavaScripti kasutades. Praegused parimad tavad sõltuvad ID-ide asemel klassi valijatest, osaliselt sellepärast, et on spetsiifilised ID-valijad. Tegelikult võite kasutada kas üht ja isegi jagada nii ID-d kui ka klassi valijat.

Millal kasutada

Versus

Div-element erineb HTML5-i sektsiooni elemendist, kuna see ei anna lisatud sisule semantilist tähendust. Kui te pole kindel, kas sisu blokeerimine peaks olema div või osa, mõelge, milline on elemendi ja sisu eesmärk aidata teil otsustada, mis kasutada:

  • Kui sul on lihtsalt elemendi lisamiseks selle lehe ala, peate kasutama div-elementi.
  • Kui sisaldatav sisu omab erilist tähelepanu ja võib olla üksinda, võiksite selle asemel kasutada sektsiooni elementi.

Lõppkokkuvõttes käituvad mõlemad divid ja sektsioonid üsna sarnaselt ja võite anda ühele neist atribuutide väärtused ja kujundada need CSS-iga, et saada oma saidi välimus, mida vajate. Mõlemad on ploki taseme elemendid.

Kasutades Element

Span-element on vaikimisi inline element. See muudab selle eraldiseisvaks divi ja sektsiooni elementideks. Span-elementi kasutatakse tihti konkreetse sisu, tavaliselt teksti, ümbritsemiseks, et anda sellele täiendav "konks", mida saab hiljem stiilida. Kasutatakse koos CSS-iga, see võib muuta lisatud teksti stiili; Kuid ilma stiilis atribuutideta, ei ole üksteisest eraldatud element teksti üldse mingit mõju.

See on peamine erinevus vahemiku ja div-elementide vahel. Nagu eespool mainitud, sisaldab div-element lõikepunkti, samal ajal kui span-element ainult ütleb brauserile, et sellega seotud CSS-i stiili reegleid rakendatakse ka sildid:


Esile tõstetud tekst ja mitte-esile tõstetud tekst.

Teksti CSS-i stiilimiseks (nt class = "highlight">) lisage span-elemendile klass = "highlight" või muu klass.

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

  • stiil
  • klassis
  • id

Kasutage rida, kui soovite sisu stiili muuta, määratledes selle sisu dokumendi uue ploki taseme elemendina .

Näiteks kui soovite, et h3 pealkirja teine ​​sõna oleks punane, võiksite selle sõna ümbritseda span-elemendiga, mis paneks selle sõna punase tekstiga. Sõna jääb endiselt h3-elemendi osaks, kuid nüüd kuvatakse ka punaselt:

See on minu suurepärane pealkiri

Redigeeris Jeremy Girard 2. veebruaril 17