Korištenje Span i Div HTML elemenata s CSS-om u web dizajnu

click fraud protection

Div i obuhvaća nisu zamjenjivi u izradi web stranica. Svaka služi u različite svrhe, a znajući kada je koristiti, pomoći će vam u razvoju čistih web stranica kojima se lako može upravljati.

Korištenje elementa Div

Div definirajte logičke podjele na svojoj web stranici. A div—Kratko za podjelu — u osnovi je okvir u koji možete smjestiti druge HTML elementi koji pripadaju zajedno. Podjela u sebi može imati više drugih elemenata, poput odlomaka, naslova, popisa, poveznica, slika itd. U sebi može imati i druge odjele kako bi pružio dodatnu strukturu i organizaciju.

Da biste koristili div element, postavite otvoren označite ispred područja svoje stranice koje želite kao zasebnu podjelu i zatvaranje 

 oznaka nakon njega:

sadržaj div

Ako ćete ovo područje oblikovati CSS-om, možete dodati iskaznica selektor uvodne div oznake:


Ili možete dodati birač predmeta:


Tada s tim elementima možete raditi u CSS-u ili JavaScript-u.

Trenutne najbolje prakse naginju prema korištenju selektora klasa umjesto ID-ova, dijelom i zbog specifičnosti selektora ID-a. Bilo koji od njih je prihvatljiv, a možete čak dati i

instagram viewer
div i ID i birač klase.

Dijelovi ili dijelovi?

The div element se razlikuje od elementa HTML5odjeljak element jer priloženom sadržaju ne daje semantičko značenje. Ako niste sigurni treba li blok sadržaja biti div ili a odjeljak, razmislite o namjeni elementa i sadržaju.

  • Ako vam element treba samo za dodavanje stilova u to područje stranice, trebali biste koristiti div element.
  • Ako je sadržaj izrazito fokusiran i može samostalno stajati, razmislite o upotrebi odjeljak umjesto toga element.

U konačnici, oboje divs i odjeljci ponašajte se slično, a bilo kojem od njih možete dati atribute i oblikovati ih CSS-om. Oba su elementi na razini bloka.

Korištenje raspona

Raspon je inline element po defaultu, za razliku od div i odjeljak elementi. The raspon element se obično koristi za umotavanje određenog dijela sadržaja, poput teksta, kako bi mu se dodala dodatna kuka koju možete koristiti za dodavanje stilova. Međutim, bez ikakvih atributa stila, raspon uopće nema utjecaja na tekst.

Još jedna razlika između raspon i div elementi je da je div element uključuje odlomak, dok raspon element samo govori pregledniku da primijeni pridružena pravila CSS stila na ono što je priloženo oznake:


Istaknuti tekst  i neosvijetljeni tekst.



Možete dodati.

class = "istakni"

ili sličan raspon element za oblikovanje teksta s CSS-om.

Element span nema potrebne atribute, ali tri koja su najkorisnija ista su kao i kod div element:

  • stil
  • razred
  • iskaznica

Koristiti raspon kada želite promijeniti stil sadržaja bez definiranja tog sadržaja kao novog element na razini bloka u dokumentu.

Na primjer, ako želite drugu riječ h3 krećući se prema crveno, tu biste riječ mogli okružiti s raspon element koji bi tu riječ oblikovao kao crveni tekst. Riječ i dalje ostaje dio h3 element, ali prikazat će se crveno.

instagram story viewer