HTML-värit - Kuinka asettaa taustaväri HTML: ään? - esimerkki

Sisällysluettelo:

Anonim

Johdanto HTML-väreistä

Tämä artikkeli käsittelee kuinka käyttää värejä verkkosivustolla HTML: llä yksinkertaisin ja helpoin tavoin. Värillä on tärkeä rooli verkkosivustojen luomisessa, jotta ne näyttävät ja tuntuvat hyvältä. Ei ole erillistä tunnistetta, sisäänrakennettua HTML-koodia, vaan se käyttää tyylimääritteitä tai väriominaisuutta. Juuri värit upotetaan HTML-elementteihin CSS (Cascading Style Sheet) -sovelluksella. Värit antavat verkkosivulle tyylikkään ilmeen. Värien lisääminen verkkosivulle sisältää taustavärien, taulukoiden, kappaleiden jne. Asettamisen.

Kuinka HTML-taustaväri asetetaan?

Taustavärin kirkkauttaminen tekee sivustosta näyttävän kauniilta ja rohkeammalta. Se tehdään käyttämällä värejä, Hex-värikoodeja. RGB- ja RGBA-väriarvot (alfa-arvo 0 - 1).

Hex-väri kohdistetaan suoraan HTML-koodiin käyttäen Style-määritetta HTML-kappaleen rungon sisällä. Hex on yhdistelmä sekä numeroita että kirjaimia. Alla on esimerkki, joka kuvaa verkkosivun taustaväriä.

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

Koodinpätkät:

Voit lisätä taustaväriä näytöllä bgcolor-määritteellä. Se on yhteensopiva kaikkien selainten kanssa paitsi 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

Kuinka soveltaa väriä tekstiin HTML-muodossa?

Värin soveltaminen HTML-tekstiin on melko helppoa, voimme lisätä / muuttaa tekstin väriä soveltamalla kolme tapaa, nimittäin kuusioväri, HSL-arvot ja värinimet. Seuraavassa on kolme eri tekniikkaa värin lisäämiseksi vastaaville verkkosivuille.

1. Värinimet

Tämä on melko yksinkertaista käyttämällä englanninkielisiä värinimiä, kun sovellus on suoraan eteenpäin, näitä värinimiä käytetään. Värinimien määrittäminen on suora menetelmä, ja W3C on ilmoittanut 16 perusväriä (musta, keltainen, punainen, punainen, punainen, harmaa, lime, vihreä, oliivi, hopea, aqua, sininen, laivasto, valkoinen, violetti, fuksia, teal)

2. HSL

Värisävyn kylläisyyden ja vaaleuden väriarvot. Sävy määritetään asteikolla 0 - 360 astetta, kylläisyys ja vaaleus 0 - 100%.

3. Kuusivärinen

Tarkan tuloksen saamiseksi käytetään kuusinumeroista heksadesimaalilukua. Tarkentaaksesi ensimmäiset kaksi numeroa merkitsevät punaista, kaksi seuraavaa merkitsevät vihreää, kaksi muuta merkitsevät sinistä arvoa ja sitä edeltää '#'.

Seuraava esimerkki selittää erilaisia ​​tapoja soveltaa värejä asiakirjoihin.


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

lähtö:

Tekstin värin tekemiseen on erilaisia ​​menetelmiä, koska HTML: llä on paljon muokattavia sovelluksia.

  1. Tyyli-osion soveltaminen
  2. yksittäisen CSS-tyylitaulukon luominen
  3. Tekstin kääriminen

Kuinka käyttää tekstin väriä osion avulla?

Katsotaanpa erilaisia ​​tapoja käyttää HTML-värejä:

1. Kääri HTML-väreillä

Alla oleva koodi muuttaa kappaleen tekstin väriä yksinkertaisilla HTML-koodeilla. verkkosivustojen väritykseen on 140 värillistä nimeä. Alla oleva koodi osoittaa, kuinka tekstin väriä käytetään osiossa.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Tämä sisältö on hyvin selkeä

vaaleanpunainen kappaleteksti

lähtö:

2. Käytä HEXCOLORia

Jälleen tässä esimerkissä tyyliosasto ilmoittaa kuusivärin, jota seuraa '#' -symboli.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Hei maailma

Hexa-kappaleteksti

lähtö:

3. RGB-värin käyttäminen

Punainen, vihreä, sininen käyttää 8 bittiä kutakin ja niiden arvo vaihtelee välillä 0 - 255, mikä tuottaa erilaisia ​​värejä. Alla oleva esimerkki valitsee RGB-värin niiden arvojen mukaan.



Color Picker

Sininen kappaleteksti

lähtö:

4. Menetelmä tyylitaulukon avulla



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

Jokainen tunniste on muotoiltu väreillä.

lähtö:

5. Yksittäisen CSS-tyylin luominen

.html-tiedosto




CSS style sheet




CSS style sheet




CSS style sheet

Useita HTMl-asiakirjoja.

Hei maailma!

Ulkoinen CSS-tiedosto lcolor.css

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

