Culori HTML - Cum să setați o culoare de fundal în HTML? - Exemplu

Cuprins:

Anonim

Introducere pe culorile HTML

Acest articol acoperă modul de utilizare a culorilor din site-ul web folosind HTML în moduri simple și simple. Culorile joacă un rol important în crearea de site-uri web pentru a arăta și a se simți bine. Nu există o etichetă individuală HTML încorporată, ci folosește atributul stil sau proprietatea culorii. Mai precis, culorile sunt încorporate în elementele HTML folosind Cascading Style Sheet (CSS). Culorile oferă aspect elegant paginii web. Adăugarea culorilor pe pagina web include setarea culorilor de fundal, tabelelor, alineatelor etc.

Cum să setați o culoare de fundal în HTML?

Crearea de culoare de fundal luminează face site-ul web să arate destul de mai îndrăzneț. Se realizează folosind culori, coduri de culori Hex. Valori de culoare RGB și RGBA (valoarea Alpha 0 până la 1).

Culoarea hexagonală este aplicată direct codului Html folosind atributul Style din interiorul elementului corpului Html. Hex este o combinație de numere și litere. Mai jos este prezentat exemplul care ilustrează culoarea de fundal pe 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

Fragmente de cod:

Pentru a adăuga culoare de fundal puteți utiliza atributul bgcolor pentru afișare. Este compatibil cu toate browserele, cu excepția 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

Cum se aplică culoarea textului în HTML?

Aplicarea culorii textului HTML este destul de ușoară, putem adăuga / schimba culoarea textului prin aplicarea a trei moduri, respectiv culoare Hex, valori HSL și nume de culoare. Următoarele sunt cele trei tehnici diferite pentru aplicarea culorii pe paginile web corespunzătoare.

1. Numele culorilor

Acest lucru este destul de simplu folosind nume de culori în limba engleză atunci când aplicația este directă, aceste nume de culori sunt utilizate. Precizarea numelor de culori sunt metode directe, iar W3C a anunțat 16 culori de bază (negru, galben, roșu, maroniu, gri, var, verde, măslin, argint, acvatic, albastru, bleumarin, alb, purpuriu, fuchsia, teal)

2. HSL

Saturația nuanțelor și valorile culorii ușoare. Nuanța este definită în 0 până la 360 de grade, saturație și ușurință de la 0 la 100%.

3. Culoare hex

Pentru a obține un rezultat precis, se aplică un număr hexadecimal de șase cifre. Pentru a elabora primele două cifre se indică roșu, următoarele două notează verde, celelalte două denotă valoare albastră și precedate de „#”.

Următorul exemplu explică diferitele moduri de aplicare a culorilor la documente.


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

ieşire:

Există diferite metode pentru a face culoarea textului, deoarece HTML are o mulțime de aplicații personalizabile.

  1. Aplicarea secțiunii Style
  2. crearea unei foi de stil CSS individuale
  3. Înfășurarea textului

Cum se aplică culoarea textului folosind secțiunea?

Să vedem diverse metode de utilizare a culorilor HTML:

1. Înfășurare folosind culori HTML

Codul de mai jos schimbă culoarea textului din paragraf cu coduri HTML simple. Există 140 de nume colorate pentru a colora site-urile web. Codul de mai jos arată cum se aplică culoarea textului folosind secțiunea.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Acest conținut este foarte clar

text de paragraf roz

ieşire:

2. Folosind HEXCOLOR

Din nou, acest exemplu ia secțiunea de stil pentru a declara culoarea hexagonală urmată de un simbol '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Salut Lume

Hexa paragraf text

ieşire:

3. Folosind culoarea RGB

Roșu, verde, albastru folosește 8 biți fiecare, iar valoarea lor variază de la 0 la 255, ceea ce produce diverse culori. Exemplul de mai jos alege culoarea RGB după valorile lor.



Color Picker

Text de paragraf albastru

ieşire:

4. Metoda utilizând foaia de stil



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

Fiecare etichetă trebuie să fie stilată cu culori.

ieşire:

5. Crearea stilului CSS individual

fișier .html




CSS style sheet




CSS style sheet




CSS style sheet

Document multiplu HTMl.

Salut Lume!

Fișier CSS extern lcolor.css

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

ieşire:

Cum să setați culoarea chenarului în HTML?

