Cores HTML - Como definir uma cor de fundo em HTML? - Exemplo

Índice:

Anonim

Introdução às cores HTML

Este artigo aborda como usar cores no site usando HTML de maneiras simples e fáceis. As cores desempenham um papel importante na criação de sites com boa aparência. Não há HTML interno de tag individual, em vez disso, ele usa o atributo style ou a propriedade color. Precisamente, as cores são incorporadas nos elementos HTML usando a Cascading Style Sheet (CSS). As cores dão uma aparência elegante à página da web. A adição de cores à página da Web inclui a configuração de cores de fundo, tabelas, parágrafos, etc.

Como definir uma cor de fundo em HTML?

Tornar a cor de fundo mais clara torna o site mais bonito e mais ousado. Isso é feito usando cores, códigos de cores hexadecimais. Valores de cores RGB e RGBA (valor alfa de 0 a 1).

A cor hexadecimal é aplicada diretamente ao código Html usando o atributo Style dentro do elemento body do Html. Hex é uma combinação de números e letras. Abaixo está o exemplo que ilustra a cor de fundo na página da web.

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

Partes de codigo:

Para adicionar cor de fundo, você pode usar o atributo bgcolor para exibir. É compatível com todos os navegadores, exceto no 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

Como aplicar cores ao texto em HTML?

A aplicação de cores ao texto HTML é bastante fácil, podemos adicionar / alterar a cor do texto aplicando três maneiras: cor hexadecimal, valores HSL e nomes de cores. A seguir, são apresentadas as três técnicas diferentes para aplicar cores às páginas da Web correspondentes.

1. Nomes de cores

Isso é bastante simples, usando nomes de cores em inglês quando o aplicativo é direto. Esses nomes de cores são usados. A especificação de nomes de cores é um método direto e o W3C anunciou 16 cores básicas (preto, amarelo, vermelho, marrom, cinza, limão, verde, verde-oliva, prata, Aqua, azul, azul marinho, branco, roxo, fúcsia, azul-petróleo)

2. HSL

Matiz de saturação e valores de cores da luminosidade. A matiz é definida em 0 a 360 graus, saturação e luminosidade de 0 a 100%.

3. cor hexagonal

Para obter um resultado preciso, é aplicado um número hexadecimal de seis dígitos. Para elaborar os dois primeiros dígitos denotam Vermelho, os dois seguintes denotam Verde, os outros dois denotam Valor azul e precedidos por '#'.

O exemplo a seguir explica as diferentes maneiras de aplicar cores aos documentos.


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

Resultado:

Existem diferentes métodos para fazer a cor do texto, pois o HTML possui muitos aplicativos personalizáveis.

  1. Seção Aplicando estilo
  2. criando uma folha de estilos CSS individual
  3. Quebrando o texto

Como aplicar a cor do texto usando a seção?

Vamos ver vários métodos para usar cores HTML:

1. Quebrando usando cores HTML

O código abaixo altera a cor do texto no parágrafo com códigos HTML simples. existem 140 nomes coloridos para colorir os sites. O código abaixo demonstra como aplicar a cor do texto usando a seção


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Este conteúdo é muito claro

texto de parágrafo rosa

Resultado:

2. Usando o HEXCOLOR

Novamente, este exemplo leva a seção de estilo para declarar a cor hexadecimal seguida por um símbolo '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Olá Mundo

Texto de parágrafo hexa

Resultado:

3. Usando cores RGB

O vermelho, verde e azul usam 8 bits cada e seu valor varia de 0 a 255, o que produz várias cores. O exemplo abaixo seleciona a cor RGB por seus valores.



Color Picker

Texto de parágrafo azul

Resultado:

4. Método usando a folha de estilos



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

Cada etiqueta deve ser estilizada com cores.

Resultado:

5. Criando estilo CSS individual

arquivo .html




CSS style sheet




CSS style sheet




CSS style sheet

Documento HTMl múltiplo.

Olá Mundo!

