LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (13.) - Barva a Pozadí

Dnešním dílem našeho seriálu o kaskádových stylech se začneme zabývat vlastnostmi pro nastavení barvy elementů a jejich pozadí.

26.11.2004 13:00 | Vasek | Články autora | přečteno 20784×

Pro nastavení barvy textu pomocí html lze použít tag <font> (resp. pomocí atributu color v tomto tagu). W3C koncorsium zařadilo tento tag mezi nedoporučované tagy.

Barva popředí

Barva popředí (nejčastěji písma textu) se určuje vlastností color. Jako její hodnota se používají klíčová slova.

color
Hodnoty: <barvy> | inherit
Výchozí hodnota: závisí na prohlížeči a na uživatelově nastavení
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  <barva> viz díl č. 3
  inherit hodnota se dědí po rodičovském prvku

Barva prvku se obvykle dědí z rodičovského prvku. Výchozí barvy pro text, odkazy a další prvky si může uživatel nadefinovat sám. Hodnota barva definuje konkrétní barvu pomocí klíčových slov či pomocí složek RGB (podrobněji viz díl č. 3). Barva popředí (textu) je dědičná, takže stačí nastavit barvu u tagu <body> a všechny ostatní prvky stránky ji zdědí.

Příklady nastavení barvy popředí

em {
color: red   /* předdefinovaný název barvy */
}
em {
color: rgb(255,0,0)   /* dekadický zápis barvy pomocí funkce RGB */
}
em {
color: rgb(100%,0%,0%)   /* procentuální zápis barvy pomocí funkce RGB */
}
em {
color: #FF0000   /* hexadecimální zápis */
}
em {
color: #F00   /* zkrácený hexadecimální zápis */
}

Ve všech předcházejících příkladech bude barva písma prvku <em> červená.

em {
color: CaptionText   /* systémové barvy */
}

Podpora v prohlížečích

Jde o jednu z nejčastěji a nejběžněji používanou vlastnost. Tato vlastnost je podporována většinou prohlížečů, kteří zvládají alespoň základy CSS1.

NN4 plná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 3; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Pokud začnete definovat barvu popředí, je nezbytné také nadefinovat barvu pozadí. Toto je nutné provést z toho důvodu, že specifikace kaskádových stylů neurčuje žádnou výchozí barvu pozadí a uživatelé mají možnost si zvolit libovolnou barvu pro pozadí. Pokud tedy nadefinujete jen barvu popředí, může se stát, že barva pozadí bude nevhodná, a text nebude vůbec čitelný (např. nastavíme červené písmo pomocí vlastnosti color, a uživatel bude mít nastaveno červené pozadí dokumentů).

Barva pozadí

Barva pozadí se určuje vlastností background-color. Jako její hodnota se používají klíčová slova.

color
Hodnoty: <barvy> | transparent | inherit
Výchozí hodnota: transparent
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
  <barva> viz díl č. 3
  transparent nastavuje průhledné pozadí prvku (tzn. že pokud prvek bude mít nastaveno pozadí na transparent, bude skrz pozadí tohoto prvku prosvítat pozadí rodičovského prvku)
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost nastavuje barvu prvku pro celou oblast obsahu, výplně a rámečku (blíže se s těmito pojmy seznámíme v některém z následujících dílů), ale okraje rámečku jsou vždy průhledné. Obsah prvku toto pozadí vždy překrývá.

Příklady nastavení barvy pozadí

body {
background-color: indigo   /* barva pozadí stránky*/
color: white   /* barva popředí (textu) */

}


Ukázka nastavení barvy pozadí a barvy popředí.

Podpora v prohlížečích

Tato vlastnost je dobře podporována všemi moderními prohlížeči.

NN4 pro správnou funkčnost této vlastnosti je potřeba mít u daného prvku nastavenu ještě vlastnost border (seznámíme se s ní později); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4, pro verzi 3 lze nastavit barvu pozadí jen ve vlastnosti background; Opera plná podpora od verze 5, verze 4 podpora s chybami; IE 5/MAC plná podpora; Konqueror plná podpora.

Obrázek na pozadí

Tak jako je možné nastavit barvu pozadí prvku, lze také nastavit obrázek na pozadí prvku. Obrázek na pozadí se definuje vlastností background-image. Jako její hodnoty se používá url obrázku.

