• Úvod
• HTML
• CSS
• C++
• JavaScript
• Grafika & design
• Webhosting

HTML Barvy

Pro změnu barvy HTML elementu se používá atribut style. V HTML Existují 3 možnosti jak definovat barvu. Nejčastěji používanou možností je tzv. hexadecimalní kód barvy (například: #008000). Dále se použivá tzv. RGB hodnota (například: rgb(0,255,0)). Poslední možností je zadat jméno barvy (například: green). Ovšem pojmenovaných barev je pouze několik desítek a ne vždy si s nimi vystačíte.

Barva popředí

Barvou popředí rozumíme samotnou barvu HTML elementu (například nadpis h3). Chceme-li tuto barvu změnit, použijeme atribut style a CSS vlastnost color: style="color:barva", kde na místo slova "barva" přijde kód či jméno Vámi zvolené barvy. Například:

Výsledek:

Barva pozadí

Barvou pozadí rozumíme barvu, na které bude HTML element zobrazen. Chceme-li tedy například nastavit pro nadpis h3 žluté pozadí, použijeme opět atribut style. Ovšem v tomto případě CSS vlastnost color nahradíme vlastností background-color. Zápis tedy bude vypadat následovně:

Výsledek:

Barva rámečku

V HTML lze také prakticky všechny elementy orámovat rámečkem. Rámeček se vytvoří přidáním atributu style do otevíracího HTML tagu. Stejně jako u barvy pozadí či barvy popředí, existuje i pro rámeček speciální CSS vlastnost: border. Zkrácená definice rámečku vypadá následovně: style="border:šířka barva styl_rámečku".

Příklad:

Výsledek:

Definice barvy

V úvodu této lekce jsme si uvedli 3 metody jak v HTML definovat barvu. Nejjednoduší metodou je určitě, definovat barvu pomocí jména, protože jména barev se lehce pamatují. Haxadecimální nebo decimální kódy si jen tak lehce nazapamatujete. Ovšem těchto barev je pouze několik desítek - a to Vám vždy stačit nebude. Hexadecimální a decimální hodnoty barev poskytují mnohem více možností.

Hexadecimální kódy barev jsou 6-ti místnou kombinací písmen (A-F) a čísel (0-9). Jak už samotný název napovídá, jedná se o decimální (desítkový) kód převedený do šestnáctkové soustavy. Součástí tohoto kódu je symbol #, který se píše ještě před šestici písmen nebo čísel (například: #FF00ED).

Decimální nebo-li RGB hodnoty se skládají ze tří barev Red = červená,Green = zelená a Blue = modrá. Od každé barvy se udávají hodnoty od 0 do 255, Takže kód vypadá například takto: rgb(124,255,190)

Jak používat decimální a hexadecimální kódy?

Nyní se podíváme na to jak používat decimální a hexadecimální kódy barev. Vraťme se zpět na začátek této lekce k prvnímu příkladu se zeleným nadpisem. Použili jsme pojmenovanou barvu green. Nyní ovšem použijeme decimální a hexadecimální ekvivalenty této barvy:

Výsledek:

Všimněte si, že všechny nadpisy jsou zobrazeny stejnou barvou. Ve všech třech případech se totiž jedná a stejnou barvu, rozdíl je pouze v zápisu této barvy.

Pokud chceme jinou barvu jednoduše přepíšeme kód barvy:

Výsledek:

Jak získat kód barvy?

Použitím hexadecimálního nebo decimálního kódu, máte možnost vybrat si z více jak 16 milionů různých barev (256³ = 16777216). Každá hodnota reprezentuje jinou barvu.

Kódy barev jednoduše zjistíte např. v Adobe Photoshop nebo v generátoru barev.

Počítadlo