HTML-farver - Sådan indstiller du en baggrundsfarve i HTML? - Eksempel

Indholdsfortegnelse:

Anonim

Introduktion til HTML-farver

Denne artikel dækker hvordan man bruger farver på webstedet ved hjælp af HTML på enkle og lette måder. Farver spiller en vigtig rolle i oprettelsen af ​​websteder, der skal se ud og føle sig godt. Der er ingen indbygget HTML-kode i stedet for, det bruger stilattribut eller farveegenskab. Netop er farverne indlejret i HTML-elementerne ved hjælp af Cascading Style Sheet (CSS). Farver giver et elegant look til websiden. Tilføjelse af farver til websiden inkluderer indstilling af baggrundsfarver, tabeller, afsnit osv.

Sådan indstiller du en baggrundsfarve i HTML?

At gøre baggrundsfarve lysere gør webstedet til at se smukt og dristig ud. Det gøres ved hjælp af farver, Hex-farvekoder. RGB og RGBA farveværdier (Alpha-værdi 0 til 1).

Hex-farve påføres direkte på Html-koden ved hjælp af Style-attribut i kropselementet i Html. Hex er en kombination af både tal og bogstaver. Nedenfor er eksemplet, der illustrerer Baggrundsfarve 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

Kodeuddrag:

For at tilføje baggrundsfarve kan du bruge bgcolor attribut til at vise. Det er kompatibelt med alle browsere undtagen 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 bruges farve på tekst i HTML?

Det er ret let at anvende farve på HTML-teksten, vi kan tilføje / ændre farven på teksten ved at anvende tre måder, nemlig Hex-farve, HSL-værdier og farvenavne. Følgende er de tre forskellige teknikker til anvendelse af farve på de tilsvarende websider.

1. Farvenavne

Dette er ganske enkelt ved at bruge engelske farvenavne, når applikationen er ligetil, disse farvenavne bruges. Specificering af farvenavne er direkte metoder, og W3C har annonceret 16 grundfarver (sort, gul, rød, rødbrun, grå, kalk, grøn, oliven, sølv, aqua, blå, marineblå, hvid, lilla, fuchsia, flise)

2. HSL

Farvetoner og farveværdier for farvetone. Nuance defineres i 0 til 360 grader, mætning og lethed fra 0 til 100%.

3. Hex farve

For at få et præcist resultat anvendes seks-cifret hexadecimaltal. For at uddybe de første to-cifre betegner Rød, de næste to betegner Grønt, de andre to betegner Blå værdi og indledes med '#'.

Følgende eksempel forklarer de forskellige måder at anvende farver på dokumenterne.


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

Produktion:

Der er forskellige metoder til at udføre tekstfarve, da HTML har en masse tilpassede applikationer.

  1. Anvendelse af stilafsnittet
  2. oprette et individuelt CSS Style ark
  3. Indpakning af teksten

Hvordan bruges tekstfarve ved hjælp af sektion?

Lad os se forskellige metoder til brug af HTML-farver:

1. Indpakning ved hjælp af HTML-farver

Nedenstående kode ændrer farven på teksten i afsnittet med enkle HTML-koder. der er 140 farvede navne til at farve webstederne. Nedenstående kode viser, hvordan man anvender tekstfarve ved hjælp af sektion.


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 indhold er meget tydeligt

lyserød afsnitstekst

Produktion:

2. Brug af HEXCOLOR

Igen tager dette eksempel stilsektionen til at erklære hexfarve efterfulgt af et '#' symbol.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Hej Verden

Hexa-afsnitstekst

Produktion:

3. Brug af RGB-farve

Den røde, grønne, blå bruger 8 bit hver, og deres værdi varierer fra 0 til 255, hvilket producerer forskellige farver. Nedenstående eksempel vælger RGB-farve efter deres værdier.



Color Picker

Tekst med blå afsnit

Produktion:

4. Metode ved hjælp af 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

Hvert tag skal styles med farver.

Produktion:

5. Oprettelse af individuel CSS-stil

.html-fil




CSS style sheet




CSS style sheet




CSS style sheet

Flere HTMl-dokumenter.

