Barve HTML - Kako nastaviti barvo ozadja v HTML? - Primer

Kazalo:

Anonim

Uvod v HTML Barve

Ta članek zajema uporabo barv na spletnem mestu z uporabo HTML na preproste in enostavne načine. Barve igrajo pomembno vlogo pri ustvarjanju spletnih mest, da bi izgledali in se počutili dobro. Namesto tega ni nobene vgrajene HTML oznake, temveč uporablja atribut sloga ali barvno lastnost. Natančno so barve vdelane v elemente HTML s pomočjo Cascading Style Sheet (CSS). Barve dajejo eleganten videz spletni strani. Dodajanje barv na spletno stran vključuje nastavitev barv ozadja, tabel, odstavkov itd.

Kako nastaviti barvo ozadja v HTML?

Če barva ozadja svetlejša, spletno mesto izgleda lepše in drznejše. Izvede se z uporabo barv, Hex barvnih kod. RGB in RGBA barvne vrednosti (alfa vrednost 0 do 1).

Šestnajsta barva se nanese neposredno na kodo Html s pomočjo atributa Style znotraj elementa telesa Html. Šestica je kombinacija številk in črk. Spodaj je primer, ki ponazarja barvo ozadja na spletni strani.

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

Izrezki kode:

Če želite dodati barvo ozadja, lahko za prikaz uporabite atribut bgcolor. Združljiv je z vsemi brskalniki, razen v 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

Kako uporabiti barvo za besedilo v HTML?

Nanašanje barve na besedilo HTML je zelo enostavno, barvo besedila lahko dodamo / spremenimo s pomočjo treh načinov, in sicer s šestnajsto barvo, HSL vrednostmi in barvnimi imeni. Sledijo tri različne tehnike za nanašanje barve na ustrezne spletne strani.

1. Imena barv

To je preprosto, če uporabljate angleška imena barv, ko je aplikacija naravnost naprej, se uporabljajo ta imena barv. Določanje imen barv je neposredna metoda in W3C je napovedal 16 osnovnih barv (črna, rumena, rdeča, Maroon, siva, apna, zelena, olivna, srebrna, akva, modra, mornarsko, bela, vijolična, fuksija, teal)

2. HSL

Barvne vrednosti nasičenosti in lahkotnosti. Odtenek je določen na 0 do 360 stopinj, nasičenost in lahkotnost od 0 do 100%.

3. Šestnajsta barva

Za natančen rezultat uporabimo šestmestno šestnajstiško število. Za izdelavo prve dvoštevilčne označimo rdečo, naslednji dve označujeta zeleno, druga dva pa modro in pred njo je „#“.

Naslednji primer razlaga različne načine nanašanja barv na dokumente.


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

Izhod:

Obstajajo različni načini barvanja besedila, saj ima HTML veliko prilagodljivih aplikacij.

  1. Uporaba razdelka Slog
  2. ustvarjanje posameznega lista s slogom CSS
  3. Zavijanje besedila

Kako uporabiti barvo besedila s pomočjo razdelka?

Oglejmo si različne načine uporabe barv HTML:

1. Zavijanje z uporabo barv HTML

Spodaj koda spremeni barvo besedila v odstavku s preprostimi kodami HTML. Obstaja 140 barvnih imen, ki obarvajo spletna mesta. Spodaj koda prikazuje, kako uporabiti barvo besedila s pomočjo razdelka.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Ta vsebina je zelo jasna

roza besedilo odstavka

Izhod:

2. Uporaba HEXCOLOR

Spet je v tem primeru razdelek o slogu, da razglasi šestnajsto barvo, ki ji sledi simbol '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Pozdravljen, svet

Besedilo odstavka heksa

Izhod:

3. Uporaba RGB barve

Rdeča, zelena, modra uporablja 8 bitov, njihova vrednost pa je od 0 do 255, kar povzroča različne barve. Spodnji primer izbere RGB barvo glede na njihove vrednosti.



Color Picker

Modro besedilo odstavka

Izhod:

4. Metoda z uporabo lista Style



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

Vsaka oznaka, ki jo je treba oblikovati z barvami.

Izhod:

5. Ustvarjanje posameznega sloga CSS

.html datoteka




CSS style sheet




CSS style sheet




CSS style sheet

Več HTMl dokument.

Pozdravljen, svet!

Zunanja datoteka CSS lcolor.css

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

