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, Viditelné světlo, Clip, Osa Y, Inside, Velký posun, Malý objekt, Browser, CSS, Element, Objekt


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

Musk pošle lidi na oblet Měsíce. Japonský podnikatel Maezawa vezme na cestu až osm umělců

Musk pošle lidi na oblet Měsíce. Japonský podnikatel Maezawa vezme na cestu až osm umělců

** SpaceX chce nejdříve v roce 2023 vyslat lidi na oblet Měsíce ** Hlavním pasažérem bude japonský podnikatel Jusaku Maezawa, který vezme na cestu až 8 umělců ** Pětidenní cesta proběhne v chystané lodi BFS

Petr Kubala | 14

Nechali jsme dopadnout asteroid Ryugu na Prahu. Místo stověžatého města je pětikilometrový kráter

Nechali jsme dopadnout asteroid Ryugu na Prahu. Místo stověžatého města je pětikilometrový kráter

** Ryugu je blízkozemní planetka, která křižuje dráhu Země ** Její průměr je asi 900 metrů ** Co by se stalo, kdyby Ryugu dopadla na Zemi?

Petr Kubala | 5

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

** Model raketoplánu Columbia od českého konstruktéra umí i létat ** Obdivuhodný model si vzal 1600 hodin práce ** Podívejte se na fotografie ze stavby a prvního letu

Karel Jeřábek | 20

Velká podzimní aktualizace: Co nového teď najdete ve Windows 10

Velká podzimní aktualizace: Co nového teď najdete ve Windows 10

** Microsoft se opět snaží spojit telefony a počítače. ** Místo velkých novinek se zaměřil spíše na drobná vylepšení. ** Vyhledávání je konečně použitelné a hledá téměř všude.

Vladislav Kluska | 78

PortraitPro: Vyzkoušeli jsme program, který prý udělá z každé „žáby“ krasavici

PortraitPro: Vyzkoušeli jsme program, který prý udělá z každé „žáby“ krasavici

** V digitálním světě nemůžete věřit všemu ** Nová generace 3D fotoeditorů zvládne divy ** Vyzkoušeli jsme PortraitPro, který vám změní i kontaktní čočky

Jakub Čížek | 10

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

** Pornografie údajně představuje třetinu internetové obsahu a je technologický tahounem ** Do erotického obsahu postupně zasahuje i virtuální realita ** Kromě vizuálního vjemu se pracuje také na virtuálním uspokojení toho hmatového

Jan Dudek | 29

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 | 65


Aktuální číslo časopisu Computer

Jak vytvořit a spravovat vlastní web

Velký test herních klávesnic a DVB-T2 tunerů

Vše o formátu RAW

Vybíráme nejlepší základní desku