CSS Tutoriál X. – Sekce
V tomto dílu si povíme něco víc o sekcích a vlastnostech, kterým jim můžeme přiřadit.
Nejdříve tedy – co je to sekce. Sekce je oblast na stránce, která má typicky čtvercový/obdélníkový tvar. Nejčastěji jí poznáme podle tagu <div> ale HTML 5 nám přináší mnoho nových tagů, např <section>. Obsahem těchto sekcí jsou buďto odstavce, obrázky, vlastně cokoli chceme. Jak je ale můžeme upravovat v CSS?
Když pomineme pozicování, které již bylo zmíněno, můžeme se bavit o zarovnání prvků uvnitř samotné sekce. K tomu nám slouží vlastnost box-align. Ta nám nastavuje kde přesně v sekci se prvek nachází. Pokud dáme hodnotu start, tak se horní část prvku bude dotýkat horního ohraničení sekce. Pokud nastavíme bottom, bude se spodní část dotýkat spodního ohraničení. Pomocí hodnoty center nastavíme pozici přesně na prostředek – volné místo se rozdělí do dvou částí a půlka se vloží nad prvek a půlka pod prvek. (pozn. Pro fungování všech vlastností musíme připsat pro sekci vlastnost display:box.)
Podobnou vlastností je box-pack. Ta nám nastavuje opět rozložení prvků v sekci. Jeho hodnoty jsou v zásadě podobné, jde právě o kombinace této vlastnosti a vlastnosti box-align. Hodnota start nám v box-pack určuje že levý roh prvku je umístěn na levé straně nahoře (veškeré přebytečné místo se dává za poslední prvek), hodnota end naopak určuje, že pravý roh posledního prvku je v pravém horním rohu (veškeré přebytečné místo se vkládá před první prvek). Hodnota center nám určuje, že prvek bude na prostředku, co se šířky týče. Tady by se dala využít kombinace pro zarovnání prvku na úplný střed stránky:
<div style="display: box; box-pack: center; box-align: center"> <p>Tento nadpis bude uprostřed jak horizontálně, tak vertiálkně</p> </div>
Další užitečnou vlastností pro pozicování je box-direction. Ta nám mluví o pořadí prvků v sekci. Její hodnotou je reverse. Jde o to, že můžeme prvky zobrazit v opačném pořadí, než je uvedeme. Pokud uvedeme např odstavce <p>1</p> <p>2</p> <p>3</> zobrazí se nejdříve odstavec, který říká 3.
Další vlastností pro uspořádání prvků je box-flex. Tato vlastnost má podobné použití jako vlastnost box-sizing: border-box. Jde tu opět o uspořádání jak se vejdou elementy do sekce. Tentokrát jde však o to, že pokud má sekce více elementů, právě vlastnost box-flex nám určuje, jak se zarovnají do sekce. Řekněme, že máme sekci, která má šířku 300 px. Do ní dáváme dva odstavce. Pomocí box-flex můžeme nastavit, jakou část sekce tyto odstavce spotřebují. Pokud bude mít jeden odstavec hodnotu box-flex: 2 a druhý box-flex: 1, znamená to, že první odstavec zabere 2/3 šířky sekce a druhý 1/3.
Můžete také využít vlastnosti box-orient. Ta nám popisuje rozložení prvků v sekci. Pokud nastavíme hodnotu horizontal, prvky se nám rozloží horizontálně (to je výchozí rozložení) a pokud hodnotu vertical, rozloží se vertikálně. Pozor, při této vlastnosti se nám nemění pořadí prvků, takže prvek, který je napsaný jako první bude tradičně svojí pozici odvíjet od levého horního rohu. Tzn. že pokud nastavíme vertical, bude první prvek ten vlevo nahoře, druhý pod ním, třetí nejvíce vespod.
Při designování stránky můžeme využít vlastnost box-shadow, pomocí níž můžeme vytvářet sekcím stín. Její hodnoty nastavují směr stínu a další vlastnosti. Nezapisují se však slovy, ale pouze jako číslice nebo hodnoty. První možné nastavení je číslice, která nám určuje jak vzdálený má být stín horizontálně. Toto nastavení je povinné. Další nastavení, také povinné, je nastavení, jak je stín vzdálený vertikálně. Další nastavení již nejsou povinná, patří mezi ně například nastavení rozostření – číslo, které nám udává, jak moc má být stín rozotsřen od kraje. Další z nastavení je spread – číslo, které udává velikost stínu. A jako poslední – barva stínu, zadána pomocí jakéhokoli validního CSS způsobu zadávání barev, které jsme si uváděli.
Syntax= box-shadow: h-shadow v-shadow blur spread color
Pro všechny tyto vlastnosti je potřeba mít u sekcí nastavené display: box. (display: -webkit-box atd)Všechny z těchto vlastností ještě ale nejsou oficiálně podporované prohlížeči, potřebují proto zvláštní předpony.
Pro Safari, Operu a Chrome: -webkit- (např. -webkit-box-shadow)
Pro Firefox: -moz- (např. -moz-box-direction)
Pro Internet Explorer: -ms- (např. -ms-flex-align) – Internet Explorer je specifický v tom, že vlastnosti se tam jmenují trochu jinak. Proto, aby nám to fungovalo, musíme použít správné pojmenování : display:-ms-flexbox = display: box, -ms-flex-pack = box-pack, -ms-flex-align = box-align, -ms-flex-direction= box-direction, -ms-flex= box-flex, atd.