HTML-värvid - Kuidas HTML-is taustavärvi määrata? - Näide

Lang L: none (table-of-contents):

Anonim

Sissejuhatus HTML-värvide kohta

See artikkel kirjeldab, kuidas kasutada veebisaidil värve HTML-i abil lihtsal ja hõlpsal viisil. Värvid mängivad olulist rolli veebisaitide loomisel, et nad näeksid välja ja tunneksid end hästi. Puudub individuaalne sildi sisseehitatud HTML, selle asemel kasutatakse stiili atribuuti või värvi atribuuti. Täpsemalt on värvid manustatud HTML-i elementidesse, kasutades CSS-i. Värvid annavad veebilehele elegantse ilme. Veebilehele värvide lisamine hõlmab taustavärvide, tabelite, lõikude jne seadistamist.

Kuidas HTML-is taustavärvi seada?

Taustavärvi heledamaks muutmine muudab veebisaidi ilusamaks ja julgemaks. Selleks kasutatakse värve, Hex-värvikoode. RGB ja RGBA värviväärtused (alfa väärtus 0 kuni 1).

Kuusnurkne värv kantakse otse HTML-koodile, kasutades atribuuti Style (Html) kehaelemendi sees. Hex on numbrite ja tähtede kombinatsioon. Allpool on näide, mis illustreerib veebilehe taustavärvi.

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

Koodilõigud:

Taustavärvi lisamiseks võite kuvamiseks kasutada atribuuti bgcolor. See ühildub kõigi brauseritega, välja arvatud 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

Kuidas HTML-is teksti värvile lisada?

Värvi rakendamine HTML-i teksti jaoks on üsna lihtne, saame teksti värvi lisada / muuta, rakendades kolme viisi, nimelt Hex-värvi, HSL-i väärtusi ja värvinimesid. Järgnevalt on toodud kolm erinevat tehnikat, kuidas vastavatele veebilehtedele värvi rakendada.

1. Värvinimed

See on üsna lihtne, kui ingliskeelseid värvinimesid kasutatakse kohe, kui neid rakendusi kasutatakse. Värvinimede täpsustamine on otsene meetod ja W3C on kuulutanud 16 põhivärvi (must, kollane, punane, maroon, hall, lubi, roheline, oliiv, hõbe, aqua, sinine, merevägi, valge, lilla, fuksia, teal)

2. HSL

Värviküllastuse ja heleduse värviväärtused. Hue on määratletud vahemikus 0 kuni 360 kraadi, küllastus ja heledus vahemikus 0 kuni 100%.

3. Kuusevärv

Täpse tulemuse saamiseks rakendatakse kuuekohalist kuueteistkümnendarvu. Esimesed kaks numbrit tähistavad punast, kaks järgmist tähistavad rohelist, kaks muud tähistavad sinist väärtust ja neile eelneb “#”.

Järgmine näide selgitab dokumentidele värvide rakendamise erinevaid viise.


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

Väljund:

Teksti värvimiseks on erinevaid meetodeid, kuna HTML-is on palju kohandatavaid rakendusi.

  1. Jao Stiili rakendamine
  2. individuaalse CSS-i stiililehe loomine
  3. Teksti mähkimine

Kuidas teksti värvi kasutada jaotise abil?

Vaatame erinevaid meetodeid HTML-värvide kasutamiseks:

1. Mähkimine HTML-värvide abil

Allpool olev kood muudab lõigu teksti värvi lihtsate HTML-koodidega. veebisaitide värvimiseks on 140 värvilist nime. Allpool olev kood demonstreerib teksti värvi kasutamist jaotise abil.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

See sisu on väga selge

roosa lõigu tekst

Väljund:

2. HEXCOLORi kasutamine

See näide võtab jällegi stiili sektsiooni, et deklareerida kuuevärvilist värvi, millele järgneb sümbol #.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Tere, Maailm

Hexa lõigu tekst

Väljund:

3. Värvi RGB kasutamine

Punases, rohelises, sinises on 8 bitti ja nende väärtus varieerub vahemikus 0 kuni 255, mis tekitab erinevaid värve. Allpool toodud näide valib RGB värvi nende väärtuste järgi.



Color Picker

Sinise lõigu tekst

Väljund:

4. Meetod stiililehe abil



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

Iga silt peab olema värvidega kujundatud.

Väljund:

5. Individuaalse CSS-i stiili loomine

.html-fail




CSS style sheet




CSS style sheet




CSS style sheet

Mitu HTMl-dokumenti.

Tere, Maailm!

Väline CSS-fail lcolor.css

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

