Коришћење Спан и Див ХТМЛ елемената са ЦСС-ом у веб дизајну

click fraud protection

Дивс и обухвата нису заменљиви у изради веб страница. Свака служи у различите сврхе, а знајући када је користити, помоћи ће вам да развијете чисте веб локације којима се лако управља.

Коришћење Див елемента

Дивс дефинишите логичке поделе на својој веб страници. А. див—Кратко за поделу — је у основи кутија у коју можете сместити друге ХТМЛ елементи који припадају заједно. Дивизија може да садржи више других елемената, као што су пасуси, наслови, листе, линкови, слике итд. У себи може имати и друге одељења како би пружио додатну структуру и организацију.

Да бисте користили див елемент, поставите отворен означите испред подручја ваше странице које желите као засебно одељење и као затварање 

 ознака после:

садржај див

Ако ћете обликовати ово подручје помоћу ЦСС-а, можете додати ИД селектор до уводне див ознаке:


Или можете додати бирач класе:


Тада са тим елементима можете радити у ЦСС-у или ЈаваСцрипт-у.

Тренутне најбоље праксе нагињу употреби бирача класа уместо ИД-ова, делом и због тога што су специфични селектори ИД-а. Било који од њих је прихватљив, а можете чак дати и

instagram viewer
див и ИД и бирач класе.

Дивизије или секције?

Тхе див елемент се разликује од елемента ХТМЛ5одељак елемент јер приложеном садржају не даје семантичко значење. Ако нисте сигурни да ли би блок садржаја требало да буде див или а одељак, размислите о намени елемента и садржају.

  • Ако вам је елемент потребан само за додавање стилова у то подручје странице, требало би да користите див елемент.
  • Ако је садржај у фокусу и може самостално да стоји, размислите о употреби одељак уместо тога.

На крају, обоје дивс и одељци понашају се слично и можете доделити било ком од њих атрибуте и обликовати их помоћу ЦСС-а. Оба су елементи на нивоу блока.

Коришћење распона

Распон је подразумевано уграђени елемент, за разлику од див и одељак елементи. Тхе распон елемент се обично користи за умотавање одређеног дела садржаја, као што је текст, да би му се додала додатна кука коју можете користити за додавање стилова. Без икаквих атрибута стила, међутим, распон уопште не утиче на текст.

Још једна разлика између распон и див елементи је да је див елемент укључује прелом пасуса, док распон елемент само говори прегледачу да примени придружена правила ЦСС стила на оно што је приложено ознаке:


Истакнути текст  и не истакнути текст.



Можете додати.

цласс = "хигхлигхт"

или слично као распон елемент за обликовање текста помоћу ЦСС-а.

Елемент спан нема потребне атрибуте, али три која су најкориснија иста су као и код див елемент:

  • стил
  • класа
  • ИД

Користите распон када желите да промените стил садржаја а да тај садржај не дефинишете као нови елемент на нивоу блока у документу.

На пример, ако желите другу реч х3 крећући се према црвено, ту реч бисте могли окружити с распон елемент који би ту реч обликовао као црвени текст. Реч и даље остаје део х3 елемент, али ће се приказати црвеном бојом.

instagram story viewer