Introduktion til farvenavn i HTML

Farvenavn i HTML spiller en meget vigtig rolle i web- og applikationsdesignprocessen. Det hjælper med at ændre udseendet og følelsen af ​​vores websted eller vores applikation. Det gør vores applikation mere attraktiv og interaktiv. Der er forskellige måder at definere Color Name i HTML i HTML-kodningsformatet. man kan bruge yderligere CSS-egenskaber til at bruge dem mere effektivt. Vi er i stand til at bruge HTML-farvenavn på sideniveau ved at inkludere det i kropsdelen og også i stand til at indstille til individuel farve til det specifikke element. Farvenavn i HTML bruges målrettet til tekstfarve, baggrundsfarve, kantfarve, skygger, gradueringer og mange flere.

Syntaks

  • Der er forskellige måder, vi kan bruge HTML-farver på. Lad os se en efter en.
  • Den helt basale brug af HTML-farve er at anvende den på teksten. skal du blot bruge som tekstfarve til at vise tekst i forskellige HTML-farver.

1. Syntaks til tekstfarve

color : color_name;

Lad os se, hvordan denne syntaks fungerer.

Welcome to EDUBCA

I ovenstående eksempel viser den tekst Velkommen til EDUBCA i en blå farve som:

  • Ved hjælp af HTML-farver er det også muligt at tilføje dem som en baggrundsfarve.

2. Syntaks i baggrundsfarve

background-color:color_name;

Lad os se, hvordan denne syntaks fungerer.

Denne kategori rummer al designinformationen, der spreder sig over adskillige underkategorier i Design-kurset.

  • Det er også muligt at tilføje en farvet kant rundt om enhver tekst eller element ved hjælp af HTML-farve ved hjælp af følgende syntaks:

3. Borderfarve Syntax: kant

value color_name;

Lad os se, hvordan denne syntaks fungerer.

EDUCBA free certification course

Typer af farvenavn i HTML

Der er forskellige måder at definere farvenavne i HTML på. Det er vanskeligt at huske et andet navn i forskellige farver. Så det skal besluttes at give nogle værdier til forskellige farver. Lad os se en efter en

1. RGB-værdi

  • Det er en af ​​måderne til at definere HTML-farvenavne i kombinationen af ​​røde, grønne og blå farveformatværdier. Hvilken bruges til at definere farveintensitet mellem tallet 0 og 255?
  • Antag, at vi ønsker at definere en sort farve ved hjælp af RGB-kombination, så vil den lide RGB (0, 0, 0). Her indstilles alle farveparametre til 0. Så det viser en sort farve.
  • Som en anden RGB (0, 0255) vil farve blå vises, på grund af 255 er indstillet som den højeste værdi til blå, og den anden er 0.
  • Hvis vi går til 3 lige værdier for RGB, vil det generere nuancer af en grå farve.

Eksempel: RGB (0, 0, 0) for den mørkeste farve, hvor RGB (255, 255, 255) for den lyseste farve.

2. HEX-værdi

  • Det er det mest almindeligt anvendte format af et farvenavn i HTML, hvor farvenavnet defineres i formatet for en hexadecimal værdi.
  • #rrggbb-format inkluderer værdier fra RR for rød, gg for grønt og bb for blå er placeret i mellem 00 toff hexadecimal værdi.
  • Lad os overveje et eksempel til at definere farve # 00ff00. så disse værdier genereres farvegrønt på grund af grøn, der indeholder den højeste værdi (ff), hvor den anden skal indstilles til 00.

3. HSL-værdi

  • Et andet format til at definere HTML-farve i form af Hue, Saturation, Lightness.
  • Nu vil vi se alle udtrykkene én efter én. Nuance defineres som graden af ​​farve, der kommer mellem 0 og 360. hvor 0 for rød, 120 for grøn og 240 for blå.
  • Mætning definerer farveværdien i procentdelen, hvor 0% siger gråtonen, hvor 100% er i fuld farve.
  • Lysstyrke fungerer også som den procentdel, der definerer 0% for sort, 50% er for hverken lys eller mørk, hvor 100% er for hvidt.

4. RGBA-værdi

  • Denne type HTML-farve definerer udvidelse til RGB-farve inklusive alfa-værdi. Hvor alfa bruges til at definere farvernes opacitet.
  • Alfa-værdien kommer mellem 0, 0 (fuldt gennemsigtig) til 1, 0 (slet ikke gennemsigtig)
  • Eksempel er rgba (255, 99, 71, 0)

5. HSLA-værdi

  • Dets fungerer på samme måde som HSL-farver, der også tillægger alfa-værdi med det til at definere farvernes opacitet.
  • hsla (8.100%, 80%, 0) for fuld gennemsigtig farve.
  • hsla (8.100%, 80%, 0, 9) for ikke så meget gennemsigtig farve.

Eksempler på farvenavn i HTML

Lad os se, hvordan farvenavn i HTML bruges ved hjælp af nogle eksempler nævnt nedenfor:

Eksempel 1

Lad os overveje et generelt eksempel, der viser, hvordan eksempelfarvenavn i HTML vil blive brugt:

HTML-kode:



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

Du lærer mere om fiasko end succes. Lad ikke det stoppe dig. Fejl bygger karakter. Hvis du arbejder på noget, du virkelig interesserer dig for, behøver du ikke at blive skubbet. Visionen trækker dig

Produktion:

Eksempel 2

Nu tager vi et andet eksempel, der definerer alle typer HTML-farve som følger:

HTML-kode:



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

Produktion:

I ovenstående eksempel er vi i stand til at se brugen af ​​forskellige HTML-farvetyper, og hvordan de navngives i HTML.

Eksempel 3

En yderligere brug af HTML-farve er at definere en kant til elementet, som er som følger:

I eksempel her kan vi tilføje en ramme til din kodekroppe, og ændre baggrund og tekstfarve også.

HTML-kode:

Selvaktualiserende teori taler om iboende fordele, der er forbundet med opgaveudførelsen, såsom jobtilfredshed, følelse af præstation osv.

Produktion:

Konklusion

Vi kom på tværs af, at HTML-farver er defineret med forskellige navne, procentdelværdi, hexværdi, alfaværdi og mange flere. Farvenavn i HTML bruges til at gøre farve til tekst, for baggrund, for en ramme, til graderinger. Der er forskellige typer til at definere HTML-farvenavn som RGB, hex, hsl, rgba, hsla.

Anbefalede artikler

Dette er en guide til farvenavn i HTML. Her diskuterer vi introduktionen, Typer af farvenavn i HTML sammen med eksempler, syntaks og HTML-koder. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

  1. HTML-stilattribut
  2. HTML-tabel tags
  3. Billedlink i HTML
  4. Opret tabeller i HTML
  5. HTML-begivenheder

Kategori:

Webudviklingsværktøjer