SPANy a DIVy

Umíme ostylovat html tagy, umíme zařídit, aby stejné prvky využívaly rozdílné formátování (pomocí tříd a identifikátorů). Ale co když chci změnit formátování jen v části textu, který je jako celek v jednom tagu?

Řádkové a blokové prvky

Nejprve malá odbočka - o rozdělení na řádkové a blokové prvky HTML jsem se ještě nezmínila, a snad právě tady je to vhodné.

Základní poučka - blokové prvky nepatří dovnitř řádkových, pouze naopak. Blokové prvky za sebou zalamují řádek, řádkové nikoli.

Možná se to na první pohled nezdá, ale mezi blokové prvky patří z těch základních, námi zmíněných: odstavec <p>, nadpisy <h1> - <h6>, zalomení řádku <br /> a v této kapitole se naučíme používat <div>.

Řádkové prvky jsou potom např. <a>, <em> a tady budeme potřebovat <span>.

O řádkových a blokových prvcích na JPW:
blokové prvky
řádkové prvky - v souladu se zaměřením tohoto webu věnujte prosím na této stránce pozornost pouze části "logické formátování".

Označení v HTML

Opět se musíme vrátit do HTML, a ten text, který chceme zformátovat jinak, si označit. Jinak na něj nebudeme moci ze stylu "ukázat" a přiřadit mu speciální vlastnosti.

Označení části textu

Část textu označíme párovým tagem <span>, kterému stejně jako jiným html tagům můžeme přiřadit třídu nebo identifikátor:

<p>
V tomto textu, zobrazeném podle stylu standardního odstavce, použijeme třeba <span class="tucne">název</span>, který by měl být jinak zformátován.
</p>

Stylování je pak už naprosto stejné, jako jsme se už naučili. Do stylu tedy napíšeme třeba:

span.tucne {
font-weight: bold;
}

Označení části kódu - blok

Blokový prvek, který sám o sobě nemá význam, a získává jej až přiřazením formátování, je <div>. Je to bloková alternativa k výše uvedenému řádkovému prvku <span>.

Jak jej použít? Vezměme si stránku podobné této, kterou právě čtete. Text se skládá z jednotlivých odstavců; třeba i dva nich dohromady tvoří text příkladu, který má být jako celek jinak zformátován. Můžeme samozřejmě těmto dvěma odstavcům přiřadit třídu "priklad" a tu zformátovat; tím ovšem nezískáme možnost třeba ohraničit text tvořící příklad rámečkem, a i z dalších důvodů je mnohem užitečnější prostě ty odstavce, které příklad tvoří, zavřít do tagu <div>, tomu přiřadit třídu a pak styl.

<p>Text normálního odstavce.</p>
<div class="priklad">
  <p>Tady už je text, který tvoří příklad.</p>
  <h1>Může se skládat z různých prvků</h1>
  <p>Nemusí zde být jen odstavce, ale jakékoli prvky.</p>
</div>

Stylování divu je pak obdobné, jako jsme už viděli mnohokrát:

div.priklad {
background-color: #ccffcc;
border: 1px dashed #00cc33;
}

Abychom se do té teorie moc nezapletli, podíváme se na to zase postupně v praxi.


Mozilla Firefox: Prohlížeč, kterému můžete věřit
píše -dis- bb(zavináč)choltice.eu