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.