Hej Verden!

Ekstern CSS-fil lcolor.css

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

Produktion:

Sådan indstilles kantfarve i HTML?

Det gøres ved hjælp af en attributgrænsefarve = ”“. Det gøres ved hjælp af Html-elementet

og endda kan vi skabe 3D-effekter. Kanten farve anvendes ved hjælp af forskellige attributter som border = "bredde", bordercolor = "farve def", bordercolorlight = "". CSS har nogle forbedrede grænseegenskaber, der hjælper med at skabe grænser. Nedenstående eksempel viser indstilling af en enkelt kantfarve til den tilsvarende tabel. Her betegner tabel række og
angiver tabeldata, og de begynder at bruge tag. Og grænsen for dem anvendes ved hjælp af deres bredde og farver




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

Produktion:

Lad os nu se indstilling af to kantfarver hver for sig. Nedenstående kode bruger tabelattribut med deres elementer.



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

Produktion:

Brug af tag

Det bruges til at gruppere alle elementerne og hjælper med at se en webside på dets særlige position. I nedenstående kode har vi brugt to til et afsnit og andet til at implementere stilattribut ved at indstille kantpixel, og tykkelsen øges ved at give bredden ud, og vi har tilføjet polstring for at demonstrere dem til venstre.



Sample border color using div

Naturen er smuk

div med en kantfarve.

Produktion:

Eksempel: Dette forklarer, hvordan du indstiller farven til polstring og margin ved hjælp af klasse- og listetags.



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

Produktion:

Hvordan specificeres farve ved hjælp af værdier i HTML?

De grundlæggende farveværdier varierer fra 0 til 255 for rød, blå, grøn. Farveværdien er vigtig for at give lysheden ud.

Nedenstående tabel viser prøveværdier for farverne

Eksempel: Nedenstående eksempel viser forskellige farveværdier i deres baggrundsindstillinger.

Data Mining teknikker er at forstå et mønster

Klassifikation


Forudsigelse


Regression


Klassificering, forudsigelsesteknikker

HTML-farver


Tabelfarver

Produktion:

Hvordan bruges RGB-farveværdier i HTML?

RGB betegner rødgrønblå farver direkte og bruger RGB-funktion. Det tager disse tre værdier som parametre og deklareres som heltal undertiden i procent. Uanset hvilken farve vi ønsker dens intensitet får en højere værdi 255, da en heltalværdi falder mellem o til 255. For eksempel at have en blå farve foretrækkes det at angive (0, 0, 255). her er de to første værdier markeret som 0, 0 og den sidste værdi er 255 for blå.

Eksempel: RGB-farve



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 land i verden, Oslo er hovedstaden i denne grønne by.

Produktion:

Sådan specificeres farvernes lyshed i HTML

Farveens lysstyrke er defineret af den lysstyrke, vi foretrækker, den måles i procent. De fleste webdesignere ønsker at bruge lethed end RGB, som kan justeres i henhold til kravene. Her indstiller en sort lysstyrken til 0% hvid indstillet til 100%. Det specificeres ved hjælp af funktion 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 land i verden, Oslo er hovedstaden i denne grønne by.

Produktion:

Du kan prøve med forskellige værdier for farve i ovenstående eksempel.

Konklusion

Derfor har vi set, at dette har forskellige egenskaber. I tidligere dage har webudvikling mange måder at specificere farver til deres websted, og i dag er de mest populære colorways RGB og Hex farvekoder (RGB er velkendt). Der er forskellige applikationer, hvor farver implementeres som en glidende skala, farvepalet osv.

Anbefalede artikler

Dette er en guide til HTML-farver. Her diskuterer vi introduktionen, hvordan man indstiller en baggrundsfarve i HTML, hvordan man anvender farve på tekst i HTML osv. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

  1. HTML-tabel tags
  2. Opret tabeller i HTML
  3. HTML-skrifttyper
  4. HTML-formelementer
  5. Program til at oprette HTML-farvevælger (eksempel)
  6. Sådan implementeres farve og ændring af stil i Matlab?
  7. Sådan uploades fil i PHP med eksempler