Identifikátor (id), třída (class) a kontextuální definice stylů

Použijeme-li v layoutu více bloků stejného druhu (např. header jako záhlaví celé stránky a další header jako záhlaví sekce), musíme je pro přiřazení stylů nějakým způsobem rozlišit. Můžeme jim přiřadit identifikátor (id), třídu stylu (class) nebo použít kontextuální definici stylů.

Použití nových značek HTML5 rozlišování bloků značně usnadňuje. Máme-li ve stránce jedno záhlaví (header) a jedno zápatí (footer), jedno menu (nav), jeden hlavní blok pro článek (article), byť rozdělený na několik oddílů (section), které však jsou stejného stylu a jeden nebo více postranních panelů (asside) stejného vzhledu, zbývá nám jedinný obecný blok (div), který tuto skupinu uzavře. V tom případě nemusíme použít žádné id ani class, vystačíme s kontextuální definicí stylů.

Ukázka kontextuální definice

body > div {
  /* blok div, který je přímo v body a obaluje všechny části stránky */
  /* na jiné bloky div se tyto styly vztahovat nebudou */
}
div > header {
  /* záhlaví celé stránky, které je přímo v bloku div */
  /* záhlaví uvnitř sekce tato definice stylu neovlivní */
}
section > header {
  /* záhlaví uvnitř sekce */
}
header {
  /* tyto styly ovlivní obě záhlaví */
}
div header {
  /* tato definice rovněž ovlivní obě záhlaví,
     protože obě jsou uvnitř divu, třebaže ne přímo.
     Druhé záhlaví je uvnitř sekce, ale ta je uvnitř divu */
}

Máme-li ve stránce dva postranní panely (asside) a chceme-li je formátovat odlišně (např. barvu pozadí), pak využijeme definice pro značku následující po předchozí značce:

asside {
  /* vlastnosti pro všechny bloky asside */
  width: 180px;
  background-color: chocolate;
}
asside + asside {
  /* vlastnosti bloku asside, který následuje po předchozí značce asside */
  /* vlastnosti, které zde nebudeme definovat, získá tento blok z definice výše */
  background-color: beige;  /* první asside na stránce bude čokoládový,
                               další budou béžové */
}

Šířka

width + padding + border + margin = ???

Způsob počítání celkové šířky bloku určuje vlastnost box-sizing. Jedná se o vlastnost CSS3 podporovanou v nových verzích prohlížečů.

1) box-sizing: content-box (nebo nezadáno)

Width určuje vnitřní šířku bloku, tedy prostor pro obsah (content). Padding a border zvětšují výslednou velikost bloku.

Celkovou šířku vypočteme jako součet hodnot width, left a right hodnot paddingu, borderu a marginu bloku, případně několika vedle sebe umístěných bloků. Tento součet musí být roven vnitřní šířce (width) obalujícího bloku.

2) box-sizing: border-box

Width určuje celkovou šířku bloku včetně rámečku (border-box). Padding a border nemají na velikost vliv, jsou již započteny ve width (čím větší padding, tím zbyde menší prostor pro obsah).

Celkovou šířku vypočteme pouze jako součet hodnot width, případně marginu vedle sebe umístěných bloků.
Šířku obalujícího bloku tedy jednoduše rozdělíme na hodnoty width jednotlivých bloků bez ohledu na padding a border.

Výška

height - zadat či nezadat?

Výšku bloků nezadáváme (přizpůsobí se obsahu - velikosti písma, množství textu, atd.). Hlavičce (header), která bude mít obrázek na pozadí, můžeme nastavit výšku podle tohoto obrázku (při tvorbě responzivního webu by se ale i výška hlavičky měla přizpůsobovat rozlišení zařízení - viz kapitola Responzivní layout).

Obtékání

overflow - auto!

Pro bloky s rozmanitým obsahem (article, asside, section) použijeme overflow:auto, aby se blok správně vykreslil i kolem plovoucích částí obsahu (overflow znamená oblékat prvky s vlastností float - např. obrázky umístěné v textu, vnořené sloupcové bloky rozmístěné vedle sebe apod.)

Pro bloky obsahující jiné bloky (div, section) nebo blokové odkazy (nav), použijeme také overflow:auto, jinak se nepřizpůsobí vnořeným plovoucím blokům a může se stát, že se nevykreslí vůbec.

Ukázka vlastnosti overflow

Nemají-li bloky nastavenu výšku (height: auto):

overflow:visible

plovoucím objektům se nepřizpůsobí, ty vytečou

overflow:auto

blok se přizpůsobí i svému plovoucímu obsahu

overflow:visible

nav
 

article
 

footer

overflow:auto

nav
 

article
 

footer

Umístění bloků

float - left, right, none

Chceme-li umístit dva nebo více bloků vedle sebe, použijeme pro ně float:left, případně pro jeden float:left a pro druhý float:right. V každém případě pak tyto bloky musíme vložit do dalšího bloku, který bude tvořit jakýsi obal a zajišťovat jejich soudržnost. Chceme-li tento obalový blok umístit na střed, musí mít float:none a margin:auto.

Bez obtékání tedy bude pouze blok sloužící jako obal, všechny ostatní bloky, které budou v tomto obalu vnořeny, musí mít nastaveno obtékání, i když budou do celé šířky obalujícího bloku, jinak se mezi nimi může dělat mezera.

Obalovací blok musí mít overflow: auto, aby obklopil vnitřní bloky, které mají float.

Pokud máme pouze několik stejně širokých bloků pod sebou, necháme je bez obtékání, budou tak do celé šířky.

Základní css vlastnosti pro layout