background-image
Hodnoty: <uri> | none | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
  <uri> viz díl č. 4
  none na pozadí nebude žádný obrázek
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost určuje obrázek na pozadí prvku. Obrázek se určuje pomocí url (nebo-li adresy obrázku). Pokud budete používat relativní adresu obrázku, je potřeba mít na paměti, že musí být relativní k umístění stylového předpisu. Umístíte-li obrázek na pozadí prvku, mohou nastat dvě situace:

  1. Obrázek je větší něž prvek, pro který byl nastaven jako pozadí. Zobrazí se jen ta část obrázku, která odpovídá velikosti prvku
  2. Obrázek je menší něž prvek, pro který byl nastaven jako pozadí. Obrázkem bude vydlážděno pozadí prvku.

Obrázky na pozadí by měly být malé co do velikosti dat. Pokud toho chceme dosáhnout, je tedy potřeba použít malý obrázek. Proto se častěji budeme setkávat s druhou situací popsanou výše. Aby pozadí vydlážděné obrázkem bylo bezešvů, používají se speciálně upravené obrázky tzv. textury.

Není-li možné obrázek na pozadí zobrazit, pozadí prvku bude mít barvu, která byla nadefinována pomocí background-color. Proto je nezbytné také nadefinovat barvu pozadí. Stejně jako barva na pozadí tak i obrázek na pozadí by neměl zhoršovat čitelnost textu umístěného nad ním.

Příklad nastavení obrázku na pozadí

body {
background-image: url('pozadi.gif')   /* obrázek na pozadí stránky */
}


V předcházejícíh ukázkách byl použit obrázek o velikosti 50x50 px. První prvek měl nastvenou velikost na 10x10 px, a druhý má nastavenou velikost na 250x250 px.

Pro některé prvky nejde nastavit obrázek na pozadí: <iframe> (v žádném prohlížeči); <select> (v IE); <option> (v IE).

Podpora v prohlížečích

NN4 podpora s chybami; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4, pro verzi 3 lze nastavit obrázek na pozadí jen ve vlastnosti background; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Způsob opakování obrázku na pozadí

Pokud nastavíme obrázek na pozadí, a nastane situace 2 (výše popsaná), můžeme pomocí vlastnosti background-repeat nastavit způsob opakování. Jako její hodnota se používají klíčová slova.

background-repeat
Hodnoty: repeat | repeat-x | repeat-y |no-repeat | inherit
Výchozí hodnota: repeat
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
  repeat obrázek se opakuje vertikálně i horizontálně
  repeat-x obrázek se opakuje jen horizontálně
  repeat-y obrázek se opakuje jen vertikálně
  no-repeat obrázek se neopakuje
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost určuje, zda a jakým způsobem se bude obrázek opakovat na pozadí prvku. Aby bylo možné tuto vlastnost použít, je nutné také nadefinovat obrázek pomocí vlastnosti background-image.

Příklad nastavení opakování obrázku na pozadí

body {
background-image: url('texture.gif')   /* obrázek na pozadí stránky */
background-repeat: repeat   /* obrázek se opakuje vertikálně i horizontálně */
background-color: tan   /* nastaví barvu na pozadí */
}


body {
background-image: url('texture.gif')   /* obrázek na pozadí stránky */
background-repeat: repeat-x   /* obrázek se opakuje jen horizontálně */
background-color: tan   /* nastaví barvu na pozadí */
}


body {
background-image: url('texture.gif')   /* obrázek na pozadí stránky */
background-repeat: repeat-x   /* obrázek se opakuje jen vertikálně */
background-color: tan   /* nastaví barvu na pozadí */
}