Arquivo CSS externo lcolor.css

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

Resultado:

Como definir a cor da borda em HTML?

Isso é feito usando um atributo border color = ”“. Isso é feito usando o elemento Html

e até nós podemos criar efeitos 3D. A cor da borda é aplicada usando atributos diferentes, como borda = “largura”, bordercolor = “def de cor”, bordercolorlight = ”“. O CSS possui algumas propriedades de borda aprimoradas que ajudam na criação de bordas. O exemplo abaixo mostra a configuração de uma única cor de borda na tabela correspondente. Aqui indica linha da tabela e
indica dados da tabela e é iniciado usando tag. E a borda para eles é aplicada usando sua largura e cores




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

Resultado:

Agora vamos ver a configuração de duas cores de borda separadamente. O código abaixo usa o atributo de tabela com seus elementos.



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

Resultado:

Usando tag

É usado para agrupar todos os elementos e ajuda na visualização de uma página da web em sua posição específica. No código abaixo, usamos dois um para um parágrafo e outro para implementar o atributo de estilo, definindo pixels de borda e a espessura é aumentada, fornecendo a largura e adicionamos preenchimento para demonstrá-los à esquerda.



Sample border color using div

A natureza é linda

div com uma cor de borda.

Resultado:

Exemplo: explica como definir a cor para preenchimento e margem usando tags de classe e lista.



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

Resultado:

Como especificar cores usando valores em HTML?

Os valores básicos das cores variam de 0 a 255 para vermelho, azul e verde. O valor da cor é importante para fornecer a luminosidade.

A tabela abaixo mostra valores de amostra para as cores

Exemplo: O exemplo abaixo mostra diferentes valores de cores nas configurações de fundo.

Técnicas de mineração de dados é entender um padrão

Classificação


Predição


Regressão


Classificação, Técnicas de previsão

Cores HTML


Cores da tabela

Resultado:

Como usar valores de cores RGB em HTML?

RGB indica diretamente as cores azuis verde vermelho e usa a função RGB. Leva esses três valores como parâmetros e declarado como número inteiro, às vezes em porcentagem. Qualquer cor que desejamos, sua intensidade recebe um valor mais alto 255, pois um valor inteiro cai entre o e 255. Por exemplo, para ter uma cor azul, é preferível denotar (0, 0, 255). aqui os dois primeiros valores são marcados como 0, 0 e o último valor é 255 para azul.

Exemplo: cor 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.

É o país mais caro do mundo, Oslo é a capital desta cidade verde.

Resultado:

Como especificar a claridade das cores em HTML

A luminosidade da cor é definida pelo brilho que preferimos ser medido em porcentagem. A maioria dos web designers deseja usar leveza que RGB, que pode ser ajustado conforme os requisitos. Aqui, um preto define o brilho para 0% de branco e 100%. É especificado usando a função 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.

É o país mais caro do mundo, Oslo é a capital desta cidade verde.

Resultado:

Você pode tentar com valores diferentes para cores no exemplo acima.

Conclusão

Portanto, para concluir, vimos que isso tem propriedades diferentes. Antigamente, o desenvolvimento da web tinha muitas maneiras de especificar cores para o site e, atualmente, as cores mais populares são os códigos de cores RGB e Hex (o RGB é bem conhecido). Existem diferentes aplicações nas quais as cores são implementadas como uma escala móvel, paleta de cores, etc.

Artigos recomendados

Este é um guia para cores HTML. Aqui discutimos a introdução, como definir uma cor de plano de fundo em HTML, como aplicar cores ao texto em HTML etc. Você também pode consultar nossos outros artigos sugeridos para saber mais -

  1. Tags de tabela HTML
  2. Criar tabelas em HTML
  3. Estilos de fontes HTML
  4. Elementos do formulário HTML
  5. Programa para criar seletor de cores HTML (exemplo)
  6. Como implementar cores e alterar o estilo no Matlab?
  7. Como fazer upload de arquivo no PHP com exemplos