Používanie prvkov Span a Div HTML s CSS vo webovom dizajne

click fraud protection

Divs a rozpätia nie sú zameniteľné pri vytváraní webových stránok. Každá slúži na iné účely a vedieť, kedy ju použiť, vám pomôže vytvoriť čisté a ľahko spravovateľné webové stránky.

Pomocou prvku Div

Divs definujte logické rozdelenie na svojej webovej stránke. A div—Krátka na rozdelenie - je v podstate políčko, do ktorého môžete umiestniť ďalšie Prvky HTML ktoré patria k sebe. Rozdelenie môže obsahovať niekoľko ďalších prvkov, napríklad odseky, nadpisy, zoznamy, odkazy, obrázky atď. Môže obsahovať dokonca aj ďalšie divízie, ktoré poskytujú ďalšiu štruktúru a organizáciu.

Ak chcete použiť div prvok, položte otvor označte pred oblasťou, ktorú chcete, ako samostatné rozdelenie a za koncovku 

 značka po ňom:

obsah div

Ak budete upravovať túto oblasť pomocou CSS, môžete pridať znak ID selektor na otváraciu značku div:


Alebo môžete pridať selektor triedy:


S týmito prvkami potom môžete pracovať v CSS alebo JavaScript.

Súčasné osvedčené postupy sa prikláňajú k použitiu selektorov tried namiesto ID, čiastočne kvôli tomu, aký konkrétny sú selektory ID. Jeden z nich je však prijateľný a môžete dokonca uviesť a

instagram viewer
div ID aj selektor triedy.

Divs alebo sekcie?

The div prvok sa líši od prvku HTML5oddiel prvok, pretože nedáva priloženému obsahu žiadny sémantický význam. Ak si nie ste istí, či by blok obsahu mal byť a div alebo a oddiel, premýšľajte o účele prvku a obsahu.

  • Ak potrebujete element jednoducho pridať štýly do tejto oblasti stránky, mali by ste použiť div element.
  • Ak je obsah zreteľne zameraný a mohol by stáť sám, zvážte použitie oddiel prvok.

V konečnom dôsledku oboje divs a oddiely správajte sa podobne a niektorému z nich môžete dať atribúty a upraviť ich štýlom CSS. Oba sú prvky na úrovni bloku.

Používanie rozpätí

Rozpätie je vložený prvok v predvolenom nastavení, na rozdiel od div a oddiel prvkov. The rozpätie prvok sa zvyčajne používa na zabalenie konkrétnej časti obsahu, napríklad textu, ako dodatočného háku, ktorý môžete použiť na pridanie štýlov. Bez akýchkoľvek atribútov štýlu však rozpätie nemá vôbec žiadny vplyv na text.

Ďalším rozdielom medzi rozpätie a div prvkov je, že div prvok obsahuje zalomenie odseku, zatiaľ čo rozpätie element iba informuje prehliadač, aby použil súvisiace pravidlá štýlu CSS na to, čo je obsiahnuté v tagy:


Zvýraznený text  a nezvýraznený text.



Môžete pridať.

class = "highlight"

alebo podobne ako rozpätie prvok na úpravu textu pomocou CSS.

Element span nemá povinné atribúty, ale tri najužitočnejšie sú rovnaké ako atribúty div element:

  • štýl
  • trieda
  • ID

Použite rozpätie keď chcete zmeniť štýl obsahu bez toho, aby ste tento obsah definovali ako nový prvok na úrovni bloku v dokumente.

Napríklad, ak chcete druhé slovo znaku h3 Ak smerujete do červena, môžete toto slovo obklopiť a rozpätie prvok, ktorý by toto slovo označil ako červený text. Toto slovo stále zostáva súčasťou h3 prvok, ale zobrazí sa červenou farbou.

instagram story viewer