CSS - barva a pozadí
Nejvyšší čas začít se zabývat něčím praktickým a předvést první, v praxi hojně používané vlastnosti. Umožňují nastavit barvu textu a jeho pozadí.
Barva
Tohle samozřejmě už dávno víte – barva textu se nastavuje
vlastností color. Je dědičná a její výchozí hodnota závisí na
klientově nastavení (typicky černá).
Chcete-li nastavit implicitní barvu textu pro celou stránku, ideálně se k
tomu hodí prvek <body>, který v sobě nese celou její
viditelnou část. Chcete-li tedy mít veškerý text na stránce šedý, použijte
pravidlo
body { color: gray; }
Zadávání hodnot
Existuje celkem pět různých způsobů, jak zadat hodnotu zvolené barvy, z toho první tři se používají.
- jméno
Některým barvám byla přidělena jména, která jste ostatně viděli v řadě zdejší příkladů. Sahají od běžných (red, green) až po esoterická (teal, maroon). Specifikace CSS 2.1 obsahuje přehled definovaných barev, kde najdete i jejich definici a vzhled.
- #RRGGBB
Přesná definice barvy v RGB režimu. Zadává se v podobě šesti čísliv v šestnáctkové soustavě, z nichž první dvě označují intenzitu červené, druhé dvě zelené a poslední dvě modré složky. Toto je klasický způsob zadávání barev ve webu. Příklad najdete třeba ve výše odkazovaném přehledu jmen pro barvy, kde je u každého z nich uvedeno i barevné složení v tomto tvaru.
Dobrou zprávou je, že většina současných grafických editorů podporuje tento formát zápisu. Díky tomu můžete barvu zvolit interaktivně a pak si přečíst její kód.
- #RGB
Zkratka předchozí varianty. Používá pro každou barevnou složku jen jednu šestnáctkovou číslici, která zastupuje dvojici stejných číslic z předchozího zápisu. Barva #fc0 je tedy totéž co #ffcc00.
- rgb(r,g,b)
Opět se zadávají intenzity jednotlivých barevných složek, tentokrát ale čísly v desítkové soustavě, jejichž hodnota se pro každou složku pohybuje v rozmezí od 0 do 255.
- rgb(r%,g%,b%)
Varianta podobná předchozí, intenzita jednotlivých složek se ale zadává v rpocentech. Jejich hodnoty se pochopitelně pohybují od 0 % do 100 %.
Chcete-li mít nadpis stránky červený, je následujících pět pravidel zcela ekvivalentních:
h1 { color: red; }
h1 { color: #ff0000; }
h1 { color: #f00; }
h1 { color: rgb(255,0,0); }
h1 { color: rgb(100%,0%,0%); }
Barva pozadí
K nastavení barvy pozadí slouží vlastnost background-color.
Vlastnost není dědičná, ale její výchozí hodnotou je průhledné pozadí. To
znamená, že pozadím prvku prosvítá pozadí jeho rodiče. Čili vnější dojem je
podobný, jako kdyby dědičná byla (ve skutečnosti se takto chová lépe, než kdyby
se pozadí dědilo, pak by nastal problém s umisťováním obrázků na pozadí, o
nichž bude řeč později).
Je rozumné definovat barvu textu a pozadí společně. Rozhodně se nikdy nespoléhejte na výchozí nastavení v klientovi. Kdybyste například změnili barvu textu své stránky na tmavě hnědou a pozadí neurčili, může se stát, že stránku navštíví uživatel, který má jako implicitní nastaven va svém klientovi bílý text na černém pozadí. Vy mu předefinujete barvu textu, ale pozadí zůstane nezměněno. Výsledkem bude tmavě hnědý text na černém pozadí, což je krajně nežádoucí kombinace.
Kdykoli měníte barvu textu či pozadí, myslete na to, aby se stejnému nebo jemu nadřazenému prvku nastavila i vhodná párová barva.
Další informace
zpět: vytváření WWW stránek