HTML-färger - Hur ställer jag in en bakgrundsfärg i HTML? - Exempel

Innehållsförteckning:

Anonim

Introduktion om HTML-färger

Den här artikeln beskriver hur man använder färger på webbplatsen med HTML på enkla och enkla sätt. Färger spelar en viktig roll för att skapa webbplatser för att se ut och må bra. Det finns ingen enskilt tagg inbyggd HTML i stället det använder stilattribut eller färgegenskapen. Precis är färgerna inbäddade i HTML-elementen med Cascading Style Sheet (CSS). Färger ger en elegant look på webbsidan. Att lägga till färger på webbsidan inkluderar inställning av bakgrundsfärger, tabeller, stycken etc.

Hur ställer jag in en bakgrundsfärg i HTML?

Att göra bakgrundsfärg ljusare gör att webbplatsen ser vacker och djärvare ut. Det görs med färger, Hex-färgkoder. RGB- och RGBA-färgvärden (alfavärde 0 till 1).

Hexfärg appliceras direkt på Html-koden med hjälp av Style-attribut inuti kroppselementet i Html. Hex är en kombination av både siffror och bokstäver. Nedan visas exemplet som illustrerar bakgrundsfärg på webbsidan.

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

Kodavsnitt:

För att lägga till bakgrundsfärg kan du använda bgcolor-attribut för att visa. Det är kompatibelt med alla webbläsare utom 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

Hur applicerar jag färg på text i HTML?

Att tillämpa färg på HTML-texten är ganska enkelt, vi kan lägga till / ändra färgens text genom att använda tre sätt, nämligen Hex-färg, HSL-värden och färgnamn. Följande är de tre olika teknikerna för att applicera färg på motsvarande webbsidor.

1. Färgnamn

Detta är ganska enkelt genom att använda engelska färgnamn när applikationen är rak framåt används dessa färgnamn. Ange färgnamn är direkta metoder och W3C har meddelat 16 grundfärger (svart, gul, röd, rödbrun, grå, lime, grön, oliv, silver, aqua, blå, marinblå, vit, lila, fuchsia, kricka)

2. HSL

Färgvärden för nyansmättnad och ljushet. Nyans definieras i 0 till 360 grader, mättnad och ljushet från 0 till 100%.

3. Hexfärg

För att få ett exakt resultat tillämpas sexsiffrigt hexadecimaltal. För att utarbeta de första tvåsiffrorna betecknar Röd, de nästa två anger Grönt, de andra två anger Blått värde och föregås av '#'.

Följande exempel förklarar de olika sätten att tillämpa färger på dokumenten.


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:

Det finns olika metoder för att göra textfärg eftersom HTML har många anpassningsbara applikationer.

  1. Tillämpa stilavsnitt
  2. skapa ett individuellt CSS Style-ark
  3. Inpackning av texten

Hur applicerar du textfärg med avsnitt?

Låt oss se olika metoder för att använda HTML-färger:

1. Inpackning med HTML-färger

Nedanstående kod ändrar färgen på texten i stycket med enkla HTML-koder. det finns 140 färgade namn för att måla webbplatserna. Nedanstående kod visar hur man applicerar textfärg med avsnitt.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Detta innehåll är mycket tydligt

rosa stycke text

Produktion:

2. Använd HEXCOLOR

Återigen tar detta exempel stilavsnittet för att deklarera hexfärg följt av en '#' -symbol.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Hej världen

Hexa-styckatext

Produktion:

3. Använda RGB-färg

Den röda, gröna, blå använder 8 bitar vardera och deras värde varierar från 0 till 255 vilket ger olika färger. Exemplet nedan väljer RGB-färg efter deras värden.



Color Picker

Blå stycketext

Produktion:

4. Metod med formatmallen



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

Varje tagg ska utformas med färger.

Produktion:

5. Skapa individuell CSS-stil

.html-fil




CSS style sheet




CSS style sheet




CSS style sheet

