Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

FORMÁTOVÁNÍ BLOKŮ STRÁNKY

blokové vlastnosti CSS umožňují definovat odstupy mezi jednotlivými bloky, jejich rozměry, pozadí a rámečky, dokonce jejich umístění na přesné souřadnice na stránce

na rozdíl od vlastností textu blokové vlastnosti se nedědí - pokud tedy nějakou vlastnost neurčíme, použije se výchozí hodnota platná pro danou oblast

každý blok se skládá z několika oblastí, které postupně obalují jeho obsah

kolem bloku může být zobrazen rámeček - border

aby nebyl rámeček nalepený přímo na obsah, může mezi nimi být prázdný prostor určený výplní neboli odstupem od rámečku - oblast padding

pokud má prvek definováno nějaké pozadí - background, bude použito uvnitř celého rámečku (pod obsahem, výplní i rámečkem)

vně rámečku je potom průhledný okraj - oblast margin - jeho velikost udává, jaký bude odstup mezi jednotlivými bloky

za rozměry bloku (šířku a výšku) se považují pouze rozměry obsahu, rozměry ostatních oblastí se k nim přičítají

rámeček definuje sdružená vlastnost border

její hodnotou je trojice hodnot oddělených mezerou udávajících sílu, styl a barvu celého rámečku

např. {border: 1px solid black} - pořadí hodnot je libovolné

síla určuje tloušťku čáry - udává se nejčastěji v px

styl definuje druh čáry - solid (plná čára jednoduchá) - double (dvojitá) - dashed (čárkovaná) - dotted (tečkovaná) - none (žádný rámeček)

barva se definuje stejně jako barva textu

výchozí hodnota je none

je možné definovat parametry i samostatně pro každou stranu - border-left (rámeček vlevo) - border-right (rámeček vpravo) - border-top (rámeček nahoře) - border-bottom (rámeček dole)

nebo naopak jeden parmetr pro celý rámeček - border-style (druh čáry rámečku) border-color (barva rámečku)

vzdálenost obsahu od rámu definuje sdružená vlastnost padding

může mít jednu až čtyři hodnoty oddělené mezerou, které po řadě udávají odstup od horního, pravého, dolního a levého rámu (vždy shora po směru hodinových ručiček)

pokud použijeme méně než čtyři hodnoty, použije se pro chybějící směr hodnota stejná jako pro směr protější - 3 hodnoty pro horní, pravý+levý a dolní odstup - 2 hodnoty pro horní+dolní a pravý+levý odstup - 1 hodnota shodná pro všechny strany

používají se číselné hodnoty s jednotkou - vhodné je používat jednotku em, která odpovídá velikosti písma použitého v prvku (pokud si uživatel zvětší či změnší v prohlížeči písmo, přizpůsobí se mu i velikost okrajů)

např. {padding: 1em 2pt 0.5em 4pt}

výchozí hodnota je 0

možno definovat i samostatně pro každou stranu - padding-top, padding-right, padding-bottom, padding-left

okraje - margin se definují obdobně jako výplně - padding skupinou vlastností margin-top, margin-right, margin-bottom a margin-left - sdružená vlastnost margin popisuje současně všechny čtyři okraje - hodnotou je zde rovněž 1 až 4 údaje oddělené mezerou (shodné jako u vlastnosti padding)

výchozí hodnota je 0

výchozí tabulky prohlížečů definují vlastnost margin na rozdíl od vlastnosti padding velmi hojně

např. horní a dolní okraje u odstavců <p>, nadpisů <h1> až <h6> - nulové okraje má zjištěn pouze prvek <div>

levé a pravé okraje jsou ve výchozích tabulkách prohlížečů zpravidla nulové - výjimkou jsou např. zleva odsazované seznamy

POZOR: okraje sousedících prvků se nesčítají, ale spojí se do okraje jediného o velikosti větší z obou hodnot

pozadí můžeme definovat sdruženou vlastností background

její hodnotou je barva (stejně jako u vlastnosti color) nebo adresa obrázku a jeho parametry, případně obojí - obě hodnoty současně mají smysl, pokud použijeme částečně průhledný obrázek, nebo jej opakujeme jen v jednom směru

vlastnost background-color specifikuje barvu pozadí - definuje se stejně jako barva textu - výchozí hodnota je transparent

vlastnost background-image umístí na pozadí obrázek - zapisuje se pomocí funkce url(adresa obrázku) - výchozí hodnota je none (žádný obrázek)

vlastnost background-repeat určuje opakování obrázku - hodnoty repeat (obrázek se opakuje jako dlaždice všemi směry), repeat-x (obrázek se opakuje jen ve vodorovném směru), repeat-y (ográzek se opakuje jen ve svislém směru), no-repeat (obrázek se neopakuje - výchozí hodnota je repeat

vlastnost background-position definuje pozici obrázku na pozadí

vlastnost background-attachment určuje ukotvení obrázku na pozadí - výchozí hodnota scroll zajistí, že obrázek se bude posouvat společně s obsahem - hodnota fixed obrázek ukotví a obsah se bude pohybovat nad ním

příklad - pozadí na celou stránku

body{background-image: url("http://www.gify.nou.cz/poz3_soubory/44.jpg"); background-repeat: repeat;}