HTML-farger - Hvordan sette en bakgrunnsfarge i HTML? - Eksempel

Innholdsfortegnelse:

Anonim

Introduksjon om HTML-farger

Denne artikkelen dekker hvordan du bruker farger på nettstedet ved å bruke HTML på enkle og enkle måter. Farger spiller en viktig rolle i å lage nettsteder for å se og føle seg bra. Det er ingen innebygd HTML-kode i stedet for den bruker stilattributtet eller fargeegenskapen. Nettopp fargene er innebygd i HTML-elementene ved hjelp av Cascading Style Sheet (CSS). Farger gir elegant utseende til websiden. Legge til farger på websiden inkluderer innstilling av bakgrunnsfarger, tabeller, avsnitt osv.

Hvordan sette en bakgrunnsfarge i HTML?

Å gjøre bakgrunnsfargen lysere gjør at nettstedet ser pent og dristig ut. Det gjøres ved å bruke farger, Hex-fargekoder. RGB- og RGBA-fargeverdier (alfa-verdi 0 til 1).

Hex-farge brukes direkte på Html-koden ved å bruke Style-attributtet inne i kroppselementet til Html. Hex er en kombinasjon av både tall og bokstaver. Nedenfor er eksemplet som illustrerer bakgrunnsfarge på websiden.

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

Kodeutdrag:

For å legge til bakgrunnsfarge kan du bruke bgcolor-attributtet for å vise. Den er kompatibel med alle nettlesere bortsett fra i 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

Hvordan bruke farge på tekst i HTML?

Det er ganske enkelt å bruke farge på HTML-teksten, vi kan legge til / endre fargen på teksten ved å bruke tre måter, nemlig Hex-farge, HSL-verdier og fargenavn. Følgende er de tre forskjellige teknikkene for å bruke farge på de tilsvarende websidene.

1. Fargenavn

Dette er ganske enkelt ved å bruke engelske fargenavn når applikasjonen er rett frem, disse fargenavnene brukes. Spesifisering av fargenavn er direkte metoder, og W3C har kunngjort 16 grunnfarger (svart, gul, rød, rødbrun, grå, kalk, grønn, oliven, sølv, aqua, blå, marineblå, hvit, lilla, fuchsia, blågrønn)

2. HSL

Fargemetoder for fargetone og lyshet. Nyanse er definert i 0 til 360 grader, metning og letthet fra 0 til 100%.

3. Sekskant farge

For å få et presist resultat brukes seks-sifret heksadesimal nummer. For å utdype de første to-sifrene betegner Rødt, de to neste betegner Grønt, de to andre betegner Blå verdi og er gitt av '#'.

Følgende eksempel forklarer de forskjellige måtene å bruke farger på dokumentene.


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

Produksjon:

Det er forskjellige metoder for å gjøre tekstfarge, ettersom HTML har mange applikasjoner som kan tilpasses.

  1. Bruke stilseksjonen
  2. lage et individuelt CSS-stilark
  3. Pakk inn teksten

Hvordan bruke tekstfarge ved å bruke seksjon?

La oss se forskjellige metoder for bruk av HTML-farger:

1. Innpakning ved hjelp av HTML-farger

Under kode endrer fargen på teksten i avsnittet med enkle HTML-koder. det er 140 fargede navn for å fargelegge nettstedene. Nedenfor koden viser hvordan du bruker tekstfarge ved å bruke seksjon.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Dette innholdet er veldig tydelig

rosa avsnitt tekst

Produksjon:

2. Bruk HEXCOLOR

Igjen tar dette eksemplet stilseksjonen for å erklære hexfarge fulgt av et '#' symbol.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Hei Verden

Hexa avsnitt tekst

Produksjon:

3. Bruke RGB-farge

Den røde, grønne, blå bruker 8 biter hver, og verdien varierer fra 0 til 255 som gir forskjellige farger. Eksemplet nedenfor velger RGB-farge etter verdiene.



Color Picker

Tekst med blå avsnitt

Produksjon:

4. Metode ved bruk av stilarket



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

Hver tagg skal styles med farger.

Produksjon:

5. Opprette individuell CSS-stil

.html-fil




CSS style sheet




CSS style sheet




CSS style sheet

Flere HTMl-dokumenter.

Hei Verden!