Flera HTMl-dokument.

Hej världen!

Extern CSS-fil lcolor.css

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

Produktion:

Hur ställer jag in kantfärg i HTML?

Det görs med ett attribut gränsfärg = "". Det görs med Html-elementet

och till och med vi kan skapa 3D-effekter. Gränsfärgen tillämpas med olika attribut som border = "bredd", bordercolor = "färg def", bordercolorlight = "". CSS har några förbättrade gränsegenskaper som hjälper till att skapa gränser. Exemplet nedan visar inställning av en enda kantfärg till motsvarande tabell. Här anger tabellrad och
anger tabelldata och det börjar användas märka. Och gränsen för dem tillämpas med hjälp av deras bredd och färger




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:

Låt oss nu se att ställa in två kantfärger separat. Följande kod använder tabellattribut med deras element.



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:

Med tagg

Det används för att gruppera alla element och hjälper till att se en webbsida i sin speciella position. I koden nedan har vi använt två för ett stycke och annat för att implementera stilattribut genom att ställa in kantpixlar och tjockleken ökas genom att ge ut bredden och vi har lagt till stoppning för att visa dem till vänster.



Sample border color using div

Naturen är vacker

div med en kantfärg.

Produktion:

Exempel: Detta förklarar hur du ställer in färgen för stoppning och marginal med klass- och listtaggar.



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:

Hur specificerar jag färg med hjälp av värden i HTML?

Grundfärgvärdena varierar från 0 till 255 för röd, blå, grön. Färgvärdet är viktigt för att ge ut ljusheten.

Nedanstående tabell visar exempelvärden för färgerna

Exempel: Nedanstående exempel visar olika färgvärden i deras bakgrundsinställningar.

Data Mining-tekniker är att förstå ett mönster

Klassificering


Förutsägelse


regression


Klassificering, förutsägelsestekniker

HTML-färger


Tabellfärger

Produktion:

Hur använder jag RGB-färgvärden i HTML?

RGB betecknar rödgrönblå färger direkt och använder RGB-funktion. Det tar de tre värdena som parametrar och deklareras som heltal ibland i procent. Oavsett vilken färg vi vill ha sin intensitet ges ett högre värde 255 eftersom ett heltalvärde faller mellan o till 255. För att ha en blå färg föredras det till exempel att beteckna (0, 0255). här är de två första värdena markerade som 0, 0 och det sista värdet är 255 för blått.

Exempel: RGB-färg



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 är det dyraste landet i världen, Oslo är huvudstaden i denna gröna stad.

Produktion:

Hur du anger färgens ljushet i HTML

Färgens ljusstyrka definieras av ljusstyrkan vi föredrar att den mäts i procent. De flesta webbdesigners vill använda ljushet än RGB som kan justeras enligt kraven. Här sätter en svart ljusstyrkan till 0% vit inställd på 100%. Det specificeras med funktionen 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 är det dyraste landet i världen, Oslo är huvudstaden i denna gröna stad.

Produktion:

Du kan prova med olika värden för färg i exemplet ovan.

Slutsats

Därför har vi sett att detta har olika egenskaper för att sluta. Under tidigare dagar har webbutveckling många sätt att specificera färger för deras webbplats och numera är de mest populära färgvägarna RGB och Hex färgkoder (RGB är välkänt). Det finns olika applikationer där färger implementeras som en glidskala, färgpalett etc.

Rekommenderade artiklar

Detta är en guide till HTML-färger. Här diskuterar vi introduktionen, hur man ställer in en bakgrundsfärg i HTML, hur man applicerar färg på text i HTML, etc. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -

  1. HTML-tabell taggar
  2. Skapa tabeller i HTML
  3. HTML-typsnitt
  4. HTML-formelement
  5. Program för att skapa HTML-färgväljare (exempel)
  6. Hur implementerar jag färg och ändrar stil i Matlab?
  7. Hur man laddar upp fil i PHP med exempel