Použití prvků Span a Div HTML s CSS ve webovém designu

click fraud protection

Divs a rozpětí nejsou při vytváření webových stránek zaměnitelné. Každá slouží různým účelům a znalost toho, kdy ji použít, vám pomůže vytvořit čisté a snadno spravovatelné webové stránky.

Použití prvku Div

Divs definujte logické dělení na své webové stránce. A div—Zkratka pro rozdělení - je v podstatě pole, do kterého můžete umístit další Prvky HTML které patří k sobě. Dělení může obsahovat několik dalších prvků, například odstavce, nadpisy, seznamy, odkazy, obrázky atd. Může dokonce obsahovat další divize, které poskytují další strukturu a organizaci.

Chcete-li použít div prvek, umístěte otevřený označte před oblastí stránky, kterou chcete, jako samostatné rozdělení a uzavření 

 tag po něm:

obsah div

Pokud budete tuto oblast upravovat pomocí CSS, můžete přidat ID selektor na úvodní značku div:


Nebo můžete přidat selektor třídy:


S těmito prvky pak můžete pracovat v CSS nebo JavaScriptu.

Aktuální osvědčené postupy se opírají o používání selektorů tříd namísto ID, částečně kvůli tomu, jak konkrétní selektory ID jsou. Oba jsou však přijatelné a můžete dokonce dát a

instagram viewer
div ID i selektor třídy.

Divs nebo sekce?

The div prvek se liší od prvku HTML5sekce prvek, protože nedává přiloženému obsahu žádný sémantický význam. Pokud si nejste jisti, zda by blok obsahu měl být a div nebo a sekce, přemýšlejte o účelu prvku a obsahu.

  • Pokud potřebujete prvek jednoduše přidat styly do této oblasti stránky, měli byste použít div živel.
  • Pokud má obsah zřetelné zaměření a mohl by obstát sám, zvažte použití sekce místo toho prvek.

Nakonec obojí divs a sekce chovat se podobně a některému z nich můžete přidělit atributy a upravit je pomocí CSS. Oba jsou prvky na úrovni bloku.

Používání rozpětí

Rozpětí je ve výchozím nastavení vložený prvek, na rozdíl od div a sekce elementy. The rozpětí prvek se obvykle používá k zabalení konkrétního obsahu, například textu, a poskytuje mu další hák, který můžete použít k přidání stylů. Bez jakýchkoli atributů stylu však rozpětí nemá vůbec žádný vliv na text.

Další rozdíl mezi rozpětí a div prvků je, že div prvek obsahuje zalomení odstavce, zatímco rozpětí element pouze říká prohlížeči, aby aplikoval přidružená pravidla stylu CSS na to, co je uzavřeno v tagy:


Zvýrazněný text  a nezvýrazněný text.



Můžete přidat.

class = "highlight"

nebo podobné rozpětí prvek pro styl textu pomocí CSS.

Prvek span nemá žádné povinné atributy, ale tři, které jsou nejužitečnější, jsou stejné jako u prvku div živel:

  • styl
  • třída
  • ID

Použití rozpětí když chcete změnit styl obsahu, aniž byste tento obsah definovali jako nový prvek na úrovni bloku v dokumentu.

Například pokud chcete druhé slovo znaku h3 mířící do červené, můžete toto slovo obklopit a rozpětí prvek, který by toto slovo stylizoval jako červený text. Slovo stále zůstává součástí h3 prvek, ale zobrazí se červeně.

instagram story viewer