|
||
Je definován vlastností display.
Určuje, jak bude formátovaný prvek zobrazen. Prvek může být zobrazen jako blokový nebo řádkový.
Zobrazuje se jako souvislý obdélníkový blok. Každý blokový prvek je umístěn na samostatné řádce, přičemž nezáleží na jeho šířce. Další prvky se zobrazují až pod ním. Příkladem blokových prvků jsou odstavce p, nadpisy h1 až h6, prvek div a další.
Zobrazuje se jako část textu. Není umístěn na samostatné řádce. Další řádkové prvky, či slova textu se mohou zobrazovat na řádce před ním i za ním. Na konci řádku je zalomen jako běžný text. Příkladem řádkových prvků jsou odkazy a, citace q, zdůraznění em, prvek span a další.
Hodnotami vlastnosti display mohou být klíčová slova:
block - blokový prvek,
inline - řádkový prvek,
list-item - položka seznamu,
none - prvek není zobrazen.
Položka seznamu je speciální případ blokového prvku. Na levé straně tohoto prvku se navíc zobrazuje značka uvozující položku seznamu (odrážka, číslo, písmeno). Zformátujeme-li takto například odstavec, bude jej možné následně formátovat pomocí vlastností seznamů (viz. studijní článek Vlastnosti seznamů a tabulek).
V ukázce 
můžete vidět odstavce zformátované pomocí definice display: list-item. Tato definice zajistí pouze zobrazení značky nalevo od odstavce. Aby byla tato značka také vidět, je třeba ještě odstavcům definovat levý okraj margin-left. Potom již můžeme využít všech dostupných vlastností seznamů.
Na zdůraznění em a nadpisech h1 a h2 jsou vidět rozdíly mezi blokovými a řádkovými prvky. Zatímco nadpisy jsou každý na své řádce, věta uzavřená mezi značky <em></em> je zleva i zprava obklopena textem. Pro názornost jsou tyto prvky navíc podbarveny modře.
Sami si můžete vyzkoušet, že i po zmenšení šířky obou odstavců zůstanou každý na své řádce. Provést to můžete například přidáním pravidla h1, h2 { width: 40% }. Přidáním pravidla em { display: block } změníte prvek em na blokový. Bude pak umístěn na samostatné řádce.
Je definována vlastností position.
Ve všech ukázkách, které jste dosud viděli, měly všechny prvky statickou pozici. Nyní si ukážeme, jak lze umístit prvek absolutně a relativně. Ještě před tím si ale řekneme, která klíčová slova můžeme pro vlastnost position použít.
Jsou to:
static - statická pozice (výchozí hodnota),
relative - relativní pozice,
absolute - absolutní pozice.
Statická pozice znamená, že se prvek zobrazuje v takovém pořadí, v jakém je zapsán v XHTML kódu. Je tedy zobrazen za prvkem, který mu předchází a před prvkem, který po něm následuje.
Vidět to můžeme například v ukázce . V XHTML kódu jsou prvky zapsány v pořadí h1, h2, em, p. V tomtéž pořadí jsou i zobrazeny po spuštění ukázky. Statickou pozici nelze kaskádovými styly nijak změnit.
Prvek, který je umístěn relativně, je možné posunout z jeho původní (statické) pozice. Prvek se posouvá ze své původní pozice o hodnoty zadané pomocí vlastností souřadnic top, right, bottom a left (viz. níže). Pozice ostatních prvků tím není ovlivněna. Zůstávají umístěny tak, jako by byl relativně umístěný prvek stále na své původní (statické) pozici. Relativně umístěný prvek může okolní staticky umístěné prvky překrývat. Je-li relativně umístěných prvků více, překrývají se v takovém pořadí, v jakém byly zapsány do XHTML kódu. Tj. první prvek je překryt druhým, ten je překryt třetím, atd.
V ukázce 
mají prvky (h1, h2, p) definovánu relativní pozici. Na tomto příkladu můžeme vidět, že i když je nadpis h1 posunut ze své původní pozice, umístění nadpisu h2 to nijak neovlivnilo. Je stále umístěn tak, jako by nad ním byl nadpis h1. Také si zde můžete povšimnout, že nadpis h2 a odstavec p překrývají nadpis h1, který je v XHTML kódu zapsán před nimi. Aby toto překrytí bylo lépe viditelné, mají prvky navíc definovánu různou barvu pozadí.
Odstraníte-li pravidlo h1, h2, p { position: relative } nebo změníte-li jeho hodnotu na static, vrátí se prvky do svých původních (statických) pozic. Definice souřadnic na ně pak nebudou mít vliv.
Prvek, který je umístěn absolutně, je jakoby "vyjmut" z dokumentu a umístěn nad ostatní prvky, které překrývá. Ostatní prvky (statické i relativní) jsou umístěny tak, jako by mezi nimi tento prvek nikdy nebyl.
Nemá-li absolutně umístěný prvek definovánu šířku width nebo výšku height (výchozí hodnota auto), přizpůsobí se tyto rozměry jeho obsahu. Zde je rozdíl oproti staticky a relativně umístěným prvkům, které šířku přizpůsobují svému omezujícímu bloku (viz. studijní článek Vlastnosti rámů).
Prvky s absolutní pozicí je rovněž možné posunout pomocí vlastností souřadnic top, right, bottom a left. V tomto případě se ale souřadnice nevztahují k původní pozici prvku, nýbrž k omezujícímu bloku tohoto prvku (viz. níže Souřadnice top, right, bottom, left).
Je-li absolutně umístěných prvků více, překrývají se v takovém pořadí, v jakém byly zapsány do XHTML kódu. Tj. první prvek je překryt druhým, ten je překryt třetím, atd. U absolutně umístěných prvků je navíc možné toto pořadí ovlivnit. Slouží k tomu vlastnost z-index (viz. níže).
V ukázce 
vlevo má nadpis h1 nastavenu absolutní pozici a je posunut o stejné hodnoty jako v ukázce , kde měl nastavenu pozici relativní. Absolutní pozice však způsobila, že byl prvek "vyjmut" z dokumentu a umístěn nad nadpis h2, který překrývá. Zároveň se nadpis h2 a odstavec p (které jsou umístěny staticky) posunuly v dokumentu tak, jako by nad nimi nadpis h1 nikdy nebyl.
V této ukázce můžete také vidět, jak se šířka absolutně umístěného nadpisu h1 automaticky přizpůsobila jeho obsahu.
Jsou definovány vlastnostmi top, right, bottom a left.
Slouží k umístění prvku na stránce v horizontálním (left a right) a vertikálním (top a bottom) směru. Mají význam jen pro relativně a absolutně umístěné prvky. Na staticky umístěné prvky nemají žádný vliv.
Hodnotou souřadnic může být:
rozměr zadaný v libovolných jednotkách,
klíčové slovo auto - výchozí hodnota.
Zadané hodnoty určují, o kolik bude posunut:
horní okraj prvku směrem dolů - vlastnost top,
pravý okraj prvku směrem doleva - vlastnost right,
dolní okraj prvku směrem nahoru - vlastnost bottom,
levý okraj prvku směrem doprava - vlastnost left.
Jsou-li použita procenta, vztahuje se hodnota k šířce (pro vlastnosti left a right) a výšce omezujícího bloku (pro vlastnosti top a bottom). Aby mohly být definovány souřadnice top nebo bottom v procentech, musí mít omezující blok nastavenu svou výšku (vlastnost height). Pro vlastnosti left a right šířku třeba nastavit není.
Posouvají se ze své původní (statické) pozice.
Nejsou-li vlastnosti top, right, bottom a left nastaveny (výchozí hodnoty auto), zůstává prvek na své statické pozici. Tj. jakoby měl nastavené všechny čtyři vlastnosti na nulu.
Jsou-li definovány obě protilehlé souřadnice zároveň - left i right (resp. top i bottom), bude použita pouze hodnota vlastnosti left (resp. top).
Několik variant posunutí relativně umístěných prvků můžete vidět v ukázce 
.
Nadpis h1 je posunut shora dolů o 33 pixelů. Nadpis h2 je posunut zleva doprava o 2,5% šířky svého omezujícího bloku. Na odstavci p vidíme, že lze pro souřadnice použít i záporné hodnoty. Definice right: -30pt říká, že bude odstavec posun o -30 typografických bodů od pravého okraje směrem doleva. Bude tedy posunut o 30pt opačným směrem. Stejného efektu tak dosáhneme, zaměníme-li tuto definici za left: 30pt.
Posouvají se směrem od rámečků svých omezujících bloků. Výplně omezujících bloků se v tomto případě ignorují.
Omezujícím blokem pro absolutně umístěný prvek může být pouze relativně či absolutně umístěný prvek. Nachází-li se prvek pouze uvnitř staticky umístěných prvků, pak je jeho omezujícím blokem okno prohlížeče.
Nejsou-li vlastnosti top, right, bottom a left nastaveny (výchozí hodnoty auto), zůstává prvek na své statické pozici. Pokud však byl horní okraj sloučen s okrajem jiného prvku (viz. studijní článek Vlastnosti rámů), bude absolutně umístěný prvek zobrazen o svůj horní okraj (margin-top) níže. Je to způsobeno tím, že je absolutně umístěný prvek "vyjmut" z dokumentu a tudíž se jeho okraje již neslučují s okraji jiných prvků.
Jsou-li definovány obě protilehlé souřadnice zároveň - left i right (resp. top i bottom) a:
V ukázce 
je nadpis h2 umístěn absolutně. Zároveň má definovány všechny čtyři souřadnice. Toto nastavení zajistí, že horní okraj nadpisu bude vzdálen 50 pixelů od horního okraje okna prohlížeče a zároveň dolní okraj nadpisu bude vzdálen 270 pixelů od dolního okraje okna prohlížeče. Výška nadpisu se automaticky přizpůsobí. Analogicky platí totéž i pro souřadnice left a right a šířku nadpisu. Budete-li měnit velikost okna prohlížeče, ve kterém je ukázka spuštěna, uvidíte, že se okraje nadpisu stále drží v definovaných vzdálenostech od okrajů okna prohlížeče. Šířka a výška se těmto vzdálenostem přizpůsobí.
Je definována vlastností z-index.
Tato vlastnost představuje osu "z" v trojrozměrném souřadnicovém systému. Ovlivňuje tedy "hloubku", ve které se prvek zobrazí. Jinými slovy, určuje pořadí překrývání prvků.
Má význam jen pro absolutně umístěné prvky. Na ostatní prvky nemá žádný vliv.
Hodnotou vrstvy může být:
Prvky, které nemají definovánu vlastnost z-index (výchozí hodnota auto), se překrývají v takovém pořadí, v jakém byly zapsány do XHTML kódu. Tj. první prvek je překryt druhým, ten je překryt třetím, atd.
Příklad absolutně umístěných prvků s definovanou vlastností z-index můžete vidět v ukázce 
.
Aby bylo lépe vidět pořadí vrstev, má každý prvek nastavenu jinou barvu pozadí. Navíc jsou prvky pomocí souřadnic top, left, bottom a right rozmístěny tak, aby se vzájemně překrývaly. Vlastnost z-index pak nastavuje požadované pořadí prvků. Změnami hodnot můžete s prvky sami experimentovat.
Je definováno vlastností float.
Obtékání určuje, zda bude prvek plovoucí, či nikoli. Je-li prvek nastaven jako plovoucí, je umístěn k levé nebo pravé straně svého omezujícího bloku a je obtékán zprava nebo zleva. Obtéká jej pouze ten obsah prvků, který je v XHTML kódu zapsán až za ním. Prvek je obtékán po celé své výšce (tj. od horního okraje až po okraj dolní). Pod ním obsah opět vyplní celou šířku svého omezujícího bloku. Máme-li plovoucí prvek (nejčastěji obrázek) umístěn v odstavci textu na posledních řádcích, pak je obtékán i v následujícím odstavci.
Má-li být prvek nastaven jako plovoucí, musí mít nastavenu svou šířku. To neplatí pro obrázky a objekty, které již mají svou skutečnou šířku.
Obtékání lze nastavit pouze staticky a relativně umístěným prvkům.
Pro vlastnost float jsou k dispozici následující klíčová slova:
none - prvek není plovoucí (výchozí hodnota),
left - prvek je zarovnán vlevo a obsah jej obtéká zprava,
right - prvek je zarovnán vpravo a obsah jej obtéká zleva.
V ukázce 
máme dva plovoucí obrázky. Obrázek znak_zcu.gif je umístěn uvnitř prvku div před prvním odstavcem a plave vlevo. Obrázek student.gif je umístěn uvnitř prvního odstavce a plave vpravo. V kódu CSS jsou tyto obrázky formátovány pomocí selektorů kontextu div img a p img. Aby bylo lépe vidět, jak text obtéká, mají navíc odstavce nastaveno zarovnání textu do bloku. Je to provedeno pravidlem p { text-align: justify }.
Na ukázce je vidět, že okolo prvního obrázku obtéká obsah pouze těch prvků, které jsou v XHTML kódu zapsány až za ním. Obtéká jej tedy pouze text odstavce p a nikoli nadpisů, které jsou zapsány před ním. Druhý obrázek ukazuje, že může být obtékán i druhým odstavcem, přestože je zapsán v odstavci prvním.
Je definováno vlastností clear.
Tato vlastnost se používá pro prvky, jejichž obsah by měl obtékat okolo prvků plovoucích. Chceme-li, aby obsah některého prvku neobtékal kolem prvku plovoucího, definujeme mu příslušnou hodnotu vlastnosti clear. Obsah tohoto prvku pak bude umístěn až pod plovoucím prvkem.
Zrušení obtékání se týká pouze těch prvků, které jsou v XHTML kódu zapsány před formátovaným prvkem. Obtékání uvnitř formátovaného prvku není vlastností clear nijak ovlivněno.
Stejně jako obtékání samotné, i zrušení obtékání lze nastavit pouze staticky a relativně umístěným prvkům.
Pro vlastnost clear jsou k dispozici následující klíčová slova:
none - neruší obtékání žádných prvků (výchozí hodnota),
left - ruší obtékání vlevo plovoucích prvků,
right - ruší obtékání vpravo plovoucích prvků,
both - ruší obtékání prvků po obou stranách.
V ukázce 
můžeme vidět stejný XHTML kód, jako na předchozí ukázce. Navíc jsou zde přidány jen atributy id, které slouží k odlišení prvního a druhého odstavce v kódu CSS. Pravidlo p#prvni { clear: both } pak zruší prvnímu odstavci obtékání po obou stranách. Po spuštění ukázky můžeme vidět, že se zrušilo pouze obtékání obrázku, který odstavci předchází. Tedy pouze prvního obrázku. Na obrázek uvnitř odstavce neměla vlastnost clear žádný vliv. Pravidlo p#druhy { clear: right } ruší druhému odstavci obtékání prvků plovoucích vpravo.
Je definováno vlastností overflow.
Nevejde-li se obsah prvku do svého rámu, nazýváme tento jev přetékáním. Může k němu dojít při nastavení příliš malé šířky či výšky prvku. To jsme mohli vidět v některých ukázkách studijního článku Vlastnosti rámů. Rovněž jsme se s přetékáním setkali i u vlastností tabulek.
Pomocí vlastnosti overflow lze určit, jakým způsobem bude přetékání obsahu zobrazeno. Přetékající obsah může být zobrazen mimo rám, jak jsme již mohli dříve vidět. Může být ale i oříznut na hranici rámečku nebo mohou být do rámu přidány posuvníky. V takovém případě se rám chová podobně, jako okno prohlížeče. Tzn., že je možné se v něm pomocí posuvníků pohybovat.
U tabulek je možné nastavit pouze to, zda bude obsah oříznut, či nikoli. Posuvníky u tabulek použít nelze.
Vlastnosti overflow lze definovat následující klíčová slova:
visible - obsah prvku je zobrazen mimo rám (výchozí hodnota),
hidden - obsah prvku je oříznut na hranici rámečku,
scroll - do rámu jsou přidány posuvníky,
auto - do rámu jsou přidány posuvníky, jen když se obsah nevejde do rámu.
Jak vypadá odstavec, do kterého se nevešel text, je vidět v ukázce 
.
Odstavec má nastaveny rozměry tak, aby bylo přetékání dobře vidět. Rovněž má nastaven i rámeček, aby bylo patrné, kde je omezující blok pro text.
Hodnota vlastnosti overflow je auto. Protože se text nevejde do prostoru vymezeného pro odstavec, je po jeho pravé straně zobrazen posuvník. Když zkrátíte text odstavce v XHTML kódu tak, aby se vešel do svého omezujícího bloku (červeného rámečku), posuvník automaticky zmizí.
Vrátíte-li se k původnímu XHTML kódu, můžete vyzkoušet i další hodnoty vlastnosti overflow. Hodnota hidden zobrazí jen tolik textu, kolik se vejde do rámečku. Visible pak zobrazí text všechen. Ten ale bude přetékat přes okraj rámečku.
Je definována vlastností visibility.
Tato vlastnost určuje, zda bude prvek viditelný, či nikoli. Definujeme-li prvek jako neviditelný, bude zbytek dokumentu zobrazen stejně, jako by byl prvek stále na svém místě. To je rozdíl oproti vlastnosti display, která s hodnotou none "zruší" zobrazení prvku a zbytek dokumentu se pak formátuje, jakoby v něm prvek nikdy nebyl.
Hodnoty, které můžeme vlastnosti visibility definovat jsou klíčová slova:
visible - prvek je viditelný (výchozí hodnota),
hidden - prvek je neviditelný.
V ukázce 
je pomocí vlastnosti visibility skryt nadpis h1. Odstraníte-li z kódu CSS pravidlo h1 { visibility: hidden } nebo změníte-li hodnotu hidden na visible, nadpis se opět zobrazí. Uvidíte, že ostatní prvky jsou pořád na stejném místě. Nahradíte-li však visibility: hidden definicí display: none, prvky se posunou na místo nadpisu. Podobně můžete skrývat i nadpisy h2 či odstavce p.
Pozn: Viditelnost prvků má význam hlavně v dynamickém XHTML, kdy je možné s využitím jazyka JavaScript skrývat či zobrazovat prvky dle činnosti uživatele. Tato problematika je však již nad rámec kurzu a proto se jí nebudeme podrobněji zabývat.