Colori HTML - Come impostare un colore di sfondo in HTML? - Esempio

Sommario:

Anonim

Introduzione ai colori HTML

Questo articolo illustra come utilizzare i colori nel sito Web utilizzando HTML in modo semplice e intuitivo. I colori svolgono un ruolo importante nella creazione di siti Web per apparire e sentirsi bene. Non esiste un tag HTML incorporato individuale, ma utilizza l'attributo di stile o la proprietà color. Precisamente, i colori sono incorporati negli elementi HTML usando il CSS (Cascading Style Sheet). I colori danno un aspetto elegante alla pagina web. L'aggiunta di colori alla pagina Web include l'impostazione di colori di sfondo, tabelle, paragrafi, ecc.

Come impostare un colore di sfondo in HTML?

Rendere il colore di sfondo più luminoso rende il sito Web più bello e più audace. Viene fatto usando colori, codici colore esadecimali. Valori di colore RGB e RGBA (valore alfa da 0 a 1).

Il colore esadecimale viene applicato direttamente al codice HTML mediante l'attributo Style all'interno dell'elemento body dell'html. Hex è una combinazione di numeri e lettere. Di seguito è riportato l'esempio che illustra il colore di sfondo nella pagina 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

Frammenti di codice:

Per aggiungere il colore di sfondo è possibile utilizzare l'attributo bgcolor per la visualizzazione. È compatibile con tutti i browser tranne 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

Come applicare il colore al testo in HTML?

Applicare il colore al testo HTML è abbastanza semplice, possiamo aggiungere / cambiare il colore del testo applicando tre modi: colore esadecimale, valori HSL e nomi dei colori. Di seguito sono riportate le tre diverse tecniche per applicare il colore alle pagine Web corrispondenti.

1. Nomi dei colori

Questo è abbastanza semplice usando i nomi dei colori inglesi quando l'applicazione è diretta, vengono usati questi nomi di colori. La specifica dei nomi dei colori è un metodo diretto e il W3C ha annunciato 16 colori di base (nero, giallo, rosso, marrone, grigio, lime, verde, verde oliva, argento, verde acqua, blu, blu scuro, bianco, viola, fucsia, verde acqua)

2. HSL

Valori di saturazione della tonalità e luminosità. La tonalità è definita da 0 a 360 gradi, la saturazione e la luminosità da 0 a 100%.

3. Colore esadecimale

Per ottenere un risultato preciso, viene applicato un numero esadecimale a sei cifre. Per elaborare le prime due cifre indicano il rosso, le due successive indicano il verde, le altre due indicano il valore del blu e precedute da '#'.

L'esempio seguente spiega i diversi modi di applicare i colori ai documenti.


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

Produzione:

Esistono diversi metodi per fare il colore del testo in quanto HTML ha molte applicazioni personalizzabili.

  1. Applicazione della sezione Stile
  2. creando un singolo foglio di stile CSS
  3. Avvolgere il testo

Come applicare il colore del testo usando la sezione?

Vediamo vari metodi per l'utilizzo dei colori HTML:

1. Avvolgimento con i colori HTML

Sotto il codice cambia il colore del testo nel paragrafo con semplici codici HTML. ci sono 140 nomi colorati per colorare i siti web. Il codice seguente mostra come applicare il colore del testo usando la sezione.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Questo contenuto è molto chiaro

testo in paragrafo rosa

Produzione:

2. Utilizzo di HEXCOLOR

Ancora una volta, questo esempio prende la sezione di stile per dichiarare il colore esadecimale seguito da un simbolo '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Ciao mondo

Testo del paragrafo esadecimale

Produzione:

3. Utilizzo del colore RGB

Il rosso, il verde e il blu usano 8 bit ciascuno e il loro valore varia da 0 a 255 che produce vari colori. L'esempio seguente seleziona il colore RGB in base ai loro valori.



Color Picker

Testo in paragrafo blu

Produzione:

4. Metodo usando il foglio di stile



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

Ogni etichetta deve essere abbinata a colori.

Produzione:

5. Creazione di singoli stili CSS

file .html




CSS style sheet




CSS style sheet




CSS style sheet