lähtö:

Kuinka asettaa reunan väri HTML-muodossa?

Se tehdään käyttämällä attribuutin reunan väriä = ”“. Se tehdään käyttämällä Html-elementtiä

ja jopa voimme luoda 3D-tehosteita. Reunuksen väriä käytetään eri määritteillä, kuten reunus = “leveys”, reunanväri = “värin def”, reunanväri = ”“. CSS: llä on joitain parannettuja reunaominaisuuksia, jotka auttavat luomaan rajoja. Alla oleva esimerkki näyttää yhden reunan värin asettamisen vastaavaan taulukkoon. Tässä tarkoittaa taulukkoriviä ja
tarkoittaa taulukkotietoja ja se on alkanut käyttää tag. Ja reuna heille tehdään niiden leveyttä ja värejä käyttämällä




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

lähtö:

Katsotaan nyt kahden reunan värin asettamista erikseen. Alla oleva koodi käyttää taulukkoatribuuttia niiden elementtien kanssa.



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

lähtö:

Tunnisteen käyttö

Sitä käytetään kaikkien elementtien ryhmittelyyn ja se auttaa verkkosivun tarkastelussa tietyssä paikassa. Alla olevassa koodissa olemme käyttäneet kahta yhtä kappaleesta ja toista tyyliominaisuuden toteuttamiseksi asettamalla rajapikselit ja paksuus kasvaa antamalla leveys ja olemme lisänneet pehmusteen osoittaaksesi ne vasemmalle.



Sample border color using div

Luonto on kaunis

div reunusvärillä.

lähtö:

Esimerkki: Tämä selittää, kuinka pehmusteen ja reunan väri asetetaan luokka- ja luettelotunnisteiden avulla.



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

lähtö:

Kuinka määrittää väri HTML-arvoja käyttämällä?

Perusväriarvot vaihtelevat 0 - 255 punaiselle, siniselle, vihreälle. Väriarvo on tärkeä kevyyden jakamisessa.

Taulukon alla on esitetty värien näytearvot

Esimerkki: Alla oleva esimerkki näyttää erilaisia ​​väriarvoja niiden tausta-asetuksissa.

Data Mining -tekniikoilla tarkoitetaan kuvioiden ymmärtämistä

Luokittelu


ennustus


Regressio


Luokittelu, ennustetekniikat

HTML-värit


Pöydän värit

lähtö:

Kuinka käyttää RGB-väriarvoja HTML-muodossa?

RGB tarkoittaa punaista vihreää sinistä väriä suoraan ja käyttää RGB-toimintoa. Se ottaa nämä kolme arvoa parametreiksi ja ilmoittaa kokonaislukuna joskus prosentteina. Minkä värin kanssa haluamme, sen voimakkuudelle annetaan korkeampi arvo 255, koska kokonaisluku on välillä o - 255. Esimerkiksi sinisen värin saamiseksi on edullista merkitä (0, 0, 255). tässä kaksi ensimmäistä arvoa on merkitty 0, 0 ja viimeinen arvo on 255 sinisellä.

Esimerkki: RGB-väri



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.

Se on maailman kallein maa, Oslo on tämän vihreän kaupungin pääkaupunki.

lähtö:

Värien vaaleuden määrittäminen HTML-muodossa

Värin vaaleus määritetään sen mieluummin kirkkaudella, että se mitataan prosentteina. Suurin osa web-suunnittelijoista haluaa käyttää kevyyttä kuin RGB, jota voidaan säätää vaatimusten mukaan. Tässä musta asettaa kirkkauden 0% valkoiseksi ja 100%. Se määritetään funktiolla 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.

Se on maailman kallein maa, Oslo on tämän vihreän kaupungin pääkaupunki.

lähtö:

Voit kokeilla erilaisia ​​väriarvoja yllä olevassa esimerkissä.

johtopäätös

Siksi johtopäätöksenä olemme havainneet, että tällä on erilaisia ​​ominaisuuksia. Aikaisempina päivinä verkkokehityksellä on monia tapoja määrittää verkkosivuston värit, ja nykyään suosituimmat väylät ovat RGB- ja Hex-värikoodit (RGB on yleisesti tunnettu). On olemassa erilaisia ​​sovelluksia, joissa värit toteutetaan, kuten liukuva asteikko, värivalikoima jne.

Suositellut artikkelit

Tämä on opas HTML-väreihin. Tässä keskustellaan johdannosta, kuinka taustaväri asetetaan HTML-muodossa, miten väriä käytetään HTML-tekstissä jne. Voit myös käydä läpi muiden ehdottamien artikkeleidemme -

  1. HTML-taulukkotunnisteet
  2. Luo taulukot HTML-muodossa
  3. HTML-fonttityylit
  4. HTML-muotoelementit
  5. Ohjelma HTML-värinvalitsimen luomiseksi (esimerkki)
  6. Kuinka toteuttaa väri ja muuttaa tyyliä Matlabissa?
  7. Kuinka ladata tiedosto PHP: llä esimerkkien avulla