Kuinka käyttää Span ja Div HTML -elementtejä

Käytä span ja div CSS: llä suuremman tyylin ja asettelun hallintaan.

Monet Web-suunnittelua ja HTML / CSS -tuottajia käyttävät ja

elementtejä vaihtokelpoisesti, koska ne kehittävät verkkosivuja. Tosiasia on kuitenkin, että jokainen näistä HTML-elementeistä palvelee eri tarkoituksia. Oppiminen käyttämään kukin aiotusta tarkoituksesta auttaa sinua kehittämään puhtaampia verkkosivuja, jotka koodaavat helpommin hallita kokonaisuudessaan.

Käytä
Elementtiä

Div-elementti määrittelee web-sivusi loogiset jakautumat.

Se on pohjimmiltaan laatikko, johon voit sijoittaa muita HTML-elementtejä, jotka loogisesti yhdistyvät. Jako voi sisältää useita muita elementtejä, kuten kappaleita, otsikoita, luetteloita, linkkejä, kuvia jne. Se voi jopa sisältää muita osastoja sen sisällä, jotta se voi tarjota lisärakenne ja organisaation HTML-dokumentille.

Jos haluat käyttää div-elementtiä, aseta avoin

-tunniste ennen sivusi aluetta, jonka haluat erillisenä ja lähellä -tunnistetta sen jälkeen:

sisältö div

Jos sivusi alue tarvitsee joitain lisätietoja, joita käytät tyyliin CSS: llä myöhemmin, voit lisätä id-valitsimen (esim.

id = "myDiv">) tai luokanvalitsimella (esim. class = "bigDiv">). Molemmat attribuutit voidaan sitten valita CSS: llä tai muokata JavaScriptin avulla. Nykyiset parhaat käytännöt kohdistuvat käyttämään luokkavaihtoehtoja ID: n sijasta, osittain siksi, kuinka erityisiä ID-valitsimia käytetään. Totuus voi kuitenkin käyttää joko yhtä ja voi jopa jakaa sekä ID: n että luokan valitsimen.

Milloin käyttää

Versus

Div-elementti on erilainen kuin HTML5-osa-elementti, koska se ei sisällä suljettua sisältöä semanttista merkitystä. Jos et ole varma, onko sisällön lohko div tai osa, mieti, millä tavoin elementin ja sisällön tarkoitus on auttaa sinua päättämään, mitä:

  • Jos tarvitset elementtiä vain lisätäksesi tyylejä sivun kyseiselle alueelle, käytä div-elementtiä.
  • Jos sisältämästä sisällöstä on selkeä painopiste ja se voi olla itsenäisesti, voit käyttää sen osiota.

Viime kädessä molemmat jaksot ja profiilit käyttäytyvät melko samalla tavalla, ja voit antaa jommallekummalle heistä attribuuttiarvot ja muotoilla niitä CSS: llä saadaksesi sivustosi ulkoasua, jota tarvitset. Molemmat ovat lohkotason elementtejä.

Käytä -elementtiä

Span-elementti on oletusarvoisesti inline-elementti. Tämä erottaa sen div ja osa-elementit. Span-elementtiä käytetään usein tietyn sisällön, normaalisti tekstin, käärimiseen, jolloin se on lisäkoukku, joka voidaan muotoilla myöhemmin. Käytettävissä CSS: llä, se voi muuttaa sen sisältämän tekstin tyylin; mutta ilman tyyliattribuutteja pelkkä span-elementti ei vaikuta lainkaan tekstiin.

Tämä on tärkein ero span ja div elementtien välillä. Kuten yllä mainittiin, div-elementti sisältää kohta-tauon, kun taas span-elementti kertoo selaimelle, että sovellettaisiin CSS-tyyppisääntöjä siihen, mitä tagit sisältävät.


Korostettu teksti ja ei-korostettu teksti.

Lisää luokan = "korostus" tai muu luokka span-elementtiin, jotta tekstiä voidaan muotoilla CSS: llä (esim. Class = "highlight">).

Span-elementillä ei ole vaadittuja määritteitä, mutta kolme hyödyllisintä ovat samat kuin div-elementillä:

  • tyyli
  • luokka
  • id

Käytä välitavaraa, kun haluat muuttaa sisältötyyppiä määrittelemättä sitä sisältöä uudeksi lohkotason elementiksi asiakirjassa.

Jos haluat esimerkiksi, että h3-otsikon toinen sana on punainen, voit ympäröidä kyseisen sanan span-elementillä, joka muotoilee sanan punaisena. Sana on edelleen osa h3-elementtiä, mutta nyt se näkyy myös punaisena:

Tämä on minun mahtava otsikko

Julkaisija Jeremy Girard 2/2/17