CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.

Prezentace na téma: "CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky."— Transkript prezentace:

1 CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky

2 CSS – šířka prvku #nejčastěji se využívá u bloků, ale je možné ji využít i u odstavců, tabulek, obrázků apod. #výchozí hodnota auto #zadávaná fixně (např. v pixelech) nebo procenty #výhoda fixní šířky – snadné počítání #nevýhoda fixní šířky – uživatelsky problematická (různá rozlišení monitorů).sirka { width: 70%; }

3 CSS – rámečky (1) #„ohraničení“ prvku #border-color (barva rámečku) #border-style (styl rámečku) – výchozí hodnota none, varianty solid, double, dashed, dotted, inset, outset, ridge, groove #border-width (šířka rámečku) – výchozí hodnota medium, varianty thin, thick nebo lze zadávat v jednotkách (např. px) #border (sdružená vlastnost)

4 CSS – rámečky (2).xyzz { border: black 1em ridge; }.xyz { border-color: #ffffff; border-style: double; border-width: 2px; }

5 CSS – rámečky (3).xyz { border-color: black yellow green blue; border-style: solid double groove; border-width: 3px 5px; } #lze nastavit i různé hodnoty pro jednotlivé strany, postupuje se od horního rámečku po směru hodinových ručiček #při nastavení pouze 3 hodnot bude mít pravý rámeček stejnou hodnotu jako levý, při nastavení 2 hodnot bude mít spodní rámeček stejnou hodnotu jako horní a pravý stejnou hodnotu jako levý

6 CSS – rámečky (4).uv { border-right: 3px solid black; } #pro jednotlivé strany lze nastavit i sdružené vlastnosti #lze nastavit i jedinou vlastnost jedné straně rámečku.abc { border-top-style: inset; }

7 CSS – okraje (1) #vzdálenost mezi dvěma prvky, popř. prvkem a vymezením dokumentu #margin-top, margin-right, margin-bottom, margin-left #margin (sdružená vlastnost) #hodnoty jsou jednotky (např. px) nebo procenta, popř. auto #ve sdružené vlastnosti opět možno zadávat různé hodnoty pro různé strany

8 CSS – okraje (2).xyz { margin: 3px 5px 7px; }.xyzz { margin: 4% 6%; }

9 CSS – okraje (3).centrovani { width: 80%; margin-left: auto; margin-right: auto; } #pomocí vlastnosti margin lze velmi snadno vycentrovat prvek, popř. prvky – pravý a levý okraj se nastaví na hodnotu auto, která rozdělí zbývající šířku přesně na polovinu od levého a pravého okraje

10 CSS – výplně (1) #vzdálenost mezi obsahem a rámečkem prvku #padding-top, padding-right, padding-bottom, padding-left #padding (sdružená vlastnost) #hodnoty jsou jednotky (např. px) nebo procenta #ve sdružené vlastnosti opět možno zadávat různé hodnoty pro různé strany

11 CSS – výplně (2).xyz { padding: 3px 5px 7px; }.xyzz { padding: 4% 6%; }

12 CSS – plovoucí prvky (1) #základní nástroj tvorby CSS layoutu stránky #„skládání“ prvků vedle sebe #výhody CSS layoutu oproti tabulkovému layoutu – lepší struktura dokumentu, nižší objem kódu a přenesených dat, jednodušší editace, vyšší rychlost načítání, lepší přístupnost webu pro zrakově postižené, … #výchozí hodnota je none (prvek není plovoucí), variantami jsou left a right #plovoucí prvky musí mít definovány šířku

13 CSS – plovoucí prvky (2).div1 { width: 20%; float: left; margin-right: 5%; }.div2 { width: 50%; float: left; margin-right: 5%; }.div3 { width: 20%; float: right; }