Se realizează folosind un chenar de atribut color = "". Se realizează folosind elementul Html

ba chiar putem crea efecte 3D. Culoarea bordurii se aplică folosind diferite atribute precum bordura = „lățimea”, bordercolor = „culoarea def”, bordercolorlight = ”„. CSS are câteva proprietăți de graniță îmbunătățite care ajută la crearea de frontiere. Exemplul de mai jos arată setarea unei singure culori de bord pe tabelul corespunzător. Aici denumește rândul tabelului și
indică datele din tabel și este început să folosească etichetă. Iar granița pentru ei se aplică folosind lățimea și culorile lor




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

ieşire:

Acum să vedem setarea separată a două culori de bordură. Codul de mai jos folosește atributul tabelului cu elementele lor.



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

ieşire:

Folosind tag

Este folosit pentru a grupa toate elementele și ajută la vizualizarea unei pagini web la poziția sa particulară. În codul de mai jos am folosit două unu pentru un paragraf și altul pentru a implementa atributul stilului prin setarea pixelilor de bordură și grosimea este crescută dând lățimea și am adăugat căptușeală pentru a le demonstra la stânga.



Sample border color using div

Natura este frumoasă

div cu o culoare de bordură.

ieşire:

Exemplu: Aceasta explică modul de setare a culorii pentru umplere și marjă folosind etichete de clasă și 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

ieşire:

Cum se specifică culoarea folosind valori în HTML?

Valorile de bază ale culorilor variază de la 0 la 255 pentru roșu, albastru, verde. Valoarea culorii este importantă pentru a da lumină.

Mai jos tabelul prezintă valorile de eșantion pentru culori

Exemplu: Exemplul de mai jos arată valori de culoare diferite în setările de fundal.

Tehnicile de extragere a datelor este de a înțelege un model

Clasificare


prezicere


regresiune


Clasificare, tehnici de predicție

Culori HTML


Culorile mesei

ieşire:

Cum se utilizează valorile de culoare RGB în HTML?

RGB denotă în mod direct culorile albastru roșu verde și folosește funcția RGB. Ea ia aceste trei valori ca parametri și este declarată drept număr întreg, uneori procentual. Indiferent de culoarea pe care o dorim, intensitatea acesteia este dată cu o valoare mai mare 255, deoarece o valoare întreagă se încadrează între o până la 255. De exemplu, pentru a avea o culoare albastră, este de preferat să fie indicat (0, 0, 255). aici primele două valori sunt marcate ca 0, 0, iar ultima valoare este de 255 pentru albastru.

Exemplu: culoare 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.

Este cea mai scumpă țară din lume, Oslo este capitala acestui oraș verde.

ieşire:

Cum se specifică ușurința culorilor în HTML

Luminozitatea culorii este definită prin luminozitatea pe care o preferăm este măsurată în procente. Majoritatea proiectanților web doresc să utilizeze ușurință decât RGB, care poate fi ajustat conform cerințelor. Aici un negru setează luminozitatea la 0% alb setat la 100%. Este specificat folosind funcția 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.

Este cea mai scumpă țară din lume, Oslo este capitala acestui oraș verde.

ieşire:

Puteți încerca cu valori diferite pentru culoare în exemplul de mai sus.

Concluzie

Prin urmare, pentru a încheia, am văzut că aceasta are proprietăți diferite. În zilele anterioare, dezvoltarea web are multe modalități de a specifica culorile pentru site-ul lor web, iar în zilele noastre cele mai populare colorări sunt codurile de culori RGB și Hex (RGB este binecunoscut). Există diferite aplicații în care culorile sunt puse în aplicare ca o scară glisantă, paleta de culori etc.

Articole recomandate

Acesta este un ghid pentru HTML Colours. Aici discutăm Introducerea, Cum să setați o culoare de fundal în HTML, Cum să aplicați culoarea textului în HTML, etc. Puteți parcurge și alte articole sugerate pentru a afla mai multe -

  1. Etichete de tabel HTML
  2. Creați tabele în HTML
  3. Stiluri de fonturi HTML
  4. Elemente de formulare HTML
  5. Program pentru crearea selectorului de culori HTML (exemplu)
  6. Cum să implementați culoarea și să schimbați stilul în Matlab?
  7. Cum se încarcă fișierul în PHP cu exemple