Home >> HTML návod >> HTML Barvy

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:

<h3 style="color:green">HTML Barvy</h3>

Výsledek:

HTML Barvy

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ě:

<h3 style="background-color:yellow">HTML Barvy</h3>

Výsledek:

HTML Barvy

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:

<h3 style="border:2px red solid;">HTML Barvy</h3>

Výsledek:

HTML Barvy

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:

<h3 style="color:green">HTML Barvy</h3>
<h3 style="color:#008000">HTML Barvy</h3>
<h3 style="color:rgb(0,128,0)">HTML Barvy</h3>

Výsledek:

HTML Barvy

HTML Barvy

HTML Barvy

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:

<h3 style="color:#BF13A1">HTML Barvy</h3>

Výsledek:

HTML Barvy

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 (2563 = 16777216). Každá hodnota reprezentuje jinou barvu.

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

HTML Návod
HTML Návod - HOME
Úvod
Začínáme
HTML Tagy
HTML Formátování textu
HTML Atributy
HTML Barvy
HTML Odkazy
HTML Obrázky
HTML Metadata
HTML Komentáře
HTML Formuláře
HTML Tabulky
Psaní HTML značek
HTML & CSS
HTML & JAVASCRIPT
HTML Webové šablony
HTML Test
Shrnutí
Užitečné seznamy a nástroje
Kompletní seznam HTML tagů
Kódy HTML značek
Pojmenované barvy v HTML
Generátor hexadecimálního kódu barev
HTML ukázky
Hudba na web
©2008 - 2011 Klikzone.cz
Ráj aut - inzerce nových i ojetých aut