CSS: barvy a umístění objektů

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ů.


  

Diskuze (1) Další článek: Service Pack 4 pro česká NT je tu!

Témata článku: Software, Programování, Barvy, Attachment, Objekt, Osa Y, Velký posun, Inside, Browser, CSS, Element, Malý objekt, Viditelné světlo, Clip


Určitě si přečtěte

Alan Turing: Genius, který matematicky stvořil počítač

Alan Turing: Genius, který matematicky stvořil počítač

Řešením matematického problému se dostal k modelu teoretického stroje, který nese jeho jméno a je základem logiky univerzálních počítačů.

Pavel Tronner | 56

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

** Sonda LRO pořídila z oběžné dráhy Měsíce zajímavé snímky ** Jsou na nich vidět artefakty všech misí programu Apolla, které přistály na povrchu Měsíce ** Jde například o části lunárních modulů, rovery a dokonce i vlajky

Petr Kubala | 60

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

** Vědci spočítali, jak velká by musela být posádka pro vícegenerační let k nejbližší hvězdné soustavě ** Proxima Centauri se nachází 4,3 světelných let od nás ** Za současných technologií bychom k ní letěli 6300 let

Petr Kubala | 53

Budoucnost elektroniky: čeští vědci stojí za revolučním čipem, který nemá ve světě obdoby

Budoucnost elektroniky: čeští vědci stojí za revolučním čipem, který nemá ve světě obdoby

** Čeští vědci pod vedením Tomáše Jungwirtha vyvíjí nový typ revolučního paměťového čipu ** Zatímco v současnosti elektronika pracuje s elektrony, v budoucnu to budou spiny elektronů ** Čipy budou moci být klidně i 1 000x rychlejší a úspornější

Karel Javůrek | 32


Aktuální číslo časopisu Computer

Velký test 18 bezdrátových sluchátek

Vše o přechodu na DVB-T2

Procesory AMD opět porážejí Intel

7 NVMe M.2 SSD v přímém souboji