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


  

Témata článku: Software, Programování, Barvy, Element, Inside, Browser, Clip, Attachment

1 komentář

Nejnovější komentáře

  • _changed 1. 5. 2004 17:23:27
    Asi úplně nechápu, k čemu je dobré nastavovat u POZADÍ vlastnost...
Určitě si přečtěte

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

23.  4.  2017 | Pavel Tronner | 57

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

** Už je to tady, lidé přestávají chápat počítače ** Systémy neuronových sítí začínají pracovat tak, že ani jejich tvůrci přesně neví, co se uvnitř děje ** Do budoucna to může být závažný problém

24.  4.  2017 | Jakub Čížek | 112

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

** Slavný osmibitový počítač Sinclair ZX Spectrum byl uveden právě před 35 lety ** Připomeňte si tento průkopnický počítač v tematických článcích ** Podívejte se, jak funguje dnes

23.  4.  2017 | Pavel Tronner | 13

Acer chrlí novinky: levný a tenký Predator, nové Switche a další notebooky

Acer chrlí novinky: levný a tenký Predator, nové Switche a další notebooky

** Acer na konferenci v New Yorku představil velkou spoustu novinek z oblasti počítačů, notebooků i monitorů ** Notebookové novinky se dotkly řad Predator, Swift, Switch i Aspire ** Herní notebooky dostaly nový typ chlazení

27.  4.  2017 | Karel Javůrek | 7

Správný počítač má alespoň dva monitory. Anebo je to jinak?

Správný počítač má alespoň dva monitory. Anebo je to jinak?

** David si nedokáže představit práci bez dvou a více monitorů ** Kubovi naopak stačí jeden a ve více displejích se ztrácí ** Jaký přístup je lepší?

23.  4.  2017 | Jakub Čížek | 59


Aktuální číslo časopisu Computer

Supertéma: moderní cestování

Kdy opravdu přijdou nové baterie?

Velké testy: 6 herních notebooků a 8 volantů

Recenze: AMD Ryzen řady 5