Span- ja Div HTML -elementtien käyttäminen CSS: n kanssa web-suunnittelussa

click fraud protection

Divs ja ulottuu eivät ole keskenään vaihdettavissa verkkosivujen rakentamisessa. Jokainen palvelee eri tarkoituksia, ja tietäessäsi, milloin niitä käytetään, voit kehittää puhtaita, helposti hallittavia verkkosivustoja.

Div-elementin käyttäminen

Divs määritä loogiset jakaumat verkkosivullasi. A div- Lyhyt jaettavaksi - on periaatteessa laatikko, johon voit sijoittaa muita HTML-elementit jotka kuuluvat yhteen. Jaossa voi olla useita muita elementtejä, kuten kappaleita, otsikoita, luetteloita, linkkejä, kuvia jne. Sen sisällä voi olla jopa muita osastoja, jotka tarjoavat ylimääräisen rakenteen ja organisaation.

Voit käyttää div elementti, aseta avoin tag ennen sivusi aluetta, jonka haluat erillisenä jakona, ja sulkeminen 

 tag sen jälkeen:

div: n sisältö

Jos muotoilet tätä aluetta CSS: llä, voit lisätä Henkilötunnus valitsin avaavaan div-tagiin:


Tai voit lisätä luokan valitsimen:


Tämän jälkeen voit työskennellä näiden elementtien kanssa CSS: ssä tai JavaScriptissä.

Nykyiset parhaat käytännöt pyrkivät käyttämään luokan valitsimia henkilötodistusten sijasta, osittain sen vuoksi, kuinka tarkat henkilötunnuksen valitsimet ovat. Kumpi tahansa on kuitenkin hyväksyttävä, ja voit jopa antaa a

instagram viewer
div sekä tunnuksen että luokan valitsimen.

Divs tai jaksot?

div -elementti eroaa HTML5-osiossa elementti, koska se ei anna suljetulle sisällölle mitään semanttista merkitystä. Jos et ole varma, pitäisikö sisältölohkon olla a div tai a -osiossa, mieti elementin ja sisällön tarkoitusta.

  • Jos haluat elementin yksinkertaisesti lisätä tyylejä sivun kyseiselle alueelle, käytä div elementti.
  • Jos sisällöllä on selkeä kohdistus ja se voi pysyä omana, harkitse -osiossa sen sijaan.

Viime kädessä molemmat divs ja osiot käyttäytyä samalla tavalla, ja voit antaa jommankumman määritteet ja muotoilla ne CSS: llä. Molemmat ovat lohkotason elementtejä.

Spansin käyttö

Span on oletusarvoisesti inline-elementti, toisin kuin div ja -osiossa elementtejä. jänneväli elementtiä käytetään tyypillisesti tietyn sisällön, kuten tekstin, käärimiseen antamaan sille lisäkoukku, jota voit käyttää tyylien lisäämiseen. Ilman tyyliominaisuuksia jänneväli ei vaikuta lainkaan tekstiin.

Toinen ero jänneväli ja div elementtejä on, että div elementti sisältää kappalevälin, kun taas jänneväli elementti kertoo selaimen vain soveltavan siihen liittyviä CSS-tyylisääntöjä siihen, mitä Tunnisteet:


Korostettu teksti  ja korostamaton teksti.



Voit lisätä.

class = "kohokohta"

tai samanlainen kuin jänneväli elementti tekstin muotoilemiseksi CSS: llä.

Span-elementillä ei ole pakollisia määritteitä, mutta kolme eniten hyötyä ovat samat kuin div elementti:

  • tyyli
  • luokassa
  • Henkilötunnus

Käyttää jänneväli kun haluat muuttaa sisällön tyyliä määrittelemättä sitä uudeksi lohkotason elementti asiakirjassa.

Esimerkiksi, jos haluat toisen sanan h3 punaiseksi, voit ympäröi tämän sanan a: lla jänneväli elementti, joka muotoili sanan punaiseksi tekstiksi. Sana on edelleen osa h3 elementti, mutta se näkyy punaisena.

instagram story viewer