Използване на Span и Div HTML елементи с CSS в уеб дизайн

click fraud protection

Раздели и обхваща не са взаимозаменяеми в изграждането на уеб страници. Всеки служи за различни цели и знанието кога да използвате всеки ще ви помогне да разработите чисти, лесни за управление уебсайтове.

Използване на елемента Div

Раздели дефинирайте логически разделения на вашата уеб страница. A div—Кратко за разделяне — е основно кутия, в която можете да поставите други HTML елементи които принадлежат заедно. Разделението може да съдържа множество други елементи в себе си, като абзаци, заглавия, списъци, връзки, изображения и т.н. Той може дори да има други подразделения вътре в него, за да осигури допълнителна структура и организация.

За да използвате div елемент, поставете отворен маркирайте преди областта на вашата страница, която искате като отделно разделение и затваряне 

 таг след него:

съдържание на div

Ако ще оформяте тази област с CSS, можете да добавите документ за самоличност селектор към началния div таг:


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


След това можете да работите с тези елементи в CSS или JavaScript.

instagram viewer

Настоящите най-добри практики са насочени към използване на селектори на класове вместо идентификатори, отчасти поради това колко специфични са селекторите на идентификатори. И двата са приемливи и дори можете да дадете a div както идентификатор, така и селектор на клас.

Раздели или раздели?

The div елемент е различен от HTML5раздел елемент, защото не придава на затвореното съдържание никакво семантично значение. Ако не сте сигурни дали съдържанието трябва да бъде div или а раздел, помислете за целта на елемента и съдържанието.

  • Ако имате нужда от елемента просто за добавяне на стилове към тази област на страницата, трябва да използвате div елемент.
  • Ако съдържанието е с подчертан фокус и може да стои самостоятелно, помислете дали да не използвате раздел вместо това.

В крайна сметка и двете divs и раздели поведете се по подобен начин и можете да дадете всеки от тях атрибути и да ги оформите с CSS. И двете са елементи на ниво блок.

Използване на обхвати

Размах е вграден елемент по подразбиране, за разлика от div и раздел елементи. The обхват елемент обикновено се използва за увиване на определено парче съдържание, като текст, за да му се даде допълнителна кука, която можете да използвате за добавяне на стилове. Без никакви атрибути на стил обаче обхват изобщо няма ефект върху текста.

Друга разлика между обхват и div елементи е, че div елемент включва прекъсване на абзац, докато обхват елемент само казва на браузъра да приложи свързани правила за CSS стил към ограденото от тагове:


Маркиран текст  и неоткроен текст.



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

class = "подчертаване"

или подобен на обхват елемент за оформяне на текста с CSS.

Елементът span няма необходими атрибути, но трите, които са най-полезни, са същите като тези на div елемент:

  • стил
  • клас
  • документ за самоличност

Използвайте обхват когато искате да промените стила на съдържание, без да го дефинирате като ново елемент на ниво блок в документа.

Например, ако искате втората дума от h3 насочена към червено, можете да заобиколите тази дума с обхват елемент, който би оформил тази дума като червен текст. Думата все още остава част от h3 елемент, но ще се покаже в червено.

instagram story viewer