Johdanto HTML-värin nimeen

Värinimellä HTML: llä on erittäin tärkeä rooli verkkojen ja sovellusten suunnitteluprosessissa. Se auttaa muuttamaan verkkosivustomme tai sovelluksemme ulkoasua. Sen lisäksi, että se tekee sovelluksestasi houkuttelevamman ja interaktiivisemman. On olemassa erilaisia ​​tapoja määritellä värinimi HTML: ssä HTML-koodausmuotoon. CSS-ominaisuuksia voidaan käyttää tehokkaammin. Pystymme käyttämään HTML-värinimeä sivutasolla sisällyttämällä sen runko-osaan, joka pystyy myös asettamaan yksittäisen värin tietylle elementille. Värinimeä HTML: ssä käytetään tarkoituksella tekstin väriin, taustaväriin, reunuksen väriin, varjoihin, kaltevuuksiin ja moniin muihin.

Syntaksi

  • HTML-värejä voidaan käyttää eri tavoin. Katsotaanpa yksi kerrallaan.
  • HTML-värin peruskäyttö on käyttää sitä tekstiin. Käytä vain tekstin väreinä tekstin näyttämiseen eri HTML-väreinä.

1. Tekstin värisyntaksi

color : color_name;

Katsotaan kuinka tämä syntaksi toimii,

Welcome to EDUBCA

Yllä olevassa esimerkissä se näyttää tekstin Tervetuloa EDUBCA: han sinisellä värillä, kuten:

  • HTML-värejen avulla on myös mahdollista lisätä ne taustaväriksi.

2. Taustavärin syntaksi

background-color:color_name;

Katsotaan kuinka tämä syntaksi toimii,

Luokkaan sisältyy kaikki suunnittelutiedot, jotka jakautuvat lukuisiin alaluokkiin suunnittelukurssilla.

  • On myös mahdollista lisätä värillinen reunus minkä tahansa tekstin tai elementin ympärille käyttämällä HTML-väriä seuraavan syntaksin avulla:

3. Reunuksen värin syntaksi: reunus

value color_name;

Katsotaan kuinka tämä syntaksi toimii,

EDUCBA free certification course

Värinimen tyypit HTML-muodossa

Värinimet HTML-muodossa voidaan määritellä eri tavoin. On vaikea muistaa eri nimeä eri väreissä. Joten on päätettävä antaa joitain arvoja eri väreille. Katsotaanpa yksi kerrallaan

1. RGB-arvo

  • Se on yksi tapa määritellä HTML-värien nimet punaisen, vihreän ja sinisen värimuodon arvojen yhdistelmässä. Mitä määritetään värin voimakkuuden välillä 0–255?
  • Oletetaan, että haluamme määritellä mustan värin RGB-yhdistelmällä, niin se pitää RGB: stä (0, 0, 0). Tässä kaikki väriparametrit asetetaan nollaan. Joten se näyttää mustan värin.
  • Kuten toinenkin RGB (0, 0, 255), näyttää värin sininen, koska 255 on asetettu korkeimmaksi arvoksi siniselle ja toinen on 0.
  • Jos aiomme 3 yhtä suuret RGB-arvot, niin se tuottaa harmaan värin sävyt.

Esimerkki: RGB (0, 0, 0) tummimmalle värille, missä RGB (255, 255, 255) vaaleimmalle värille.

2. HEX-arvo

  • Se on yksi yleisimmin käytetty värin nimen muoto HTML-muodossa, jossa värin nimi määritetään heksadesimaalimuodossa.
  • #rrggbb-muoto sisältää arvot RR: stä punaiselle, gg vihreälle ja bb siniselle sijoitetaan välillä 00 toff heksadesimaaliarvon.
  • Tarkastellaan yhtä esimerkkiä värin # 00ff00 määrittelemisestä. joten nämä arvot tuotetaan vihreänä värinä, koska vihreä sisältää korkeimman arvon (ff), kun toinen asetetaan arvoon 00.