Documento HTMl multiplo.

Ciao mondo!

File CSS esterno lcolor.css

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

Produzione:

Come impostare il colore del bordo in HTML?

Viene fatto usando un attributo border color = "“. Viene fatto utilizzando l'elemento HTML

e anche noi possiamo creare effetti 3D. Il colore del bordo viene applicato utilizzando attributi diversi come border = “width”, bordercolor = “color def”, bordercolorlight = ”“. CSS ha alcune proprietà dei bordi migliorate che aiutano a creare i bordi. L'esempio seguente mostra l'impostazione di un singolo colore del bordo sulla tabella corrispondente. Qui indica la riga della tabella e
indica i dati della tabella e si inizia a usare etichetta. E il bordo per loro viene applicato usando la loro larghezza e colori




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

Produzione:

Ora vediamo l'impostazione di due colori di bordo separatamente. Il codice seguente usa l'attributo table con i loro elementi.



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

Produzione:

Usando il tag

Viene utilizzato per raggruppare tutti gli elementi e aiuta a visualizzare una pagina Web nella sua posizione particolare. Nel codice seguente ne abbiamo usati due uno per un paragrafo e l'altro per implementare l'attributo di stile impostando i pixel del bordo e lo spessore viene aumentato fornendo la larghezza e abbiamo aggiunto un'imbottitura per dimostrarli a sinistra.



Sample border color using div

La natura è meravigliosa

div con un colore del bordo.

Produzione:

Esempio: questo spiega come impostare il colore per il riempimento e il margine usando i tag class e list.



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

Produzione:

Come specificare il colore usando i valori in HTML?

I valori di colore di base variano da 0 a 255 per rosso, blu, verde. Il valore del colore è importante nel dare la leggerezza.

La tabella seguente mostra i valori di esempio per i colori

Esempio: l'esempio seguente mostra diversi valori di colore nelle impostazioni di sfondo.

Le tecniche di Data Mining sono di comprendere uno schema

Classificazione


Predizione


Regressione


Classificazione, tecniche di previsione

Colori HTML


Colori del tavolo

Produzione:

Come utilizzare i valori di colore RGB in HTML?

RGB indica direttamente i colori blu verde rosso e utilizza la funzione RGB. Prende questi tre valori come parametri e viene dichiarato come intero a volte in percentuale. Qualunque colore desideriamo che la sua intensità riceva un valore superiore 255 poiché un valore intero cade tra o a 255. Ad esempio, per avere un colore blu si preferisce denotare (0, 0.255). qui i primi due valori sono contrassegnati come 0, 0 e l'ultimo valore è 255 per il blu.

Esempio: colore 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.

È il paese più costoso del mondo, Oslo è la capitale di questa città verde.

Produzione:

Come specificare la leggerezza dei colori in HTML

La luminosità del colore è definita dalla luminosità che preferiamo sia misurata in percentuale. La maggior parte dei web designer desidera utilizzare la leggerezza rispetto a RGB, che può essere regolata secondo i requisiti. Qui un nero imposta la luminosità su 0% bianco impostato su 100%. È specificato usando la funzione 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.

È il paese più costoso del mondo, Oslo è la capitale di questa città verde.

Produzione:

Puoi provare con valori diversi per il colore nell'esempio sopra.

Conclusione

Pertanto, per concludere, abbiamo visto che questo ha proprietà diverse. In passato lo sviluppo web ha molti modi per specificare i colori per il loro sito Web e oggigiorno le colorazioni più popolari sono i codici colore RGB e Hex (RGB è ben noto). Esistono diverse applicazioni in cui i colori sono implementati come una scala mobile, una tavolozza di colori, ecc.

Articoli consigliati

Questa è una guida ai colori HTML. Qui discutiamo l'introduzione, come impostare un colore di sfondo in HTML, come applicare il colore al testo in HTML, ecc. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -

  1. Tag tabella HTML
  2. Crea tabelle in HTML
  3. Stili di font HTML
  4. Elementi del modulo HTML
  5. Programma per creare selettore colore HTML (esempio)
  6. Come implementare il colore e cambiare lo stile in Matlab?
  7. Come caricare file in PHP con esempi