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ů.
CSS: barvy a umístění 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, Konkrétní auto

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

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

** Sledujte počasí z více zdrojů a podrobněji, přesněji tak určíte, jaké počasí vás potká na dovolené ** Na webu najdete hromadu pokročilých předpovědí počasí, ale i specializované meteorologické služby ** Vybrali jsme 14 služeb na počasí, které se vám můžou hodit

23.  6.  2017 | Jakub Čížek | 19

Herní počítač vs. Xbox One X: Kvalita obrazu není všechno

Herní počítač vs. Xbox One X: Kvalita obrazu není všechno

** Nový Xbox One X slibuje hraní ve 4K s HDR za 13 tisíc korun ** Aby stejnou kvalitu obrazu zvládl počítač, museli byste za něj dát minimálně dvakrát tolik ** Přesto herní počítače stále svůj smysl mají

24.  6.  2017 | Tomáš Holčík | 58

Nejlepší program pro střih videa na doma: 9 video editorů, ze kterých si vyberete

Nejlepší program pro střih videa na doma: 9 video editorů, ze kterých si vyberete

** Pokročilé střihové programy pro neprofesionální využití stojí do 3 000 Kč, jsou ale i zdarma ** Podpora 4K, hromada editačních funkcí a efektové filtry jsou samozřejmostí ** Vybrali jsme 9 nejzajímavějších programů pro nejrozšířenější operační systém Windows

25.  6.  2017 | Stanislav Janů | 32


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky