HTML barvy - Jak nastavit barvu pozadí v HTML? - Příklad

Obsah:

Anonim

Úvod do HTML barev

Tento článek popisuje, jak používat barvy na webu pomocí HTML jednoduchým a snadným způsobem. Barvy hrají důležitou roli při vytváření webových stránek, aby vypadaly a cítily se dobře. Neexistuje žádná samostatná vestavěná značka HTML, která místo toho využívá atribut stylu nebo vlastnost color. Přesně jsou barvy vloženy do prvků HTML pomocí kaskádových stylů (CSS). Barvy dodávají webové stránce elegantní vzhled. Přidání barev na webovou stránku zahrnuje nastavení barev pozadí, tabulek, odstavců atd.

Jak nastavit barvu pozadí v HTML?

Díky zesvětlení barvy pozadí bude web vypadat pěkně a odvážněji. To se provádí pomocí barev, hexadecimálních barevných kódů. Hodnoty barev RGB a RGBA (hodnota alfa 0 na 1).

Hexová barva se aplikuje přímo na Html kód pomocí atributu Styl uvnitř elementu těla Html. Hex je kombinace jak čísel, tak písmen. Níže je příklad ilustrující barvu pozadí na webové stránce.

My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo

Úryvky kódu:

Chcete-li přidat barvu pozadí, můžete k zobrazení použít atribut bgcolor. Je kompatibilní se všemi prohlížeči kromě HTML 5.

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Jak aplikovat barvu na text v HTML?

Použití barvy na text HTML je poměrně snadné, můžeme přidat / změnit barvu textu použitím tří způsobů, konkrétně hexadecimální, HSL hodnoty a názvy barev. Následuje tři různé techniky, jak aplikovat barvu na odpovídající webové stránky.

1. Názvy barev

To je docela jednoduché pomocí anglických názvů barev, když je aplikace přímo vpřed, jsou tyto názvy barev použity. Názvy barev jsou přímé metody a W3C oznámila 16 základních barev (černá, žlutá, červená, kaštanová, šedá, limetková, zelená, olivová, stříbrná, aqua, modrá, námořnická, bílá, fialová, fuchsiová, šedozelená)

2. HSL

Barevná hodnota odstínu a sytosti světla. Odstín je definován v 0 až 360 stupních, nasycení a lehkost od 0 do 100%.

3. Hexová barva

K získání přesného výsledku se použije šestimístné šestnáctkové číslo. Pro vypracování prvních dvou číslic označujeme červenou, další dvě označují zelenou, další dvě označují modrou hodnotu a předchází „#“.

Následující příklad vysvětluje různé způsoby použití barev na dokumenty.


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

    EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

Výstup:

Barvu textu lze provádět různými způsoby, protože HTML obsahuje mnoho přizpůsobitelných aplikací.

  1. Použití sekce Styl
  2. vytvoření individuální šablony stylů CSS
  3. Balení textu

Jak použít barvu textu pomocí sekce?

Podívejme se na různé způsoby použití barev HTML:

1. Balení pomocí HTML barev

Níže uvedený kód mění barvu textu v odstavci pomocí jednoduchých kódů HTML. Existuje 140 barevných jmen pro zabarvení webových stránek. Níže uvedený kód ukazuje, jak použít barvu textu pomocí sekce.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Tento obsah je velmi jasný

růžový text odstavce

Výstup:

2. Pomocí HEXCOLOR

Tento příklad opět bere v sekci styl deklaraci hex barvy následovanou symbolem #.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Ahoj světe

Hexa odstavec text

Výstup:

3. Použití barvy RGB

Červená, zelená, modrá používá 8 bitů a jejich hodnota se pohybuje od 0 do 255, což vytváří různé barvy. Níže uvedený příklad vybírá barvu RGB podle jejich hodnot.



Color Picker

Modrý odstavec text

Výstup:

4. Metoda pomocí listu stylů



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents

Každá značka má být stylizovaná s barvami.

Výstup:

5. Vytvoření individuálního stylu CSS

.html soubor




CSS style sheet




CSS style sheet




CSS style sheet

Více dokumentů HTMl.

Ahoj světe!

Externí soubor CSS lcolor.css

.lcolor ( font-size: 40px;
color:red )

Výstup:

Jak nastavit barvu ohraničení v HTML?

To se provádí pomocí atributu border color = "“. To se provádí pomocí prvku HTML

a dokonce můžeme vytvořit 3D efekty. Barva ohraničení se používá s použitím různých atributů, jako je border = „width“, bordercolor = „color def“, bordercolorlight = „“. CSS má některé vylepšené vlastnosti ohraničení, které pomáhají při vytváření ohraničení. Níže uvedený příklad ukazuje nastavení barvy jediného ohraničení na odpovídající tabulku. Tady označuje řádek tabulky a
označuje data tabulky a začíná se používat štítek. A ohraničení pro ně je aplikováno pomocí jejich šířky a barev




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California



Chicago
new york
Texas
California

Výstup:

Nyní se podívejme na nastavení dvou okrajů samostatně. Níže uvedený kód používá atribut tabulky s jejich prvky.



Samsung Nokia Apple Iphone Xiami Redmi



Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi

Výstup:

Pomocí značky

Používá se k seskupení všech prvků a pomáhá při prohlížení webové stránky na jejím konkrétním místě. V níže uvedeném kódu jsme použili dva pro odstavec a druhý pro implementaci atributu stylu nastavením okrajových pixelů a tloušťka se zvětšuje šířením šířky a přidali jsme výplň, abychom je ukázali vlevo.



Sample border color using div

Příroda je krásná

div s barvou ohraničení.

Výstup:

Příklad: Toto vysvětluje, jak nastavit barvu pro výplň a okraj pomocí značek třídy a seznamu.



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree



    Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree

Výstup:

Jak určit barvu pomocí hodnot v HTML?

Základní hodnoty barev se pohybují od 0 do 255 pro červenou, modrou a zelenou. Hodnota barvy je důležitá při rozdávání světla.

Níže uvedená tabulka ukazuje vzorové hodnoty barev

Příklad: Níže uvedený příklad ukazuje různé hodnoty barev v jejich nastavení pozadí.

Techniky dolování dat je pochopit vzorce

Klasifikace


Předpověď


Regrese


Klasifikace, predikční techniky

HTML barvy


Barvy stolů

Výstup:

Jak používat hodnoty barev RGB v HTML?

RGB přímo označuje červenou zelenou modrou barvu a používá funkci RGB. Tyto tři hodnoty bere jako parametry a někdy je deklarován jako celé číslo v procentech. Ať už chceme jakoukoli barvu, její intenzita dostane vyšší hodnotu 255, protože celé číslo klesá mezi o až 255. Například, pokud má modrou barvu, je výhodné označovat (0, 0 255). zde jsou první dvě hodnoty označeny jako 0, 0 a poslední hodnota je 255 pro modrou.

Příklad: barva RGB



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.

Je to nejdražší země na světě, Oslo je hlavním městem tohoto zeleného města.

Výstup:

Jak určit lehkost barev v HTML

Světlost barvy je definována jasem, který preferujeme, měří se v procentech. Většina webových designérů si přeje používat lehkost než RGB, kterou lze upravit podle požadavků. Zde černá nastavila jas na 0% bílá nastavena na 100%. Je specifikována pomocí funkce hsl ().



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.

Je to nejdražší země na světě, Oslo je hlavním městem tohoto zeleného města.

Výstup:

Ve výše uvedeném příkladu můžete vyzkoušet různé hodnoty barev.

Závěr

Na závěr jsme tedy viděli, že to má odlišné vlastnosti. V dřívějších dobách má vývoj webových aplikací mnoho způsobů, jak určit barvy pro jejich webové stránky, a v dnešní době jsou nejoblíbenějšími barevnými kanály RGB a Hex barevné kódy (RGB je dobře známa). Existují různé aplikace, kde jsou barvy implementovány jako posuvné měřítko, paleta barev atd.

Doporučené články

Toto je průvodce barvami HTML. Zde diskutujeme o úvodu, Jak nastavit barvu pozadí v HTML, Jak aplikovat barvu na text v HTML atd. Další informace naleznete také v našich dalších navrhovaných článcích -

  1. Značky tabulky HTML
  2. Vytvořit tabulky v HTML
  3. Styly písem HTML
  4. Prvky formuláře HTML
  5. Program pro vytvoření výběru barvy HTML (příklad)
  6. Jak implementovat barvu a změnit styl v Matlabu?
  7. Jak nahrát soubor v PHP s příklady