Väljund:

Kuidas HTML-is äärise värvi määrata?

Selleks kasutatakse atribuuti äärist värvi = ”“. Selleks kasutatakse elementi Html

ja isegi me saame luua 3D-efekte. Äärise värvi rakendamiseks kasutatakse erinevaid atribuute, nagu ääris = “laius”, äärevärv = “värvi def”, äärisvärv = ““. CSS-il on mõned täiustatud ääreomadused, mis aitavad piire luua. Allpool toodud näide näitab ühe tabeli värvi määramist vastavale tabelile. Siin tähistab tabeli rida ja
tähistab tabeli andmeid ja seda on hakatud kasutama silt. Ja nende jaoks rakendatakse äärist, kasutades nende laiust ja värve




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

Väljund:

Vaatame nüüd kahe äärisevärvi eraldi seadistamist. Allpool olev kood kasutab nende elementidega tabeli atribuuti.



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

Väljund:

Sildi kasutamine

Seda kasutatakse kõigi elementide rühmitamiseks ja see aitab veebilehte selle konkreetses asukohas vaadata. Allolevas koodis oleme lõigu jaoks kasutanud kahte ja teist stiili atribuudi rakendamiseks piiripikslite seadmise teel ning paksust suurendatakse laiuse väljastamisega ja oleme lisanud polsterduse, et neid vasakul näidata.



Sample border color using div

Loodus on ilus

div äärevärviga.

Väljund:

Näide: See selgitab, kuidas klassi- ja loendisiltide abil polsterduse ja veerise värvi sättida.



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

Väljund:

Kuidas HTML-is väärtusi määrata?

Põhivärviväärtused varieeruvad vahemikus 0 kuni 255 punase, sinise, rohelise puhul. Värviväärtus on oluline kerguse väljastamisel.

Allpool tabelis on toodud värvide näidisväärtused

Näide: Allpool toodud näide näitab nende taustaseadetes erinevaid värviväärtusi.

Andmekaevandamise tehnikad on mustrite mõistmine

Klassifikatsioon


Ennustamine


Regressioon


Klassifikatsioon, ennustusvõtted

HTML-värvid


Lauavärvid

Väljund:

Kuidas HTML-is kasutada RGB värviväärtusi?

RGB tähistab punast rohelist sinist värvi ja kasutab RGB funktsiooni. Need kolm väärtust võetakse parameetritena ja deklareeritakse täisarvuna mõnikord protsentides. Ükskõik, mis värvi me soovime, on selle intensiivsusele kõrgem väärtus 255, kuna täisarv jääb vahemikku o kuni 255. Näiteks sinise värvi saamiseks eelistatakse tähistada (0, 0255). siin tähistatakse kahte esimest väärtust kui 0, 0 ja viimast väärtust sinise puhul on 255.

Näide: RGB värv



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.

See on kalleim riik maailmas, Oslo on selle rohelise linna pealinn.

Väljund:

Kuidas HTMLis värvide kergust täpsustada

Värvi heledust määratletakse heleduse järgi, mida eelistame, kui seda mõõdetakse protsentides. Enamik veebidisainereid soovib kasutada kergust kui RGB, mida saab vastavalt vajadusele reguleerida. Siin määrab must heleduse 0% valgeks ja 100%. Selle täpsustamiseks kasutatakse funktsiooni 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.

See on kõige kallim riik maailmas, Oslo on selle rohelise linna pealinn.

Väljund:

Ülaltoodud näites võite proovida erinevaid värviväärtusi.

Järeldus

Seetõttu võib järeldada, et nägime, et sellel on erinevad omadused. Varasematel päevadel on veebiarendusel palju võimalusi oma veebisaidi värvide määramiseks ning tänapäeval on populaarseimad värviteed RGB ja Hex värvikoodid (RGB on üldteada). On erinevaid rakendusi, kus värve rakendatakse nagu libisevat skaalat, värvipaletti jne.

Soovitatavad artiklid

See on juhend HTML-värvide kohta. Siin käsitleme sissejuhatust, HTML-i taustvärvi seadmist, HTML-ile värvi rakendamist jne. Lisateabe saamiseks võite minna ka meie teistest soovitatud artiklitest -

  1. HTML-tabeli sildid
  2. Looge HTML-is tabeleid
  3. HTML-fontide stiilid
  4. HTML-vorminguelemendid
  5. Programm HTML-värvivalija loomiseks (näide)
  6. Kuidas Matlabis värvi rakendada ja stiili muuta?
  7. Kuidas faile üles laadida näites PHP-s