body {
background-image: url('texture.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-color: tan   /* nastaví barvu na pozadí */
}


Podpora v prohlížečích

NN4 podpora s chybami; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 5, verze 4 nesprávně interpretuje při použití background-position; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Pozice obrázku na pozadí

Nastavení přesné pozice obrázku na pozadí lze provést pomocí vlastnosti background-position. Jako její hodnota se používají procenta, velikost a klíčová slova.

background-position
Hodnoty: <procenta> | <velikost> | <pozice x> | <pozice y> | inherit
Výchozí hodnota: 0% 0%
Ovlivňuje: blokové a nahrazené prvky
Dědičná: ne
Procenta: vztahují se k vlastní velikosti prvku
Média: vizuální
  <procenta> viz díl č. 2
  <velikost> viz díl č. 2
  <pozice x> left | center | right horizontální pozice
  <pozice y> top | center | botton vertikální pozice
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost určuje pozici obrázku na pozadí vzhledem k prvku. Hodnotu této vlastnosti tvoří dvojice hodnot oddělených mezerou (první je vždy uvedena horizontální pozice). U procentních a číselných hodnot jsou povoleny záporné hodnoty, a je možné libovolně kombinovat procentní a číselné hodnoty.

body {
background-image: url('back.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-position: 50% 50%   /* obrázek bude ve středu */
background-color: lightskyblue   /* nastaví barvu na pozadí */
}


body {
background-image: url('back.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-position: center top   /* obrázek bude ve středu horní hrany */
background-color: lightskyblue   /* nastaví barvu na pozadí */
}


body {
background-image: url('back.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-position: 200px 200px   /* obrázek bude v pravém dolním rohu */
background-color: lightskyblue   /* nastaví barvu na pozadí */
}


body {
background-image: url('back.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-position: 50px 50%   /* obrázek bude 50px od levého okraje a na výšku uprostřed */
background-color: lightskyblue   /* nastaví barvu na pozadí */
}


body {
background-image: url('back.gif')   /* obrázek na pozadí stránky */
background-repeat: no-repeat   /* obrázek se neopakuje */
background-position: -30px -30px   /* obrázek bude vertikálně i horizontálně -30px od kraje */
background-color: lightskyblue   /* nastaví barvu na pozadí */
}


Podpora v prohlížečích

NN4 nepodporuje (obrázek zůstává v levém horním rohu); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Posouvání obrázku na pozadí

U obrázku na pozadí lze nastavit pomocí vlastnosti background-attachment, zda se bude při scrolování také pohybovat či ne. Jako její hodnota se používají klíčová slova.

background-attachment
Hodnoty: scroll | fixed | inherit
Výchozí hodnota: scroll
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
  scroll obrázek se scroluje s dokumentem
  fixed obrázek se nescroluje s dokumentem
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost je různě podporována prohlížeči, a to i z toho důvodu, že specifikace připouští interpretaci hodnoty fixed jako scroll. Na pomalejších strojích (hlavně v závislosti na grafické kartě) způsobuje hodnota fixed pomalejší scrolování z důvodu nutnosti přepočítávání. Většinou se tato vlastnost nastavuje jen pro tag <body>.

Příklad posouvání obrázku na pozadí

body {
background-image: url('pozadi.gif')   /* obrázek na pozadí stránky */
background-attachment: scroll   /* obrázek se posouvá spolu s dokumentem */
}

ukázka zde

body {
background-image: url('pozadi.gif')   /* obrázek na pozadí stránky */
background-attachment: fixed   /* obrázek se neposouvá spolu s dokumentem */
}

ukázka zde

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Sdružená vlastnost

Sdružená vlastnost background umožňuje nastavit všechny předcházející vlastnosti současně.

background
Hodnoty: <background-color> | <background-image> | <background-repeat> | <background-position> | <background-attachment> | inherit
Výchozí hodnota: viz dílčí vlastnosti
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: jen pro 'background-position'
Média: vizuální
  <background-color> viz výše
  <background-image> viz výše
  <background-repeat> viz výše
  <background-position> viz výše
  <background-attachment> viz výše
  inherit hodnota se dědí po rodičovském prvku

Jde o úsporný zápis všech vlastností pro pozadí v kaskádových stylech. Všechny vlastnosti sdružené do vlastnosti background jsou nejdříve nastavené na výchozí hodnoty, a poté jsou všechny vlastnosti nastavené na hodnoty, které byly nadefinovány ve vlastnosti background. Při zadávání jednotlivých hodnot není potřeba dodržet jejich výše uvedené pořadí.

Ekvivalentní zápis

body { /* nastavení pomocí sdružené vlastnosti */
background: red url("pozadi.jpg") fixed  
}

body {/* nastavení pomocí jednotlivých vlastností */
background-color: red  
background-image: url("pozadi.jpg")  
background-attachment: fixed  
}

Podpora v prohlížečích

NN4 podporuje, ale je potřeba dodržet přesné pořadí zadávaných vlastností; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4, verze 3 podporuje jen background-color a background-image; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora .

Závěr

Dnes jsme se seznámili s vlastnostmi pro nastavení pozadí a barvy prvků v kaskádových stylech. Doufám, že vás čtení takto dlouhého dílu neunavilo.

Verze pro tisk

pridej.cz

 

DISKUZE

Neunavilo ;-)) 29.11.2004 08:05 Petr Zajíc




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

5.12.2017 11:50 / Thomas
kitchen renovations

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze