Definování rozměrů (šířky a výšky) pomocí CSS stylů je velmi důležité pro úpravu webových stránek do požadované podoby (například nahoře záhlaví, vlevo menu, vpravo obsah,...).
- rozměr lze nastavit prakticky jakémukoliv HTML prvku (odstavci, nadpisu, tabulce, obrázku)
- pro práci s rozměry existují dvě základní CSS vlastnosti: width (šířka) a height (výška)
Rozměry
width
- vlastnost určující šířku prvku
- pozor na správné pořadí písmenek: width
- hodnotou může být:
- délka (px)
- procento (%)
- auto (automatické dopočítání šířky)
- v případě použití procenta se šířka vypočítává ze šířky nadřízeného prvku (okno prohlížeče, obalující blokový prvek)
- hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)
selektor {width: 500px}
height
- vlastnost určující výšku prvku
- pozor na správné pořadí písmenek: height
- hodnotou může být:
- délka (px)
- auto (automatické dopočítání výšky)
- hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)
selektor {height: 300px}
Příklady použití rozměrů
Definování rozměrů se při tvorbě webových stránek řídí několika pravidly.
- Pokud chceme ovlivnit šířku nebo výšku vložených obrázků, je vhodnější použít přímý styl CSS nebo příslušné HTML atributy u značky <img>.
- Pro definování rozměrů univerzálních oddílů <div> je vhodné použít naopak externí zápis do CSS souboru ve spojení s vytvořením vlastní třídy CSS.
<img src="obrazek.jpg" width="350">
Příklad nastavení rozměrů obrázku pomocí atributu HTML.
<img src="obrazek.jpg" style="width: 350px;">
Příklad nastavení rozměrů obrázku pomocí přímého stylu CSS.
<img src="obrazek.jpg" style="width: 50%; height: auto;">
U takto nastaveného rozměru obrázku se šířka vždy automaticky přizpůsobí na polovinu šířky okna prohlížeče.
<h1 style="width: 350px; font-size: 24pt; background-color: yellow;">Nadpis</h1>
Příklad zobrazí nadpis 1. úrovně, který bude mít žluté pozadí, velikost písma 24 textových bodů a šířku 350 pixelů.
Obtékání
Obtékání textu (stejně jako v textovém editoru) funguje v omezené míře v HTML. HTML prvek, kterému nastavíte obtékání, se posune k pravému nebo levému okraji nadřazeného prvku. Na uvolněné místo se posune HTML element, který je za ním (jsou mu zkráceny řádky o šířku obtékaného prvku).
float
- nastaví obtékání vybranému HTML prvku, který však musí mít nastavenu šířku vlastností "width"
- lze nastavit hodnotu left (prvek se posune k levému okraji a prvek za ním ho bude obtékat zprava) nebo right (prvek se posune k pravému okraji a prvek za ním ho bude obtékat zleva)
- obtékáním se z prvku stává blokový prvek
selektor {float: left}
selektor {float: right}
clear
- na konci každého prvku, který obtéká jiný prvek (je mu nastavena vlastnost "float"), se musí nastavit tzv. "ukončení obtékání"
- nejčastěji se používá prázdný oddíl (<div>), kterému je přímým stylem přiřazena vlastnost "clear"
- za tímto prvkem se všechen další obsah vykresluje bez obtékání
- vlastnost "clear" má tři hodnoty:
- left (ukončí levé obtékání)
- right (ukončí pravé obtékání)
- both (ukončí oba dva typy obtékání)
selektor {clear: left}
selektor {clear: both}
Příklad použití obtékání
<h1>Nadpis</h1> <div style="width: 300px"> <img src="obrazek.jpg" style="float: left"> <p>Běžný text v odstavci</p> </div> <div style="clear: left"></div>
Příklad nejprve zobrazí nadpis, pod ním u levého okraje obrázek a text odstavce zobrazí u pravého okraje obrázku, oddíl ukončí obtékání.