Како да ги користиме елементите Span и Div HTML

Користете го span и div со CSS за поголема контрола на стилот и распоредот.

Многу луѓе кои се нови за веб дизајн и HTML / CSS ги користат елементите и

во меѓусебна интеракција, бидејќи тие градат веб-страници. Реалноста, сепак, е дека секој од овие HTML елементи служи за различни цели. Учењето да се користи секој за наменетата цел ќе ви помогне да развиете почисти веб-страници кои го кодот е полесно да управуваат во целост.

Користење на елементот

Делот елемент ги дефинира логичките поделби на вашата веб-страница.

Тоа е во основа кутија во која можете да поставите други HTML елементи кои логично одат заедно. Поделбата може да има повеќе други елементи во него, како што се ставовите, заглавјата, списоците, линковите, сликите итн. Може дури да има и други поделби во неа за да обезбедат дополнителна структура и организација на вашиот HTML документ.

За да го користите елементот div, поставете отворена

ознака пред областа на вашата страница што ја сакате како посебна поделба, и блиска ознака по неа:

содржина на div

Доколку во областа на вашата страница се потребни некои дополнителни информации што ќе ги користите за стил со CSS подоцна, можете да додадете селектор на ид (на пример,

id = "myDiv">), или класа селектор (на пример, класа = "bigDiv">). И двете од овие атрибути потоа може да се изберат со помош на CSS или модифицирано користење JavaScript. Тековните најдобри практики се потпираат на користење на селектори од класа наместо на лични карти, делумно поради тоа што се специфични селектори на ID. Во вистината, сепак, можете да користите било кој и дури може да даде поделба и лична карта и селектор на класа.

Кога да се користи

Versus

Делот елемент е различен од елементот на дел од HTML5, бидејќи на приложената содржина не му се дава семантичко значење. Ако не сте сигурни дали содржината на блокот треба да биде дел или дел, размислете за тоа што целта на елементот и содржината е да ви помогне да одлучите кој да го користите:

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

На крајот на краиштата, двете divs и секции се однесуваат слично и можете да им дадете било кој од нив атрибутот вредности и стил нив со CSS за да добиете изглед на вашиот сајт што ви треба. Двете од нив се елементи на блок ниво.

Користење на елементот

Елементот span е стандарден елемент. Ова ја издвојува од елементите на div и дел. Елементот span често се користи за да заокружи одредено парче содржина, вообичаено текст, за да му даде дополнителна "кука" која подоцна може да биде позната. Користи со CSS, може да го промени стилот на текстот што го содржи; сепак, без никакви атрибути на стилот, елементот span само воопшто нема никаков ефект врз текстот.

Ова е главната разлика помеѓу распонот и дивите елементи. Како што споменавме погоре, елементот div вклучува пауза од став, додека елементот span го кажува на прелистувачот да ги примени правилата на стилот на CSS на она што е придружено од таговите:


Обележан текст и не-означен текст.

Додадете класа = "означете" или друга класа на елементот span за да го напишете текстот со CSS (на пример, class = "highlight">).

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

  • стил
  • класа
  • id

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

На пример, ако сакате вториот збор од наслов h3 да биде црвен, може да го опкружувате тој збор со елемент на распон кој ќе го стимулира тој збор како црвен текст. Зборот и понатаму останува дел од елементот h3, но сега исто така се појавува и во црвено:

Ова е Мој Прекрасен наслов

Ревидирани од Џереми Жирар на 2/2/17