Ekstern CSS-fil lcolor.css

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

Produksjon:

Hvordan angi kantfarge i HTML?

Det gjøres ved å bruke en attributt grensefarge = ”“. Det gjøres ved hjelp av Html-elementet

og til og med vi kan lage 3D-effekter. Kantfargen brukes ved bruk av forskjellige attributter som border = "bredde", bordercolor = "farge def", bordercolorlight = "". CSS har noen forbedrede grenseegenskaper som hjelper til med å lage grenser. Eksemplet nedenfor viser innstilling av en enkelt kantfarge til den tilsvarende tabellen. Her betegner tabellrad og
angir tabelldata, og de begynner å bruke stikkord. Og grensen for dem blir brukt med bredde og farger




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

Produksjon:

La oss nå se å stille to kantfarger hver for seg. Koden nedenfor bruker tabellattributter med elementene deres.



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

Produksjon:

Bruker tag

Det brukes til å gruppere alle elementene og hjelper med å se på en webside på sin spesielle posisjon. I koden nedenfor har vi brukt to for et avsnitt og annet for å implementere stilattributtet ved å sette grensepiksler og tykkelsen økes ved å gi ut bredden, og vi har lagt til polstring for å demonstrere dem til venstre.



Sample border color using div

Naturen er vakker

div med kantfarge.

Produksjon:

Eksempel: Dette forklarer hvordan du angir farge for polstring og margin ved bruk av klasse- og listetagger.



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

Produksjon:

Hvordan spesifisere farger ved å bruke verdier i HTML?

De grunnleggende fargeverdiene varierer fra 0 til 255 for rød, blå, grønn. Fargeverdien er viktig for å gi lyshet.

Under tabellen viser prøveverdier for fargene

Eksempel: Eksemplet nedenfor viser forskjellige fargeverdier i bakgrunnsinnstillingene.

Data Mining teknikker er å forstå et mønster

Klassifisering


Prediksjon


regresjon


Klassifisering, prediksjonsteknikker

HTML-farger


Bordfarger

Produksjon:

Hvordan bruker jeg RGB-fargeverdier i HTML?

RGB betegner rødgrønblå farger direkte og bruker RGB-funksjon. Den tar de tre verdiene som parametere og deklareres som heltall noen ganger i prosent. Uansett hvilken farge vi vil ha sin intensitet får en høyere verdi 255 ettersom en heltalverdi faller mellom o til 255. For eksempel, for å ha en blå farge, er det foretrukket å betegne (0, 0255). her er de to første verdiene merket som 0, 0 og den siste verdien er 255 for blå.

Eksempel: RGB-farge



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.

Det er det dyreste landet i verden, Oslo er hovedstaden i denne grønne byen.

Produksjon:

Slik angir du lysets farge i HTML

Fargelysheten er definert av lysstyrken vi foretrekker at den måles i prosent. De fleste webdesignere ønsker å bruke letthet enn RGB, som kan justeres i henhold til kravene. Her setter en svart lysstyrken til 0% hvit satt til 100%. Det er spesifisert ved hjelp av funksjon 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.

Det er det dyreste landet i verden, Oslo er hovedstaden i denne grønne byen.

Produksjon:

Du kan prøve med forskjellige verdier for farge i eksemplet ovenfor.

Konklusjon

For å konkludere har vi derfor sett at dette har forskjellige egenskaper. I tidligere dager har webutvikling mange måter å spesifisere farger på nettstedet sitt, og i dag er de mest populære colorways RGB og Hex fargekoder (RGB er velkjent). Det er forskjellige bruksområder der farger implementeres som glideskala, fargepalett osv.

Anbefalte artikler

Dette er en guide til HTML-farger. Her diskuterer vi Introduksjon, Hvordan sette en bakgrunnsfarge i HTML, Hvordan bruke farge på tekst i HTML osv. Du kan også gå gjennom de andre foreslåtte artiklene våre for å lære mer -

  1. HTML-tabellkoder
  2. Lag tabeller i HTML
  3. HTML-skrifttyper
  4. HTML-skjemaelementer
  5. Program for å lage HTML Color Picker (Eksempel)
  6. Hvordan implementere farge og endre stil i Matlab?
  7. Hvordan laste opp fil i PHP med eksempler