3. HSL-arvo

  • Toinen muoto HTML-värin määrittelemiseksi muodossa Sävy, kylläisyys, vaaleus.
  • Nyt näemme kaikki termit yksi kerrallaan. Sävy on määritelty väriasteeksi, joka on välillä 0-360. jossa 0 punaiselle, 120 vihreälle ja 240 siniselle.
  • Kylläisyys määrittelee värin arvon prosenttimääräksi, jossa 0% tarkoittaa harmaasävyä, kun 100% täydestä väristä.
  • Vaaleus toimii myös prosentteina, joka määrittää 0% mustalle, 50% ei ole vaalealle tai pimeälle, kun 100% on valkoista.

4. RGBA-arvo

  • Tämäntyyppinen HTML-väri määrittelee RGB-värin laajennuksen, mukaan lukien alfa-arvot. Missä alfaa käytetään määrittämään värin opasiteetti.
  • Alfa-arvo on välillä 0, 0 (täysin läpinäkyvä) - 1, 0 (ei läpinäkyvä ollenkaan)
  • Esimerkki on rgba (255, 99, 71, 0)

5. HSLA-arvo

  • Se toimii samalla tavalla kuin HSL-värit antavat lisäksi alfa-arvon sen kanssa värin opasiteetin määrittelemiseksi.
  • hsla (8 100%, 80%, 0) täysin läpinäkyvään väriin.
  • hsla (8 100%, 80%, 0, 9) ei niin paljon läpinäkyvää väriä varten.

Esimerkkejä HTML-värin nimestä

Katsotaanpa kuinka HTML-värinimeä käytetään joidenkin alla mainittujen esimerkkien avulla:

Esimerkki # 1

Tarkastellaan yleistä esimerkkiä, joka osoittaa, kuinka HTML-mallin värinimeä käytetään:

HTML-koodi:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Opit enemmän epäonnistumisesta kuin menestyksestä. Älä anna sen pysäyttää sinua. Epäonnistuminen muodostaa merkin. Jos työskentelet jotain siitä, josta välität, sinun ei tarvitse työntää. Visio vetää sinut

lähtö:

Esimerkki 2

Nyt otamme toisen esimerkin, joka määrittelee kaiken tyyppiset HTML-värit seuraavasti:

HTML-koodi:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

lähtö:

Yllä olevassa esimerkissä näemme eri HTML-värityyppien käytön ja miten ne nimetään HTML-muodossa.

Esimerkki 3

Vielä yksi HTML-värin käyttö on määritellä elementin reuna, joka on seuraava:

Esimerkiksi, tässä pystymme lisäämään reunan koodiruumiisi muuttamalla myös taustaa ja tekstin väriä.

HTML-koodi:

Itseaktualisoituva teoria puhuu tehtävän suorittamiselle ominaisista palkkioista, kuten työtyytyväisyys, saavutustunne jne.

lähtö:

johtopäätös

Havaitsimme, että HTML-värit on määritelty eri nimillä, prosenttiarvolla, heksa-arvolla, alfa-arvolla ja monilla muilla. HTML-värinimeä käytetään värin käyttämiseen tekstissä, taustassa, reunuksessa ja gradientissa. HTML-värin nimen määrittelemiseksi RGB, hex, hsl, rgba, hsla on erityyppisiä.

Suositellut artikkelit

Tämä on opas Värin nimi HTML-muodossa. Tässä keskustellaan johdannosta, HTML-värin tyypeistä sekä esimerkkeistä, syntaksista ja HTML-koodeista. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -

  1. HTML-tyyliominaisuus
  2. HTML-taulukkotunnisteet
  3. Kuvalinkki HTML-muodossa
  4. Luo taulukot HTML-muodossa
  5. HTML-tapahtumat

Luokka:

Web-kehitystyökalut