Úvod do barevného názvu v HTML

Název barvy v HTML hraje velmi důležitou roli v procesu navrhování webu a aplikací. Pomáhá to změnit vzhled a dojem naší webové stránky nebo aplikace. Stejně tak to činí naši aplikaci atraktivnější a interaktivnější. Existuje několik způsobů, jak definovat název barvy v HTML do formátu kódování HTML. jeden může používat další vlastnosti CSS k efektivnějšímu využití. Můžeme použít název barvy HTML na úrovni stránky jeho zahrnutím do části těla, která je také schopna nastavit individuální barvu na konkrétní prvek. Název barvy v HTML se záměrně používá pro barvu textu, barvu pozadí, barvu okraje, stíny, přechody a mnoho dalších.

Syntax

  • Existují různé způsoby, jak můžeme použít barvy HTML. Uvidíme se jeden po druhém.
  • Základním použitím barvy HTML je použít ji na text. jednoduše použijte jako barvu textu k zobrazení textu v různých barvách HTML.

1. Syntaxe barvy textu

color : color_name;

Uvidíme, jak bude tato syntax fungovat,

Welcome to EDUBCA

Ve výše uvedeném příkladu se zobrazí text Vítejte v EDUBCA v modré barvě jako:

  • S pomocí barev HTML je možné je také přidat jako barvu pozadí.

2. Syntaxe barvy pozadí

background-color:color_name;

Uvidíme, jak bude tato syntax fungovat,

V této kategorii jsou uloženy všechny informace o designu, které se šíří v mnoha podkategoriích kurzu Design.

  • Je také možné přidat barevné ohraničení kolem libovolného textu nebo prvku pomocí barvy HTML pomocí následující syntaxe:

3. Border color Syntax: border

value color_name;

Uvidíme, jak bude tato syntax fungovat,

EDUCBA free certification course

Typy názvu barvy v HTML

Existují různé způsoby, jak definovat názvy barev v HTML. Je těžké si zapamatovat jiné jméno v různých barvách. Je tedy třeba rozhodnout, že některé hodnoty budou mít různé barvy. Uvidíme se jeden po druhém

1. Hodnota RGB

  • Je to jeden ze způsobů, jak definovat názvy barev HTML v kombinaci hodnot formátu červené, zelené a modré barvy. Která se používá k definování intenzity barev mezi čísly 0 až 255?
  • Předpokládejme, že chceme definovat černou barvu pomocí kombinace RGB, pak se bude líbit RGB (0, 0, 0). Zde budou všechny parametry barvy nastaveny na 0. Bude tedy zobrazovat černou barvu.
  • Jako další RGB (0, 0255) se zobrazí barva modrá, protože 255 je nastaveno jako nejvyšší hodnota na modrou a druhá 0.
  • Pokud se chystáme na 3 stejné hodnoty RGB, bude generovat odstíny šedé barvy.

Příklad: RGB (0, 0, 0) pro nejtmavší barvu, kde RGB (255 255 255) pro nejsvětlejší barvu.

2. Hodnota HEX

  • Je to jeden z nejčastěji používaných formátů názvu barvy v HTML, ve kterém bude název barvy definován ve formátu hexadecimální hodnoty.
  • # rrggbb format obsahuje hodnoty z RR pro červenou, gg pro zelenou a bb pro modrou jsou umístěny mezi 00 toff hexadecimální hodnotou.
  • Podívejme se na jeden příklad definování barvy # 00ff00. takže tyto hodnoty budou generovány zelenou barvou, protože zelená obsahuje nejvyšší hodnotu (ff), kde má být druhá nastavena na 00.

3. Hodnota HSL

  • Další formát pro definování barvy HTML ve formě Hue, Saturation, Lightness.
  • Nyní uvidíme všechny pojmy jeden po druhém. Odstín je definován jako stupeň barvy, který je v rozmezí 0 až 360. ve kterém 0 pro červenou, 120 pro zelenou a 240 pro modrou.
  • Sytost definuje hodnotu barvy v procentech, ve kterých 0% říká odstín šedé, kde 100% pro plnou barvu.
  • Světlost také funguje jako procento, které definuje 0% pro černou, 50% není pro světlo ani tmavé, kde 100% pro bílou.

4. Hodnota RGBA

  • Tento typ barvy HTML definuje příponu pro barvu RGB včetně hodnoty alfa. Kde alfa se používá k definování neprůhlednosti barvy.
  • Hodnota alfa se pohybuje mezi 0, 0 (plně transparentní) až 1, 0 (vůbec netransparentní)
  • Příkladem je rgba (255, 99, 71, 0)

5. Hodnota HSLA

  • Funguje stejně jako hodnota barev HSL, navíc s ním hodnota alfa pro definování neprůhlednosti barvy.
  • hsla (8 100%, 80%, 0) pro plně transparentní barvu.
  • hsla (8 100%, 80%, 0, 9) za to, že není tak průhledná barva.

Příklady barevného názvu v HTML

Podívejme se, jak se název barvy používá v HTML pomocí několika níže uvedených příkladů:

Příklad č. 1

Podívejme se na obecný příklad ukazující, jak se bude používat název vzorové barvy v HTML:

HTML kód:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Dozvíte se více z neúspěchu než z úspěchu. Nenechte se zastavit. Znak selhání vytváří. Pokud pracujete na něčem, na čem vám opravdu záleží, nemusíte být tlačeni. Vize tě táhne

Výstup:

Příklad č. 2

Nyní uvádíme další příklad, který bude definovat všechny typy barev HTML takto:

HTML kód:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Výstup:

Ve výše uvedeném příkladu jsme schopni vidět použití různých typů barev HTML a jejich pojmenování v HTML.

Příklad č. 3

Jedno další použití barvy HTML je definování ohraničení prvku, které je následující:

V příkladu zde můžeme přidávat ohraničení do těla kódu a měnit také pozadí a barvu textu.

HTML kód:

Samoaktualizační teorie hovoří o vlastních odměnách spojených s výkonem úkolu, jako je spokojenost s prací, pocit úspěchu atd.

Výstup:

Závěr

Zjistili jsme, že barvy HTML jsou definovány s různými názvy, procentuální hodnotou, hexadecimální hodnotou, alfa hodnotou a mnoha dalšími. Název barvy v HTML se používá k provádění barev pro text, pro pozadí, pro ohraničení, pro gradace. Existují různé typy definující název barvy HTML jako RGB, hex, hsl, rgba, hsla.

Doporučené články

Toto je průvodce barevným názvem v HTML. Zde diskutujeme úvod, Druhy barevného názvu v HTML spolu s příklady, Syntaxe a HTML kódy. Další informace naleznete také v dalších navrhovaných článcích -

  1. Atribut stylu HTML
  2. Značky tabulky HTML
  3. Odkaz na obrázek v HTML
  4. Vytvořit tabulky v HTML
  5. Události HTML

Kategorie:

Nástroje pro vývoj webových aplikací