V dnešním díle seriálu o CSS se budem věnovat barvám objektů a určování přesné pozice objektů.
Pomocí kaskádových definic stylů lze kromě vlastností určujících jakým fontem se má zobrazit text a jaké má mít zarovnání také určit vlastnosti jiných objektů. Lze například určit styl obtékání obrázků a tabulek, nastavit na pozadí obrázek atd. Dnes se naučíme, jak na to.
Barvu HTML elementu určíme pomocí vlastnosti color. Její hodnotou může být stejně jako při určování barvy v „čistém“ HTML název barvy nebo číslo barvy. Barvu pozadí určíme vlastností background-color. Oproti předchozí vlastnosti nabízí ještě parametr transparent. Na pozadí objektu však může být také obrázek. To zařídíme pomocí background-image jejímž parametrem je odkaz na obrázek. Je však třeba brát v potaz jiný způsob psaní URL v kaskádových definicích a také to, že pokud použijeme relativní odkaz, musíme za základní uvažovat URL stylu. Takže jestliže není definice stylu zadána pomocí tagu <STYLE> přímo ve stránce, musíme si dát pozor na to, že relativní URL se bude odvíjet od souboru s definicí stylu. Přiklad zápisu adresy v CSS:
url(http://www.nekde.cz/obr/pozadi.gif)
Dále lze nastavit jestli se má pozadí opakovat a to jak v rovině tak i vertikálně. Vlastnost
background-repeat s hodnotami
repeat (opakovat horizontálně i vertikálně),
repeat-x (opakovat horizontálně),
repeat-y (opakovat vertikálně) a
no-repeat (neopakovat tj. zobrazit pouze jednou). Vlastnost
background-attachment má dvě možné hodnoty.
scroll (pozadí se bude při rolování pohybovat se stránkou) nebo
fixed (pozadí bude nepohyblivé). Pozici pozadí určujeme pomocí
background-position. Může být udána v procentech, v délkových jednotkách nebo pomocí slov
top,
center,
bottom (určení pozice v ose X) a
left,
center,
right (osa Y). Je třeba udat dvě hodnoty pro určení pozice.
Všechny vlastnosti lze podobně jako v případě vlastností fontů, nastavit společně pomocí background. Můžeme tak například napsat:
TABLE {background:lightblue
url(obr/tab.gif)
norepeat
center center}
Dostaneme tabulku se světle modrou barvou pozadí a s obrázkem tab.gif jednou zobrazeném ve středu tabulky. Tímto jsme vyčerpali vlastnosti pomocí nichž lze nastavovat barvu objektů a obrázky.
Nyní se zaměříme na vlastnosti, pomocí nichž lze nastavit pozici objektu. S jejich pomocí lze dosáhnout působivých efektů (stínování, překrývající se text) ale také lze dosáhnout toho, že bude stránka zcela nesrozumitelná v případě zobrazení browserem bez podpory CSS. Je tedy třeba používat tyto efekty s rozvahou. Možnosti CSS jsou nejlépe vidět na tomto konkrétním příkladu:
Jedná se o obrazovku z adresy http://www.w3.org/Style. Na této adrese je také spousta informací o definicích stylu. Pokud zobrazíme stránku bez podpory CSS, dostaneme následující text:
Jak vidno lze se na této stránce dobře orientovat i za použití textového browseru. Můžete si zobrazit zdroj tohoto dokumentu. Stačí kliknout na výše zmíněný odkaz a v browseru (IE) zvolit Zobrazit/Zdroj. Na této stránce je také velké množství odkazů na informace o CSS v angličtině.
Kaskádové definice stylů umožňují určit pozici HTML elementu pomocí následujících vlastností:
- left, top – posunutí elementu oproti „normálu“. Hodnotou může být buďto délková míra nebo hodnota v procentech. Pokud zadáme kladnou hodnotu, posune se element doprava (vlastnost left) resp. dolů (vlastnost top). Pokud zadáme zápornou hodnotu, posune se doleva nebo nahoru.
- width, height
– hodnota se udává v délkových mírách nebo v procentech (pak se jako základ bere šířka resp. výška rodičovského elementu). Tyto vlastnosti mají vliv na elementy blokové (tj. ty před a za kterými je zalomena řádka – H1, P) nebo takové, jejichž vlastnost position je nastavena jako absolute.- position
– určuje způsob formátování elementu. Hodnota static udává běžný způsob formátování. Hodnota relative způsobí, že vlastnosti left a top určují relativní posunutí oproti statickému umístění objektu. Hodnota absolute pak umožňuje přesně určit polohu elementu. Ostatní elementy se pak formátují PŘES tento element.- clip
– umožňuje definovat čtyřúhelníkovou oblast elementu, která je viditelná. Uplatňuje se pouze na elementy s position nastavenou na absolute. Její hodnotou jsou čtyři čísla, určující délku strany čtyřúhelníku a to v pořadí horní, pravá, dolní a levá strana. Je také možné zadat hodnotu auto. V tomto případě se délková hodnota přizpůsobí délce HTML elementu.- overflow
– způsob zobrazení obsahu elementu, který se nevešel do vyhrazeného prostoru. Hodnota none způsobí, že obsah elementu přeteče z definované oblasti, hodnota clip způsobí, že budou dodrženy hranice a element bude oříznut a hodnota scroll způsobí, že v elementu půjde obsahem posouvat.- z-index
– určuje pořadí, ve kterém se zobrazí překrývající se elementy. Nejvíce „vepředu“ jsou elementy s nejvyšším číslem.
Dalšími vlastnostmi, které lze pomocí CSS změnit je vzhled seznamů a odrážek. Můžeme k tomu použít vlastnost
list-style-type. Její hodnoty jsou
disc (plný kruh),
circle (kružnice),
square (plný čtverec),
decimal (čísla),
lower-roman (římská čísla psaná malými písmeny),
upper-roman (římská čísla psaná velkými písmeny),
lower-alpha (malé písmena),
upper-alpha (velká písmena) a
none (žádný znak). Pomocí vlastnosti
list-style-image nastavíme obrázek, který bude použit jako odrážka (například obrázek šipky nebo klidně něco extravagantnějšího). Jako hodnotu zadáváme URL obrázku. Vlastnost
list-style-position určuje, jestli se má odrážka zobrazit před textem (
outside) nebo v textu položky seznamu (
inside). Jako obvykle existuje i vlastnost, která shrnuje veškeré předchozí vlastnosti do jedné. Je to
list-style. Její použití může být například následující:
UL LI { list-style: disc inside url(obr/sipka.gif)}
OL LI { list-style: decimal inside }
Tato definice používá tzv. kontextové selektory. Pokud bude tag LI (položka seznamu) součást nečíslovaného seznamu, použije se jako šipka obrázek sipka.gif. Pokud tento obrázek nebude z jakýchkoli příčin k nalezení, bude použit jako odrážka plný kruh. Naproti tomu v případě číslovaného seznamu bude tento standardně číslován.
Dnes je to vše, v příštím (kratším :-)) díle seriálu si povíme o vlastnostech boxů.