Izhod:

Kako nastaviti barvno barvo v HTML?

To se naredi z atributom obrobne barve = "". Izvede se s pomočjo elementa Html

in celo lahko ustvarimo 3D učinke. Barva obrobe se uporablja z različnimi atributi, kot so border = "width", bordercolor = "color def", bordercolorlight = "". CSS ima nekaj izboljšanih lastnosti meja, ki pomagajo pri ustvarjanju obrob. Spodnji primer prikazuje nastavitev ene same barve obrobe v ustrezno tabelo. Tukaj označuje vrstico tabele in
označuje podatke tabele in jo začnemo uporabljati oznaka. In meja zanje se uporablja z njihovo širino in barvami




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

Izhod:

Zdaj pa si poglejmo, da nastavimo dve barvni obrobi posebej. Spodnja koda uporablja atribut tabele z njihovimi 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

Izhod:

Uporaba oznake

Uporablja se za združevanje vseh elementov in pomaga pri pogledu na spletno stran na njenem določenem mestu. V spodnji kodi smo uporabili dva za odstavek in drugo za izvajanje atributa sloga z nastavitvijo obrobnih pik, debelino pa povečamo s širino in dodali smo oblazinjenje, da jih demonstriramo na levi strani.



Sample border color using div

Narava je lepa

div z obrobno barvo.

Izhod:

Primer: To pojasnjuje, kako nastaviti barvo za oblazinjenje in rob z uporabo oznak razreda in seznama.



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

Izhod:

Kako določiti barvo z vrednostmi v HTML?

Osnovne vrednosti barve se razlikujejo od 0 do 255 za rdečo, modro, zeleno. Vrednost barve je pomembna pri oddajanju lahkotnosti.

Spodnja tabela prikazuje vzorčne vrednosti za barve

Primer: Spodnji primer prikazuje različne vrednosti barv v njihovih nastavitvah ozadja.

Tehnike rudarjenja podatkov je razumevanje vzorcev

Razvrstitev


Napoved


Regresija


Razvrstitev, tehnike napovedovanja

Barve HTML


Barve mize

Izhod:

Kako uporabiti RGB vrednosti barv v HTML?

RGB označuje rdeče zelene modre barve neposredno in uporablja RGB funkcijo. Te tri vrednosti jemlje kot parametre in jih deklarira kot celo število, včasih v odstotkih. Ne glede na barvo, ki jo želimo, je njena intenzivnost dana višji vrednosti 255, saj celo število pade med o do 255. Za modro barvo je na primer prednostno označevanje (0, 0255). tu sta prvi dve vrednosti označeni kot 0, 0, zadnja vrednost pa 255 za modro.

Primer: RGB barva



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 najdražja država na svetu, Oslo je glavno mesto tega zelenega mesta.

Izhod:

Kako določiti lahkotnost barv v HTML

Lahkotnost barve je določena s svetlostjo, ki jo raje merimo v odstotkih. Večina spletnih oblikovalcev želi uporabljati lahkotnost kot RGB, ki jo je mogoče prilagoditi glede na zahteve. Tukaj črna nastavi svetlost na 0%, bela pa na 100%. Določen je s funkcijo 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 najdražja država na svetu, Oslo je glavno mesto tega zelenega mesta.

Izhod:

V zgornjem primeru lahko poskusite z različnimi barvnimi vrednostmi.

Zaključek

Za zaključek smo torej videli, da ima to različne lastnosti. V prejšnjih dneh je pri spletnem razvoju obstajalo veliko načinov za določitev barv za njihovo spletno mesto, danes pa sta najbolj priljubljeni barvni kodi RGB in Hex barvne kode (RGB je dobro znan). Obstajajo različne aplikacije, pri katerih se barve izvajajo kot drsna lestvica, barvna paleta itd.

Priporočeni članki

To je vodnik po barvah HTML. Tukaj razpravljamo o uvodu, kako nastaviti barvo ozadja v HTML-ju, kako barvi dodati besedilo v HTML-ju itd. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -

  1. Oznake HTML tabele
  2. Ustvari tabele v HTML
  3. Slogi pisav HTML
  4. Elementi obrazca HTML
  5. Program za ustvarjanje barvnih izbirnikov HTML (primer)
  6. Kako implementirati barvo in spremeniti slog v Matlabu?
  7. Kako naložiti datoteko v PHP s primeri