HTML színek - Hogyan állítsunk be háttérszínt a HTML-ben? - Példa

Tartalomjegyzék:

Anonim

Bevezetés a HTML színekhez

Ez a cikk ismerteti, hogyan lehet a weboldal színeit egyszerűen és egyszerűen használni a HTML segítségével. A színek fontos szerepet játszanak a jó megjelenésű és jó közérzetű webhelyek létrehozásában. Nincs külön beépített HTML címke, hanem a stílus attribútumot vagy a színtulajdonságot használja. Pontosan, a színek beágyazódnak a HTML elemekbe a Cascading Style Sheet (CSS) használatával. A színek elegáns megjelenést jelentenek a weboldalon. A színek hozzáadása a weblaphoz magában foglalja a háttér színek, táblázatok, bekezdések stb. Beállítását.

Hogyan állítsunk be háttérszínt a HTML-ben?

A háttérszín világosabbá tétele révén a webhely szép és merészebbnek tűnik. Ezt színek, Hex színkódok használatával hajtják végre. RGB és RGBA színértékek (Alfa érték 0 és 1 között).

A Hex szín közvetlenül a Html kódra kerül a Style attribútum használatával a Html test elemén belül. A Hex számok és betűk kombinációja. Az alábbiakban bemutatjuk a háttér színét a weboldalon.

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

Kódrészletek:

Háttér szín hozzáadásához a bgcolor attribútumot használhatja a megjelenítéshez. Kompatibilis az összes böngészővel, a HTML 5 kivételével.

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

Hogyan alkalmazható a szöveg színe a HTML-ben?

A HTML-szövegre színt alkalmazni nagyon könnyű, háromféle módon adhatunk hozzá / változtathatunk meg a szöveg színét: Hex color, HSL értékek és színnevek. Az alábbiakban bemutatjuk a három különböző módszert a szín alkalmazására a megfelelő weboldalakon.

1. Színnevek

Ez nagyon egyszerű az angol színnevek használatával, amikor az alkalmazás egyenesen továbblép, ezeket a színneveket használják. A színnevek megadása közvetlen módszer, és a W3C 16 alapszínt jelenített be (fekete, sárga, piros, gesztenyebarna, szürke, lime, zöld, olíva, ezüst, aqua, kék, haditengerészet, fehér, lila, fuksia, kékeszöld)

2. HSL

Színárnyalat telítettség és világosság színértékek. A színárnyalatot 0-tól 360-ig, telítettséget és világosságot 0-tól 100% -ig kell meghatározni.

3. Hex szín

A pontos eredmény elérése érdekében hatjegyű hexadecimális számot kell alkalmazni. Az első két számjegy kidolgozása vöröset jelöl, a következő kettő zöld, a másik kettő kék értéket jelöl, amelyet „#” előz meg.

A következő példa ismerteti a színek alkalmazását a dokumentumokban.


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

Kimenet:

Különböző módszerek vannak a szöveg színezésére, mivel a HTML sok testreszabható alkalmazással rendelkezik.

  1. Stílus szakasz alkalmazása
  2. egyedi CSS stíluslap létrehozása
  3. A szöveg csomagolása

Hogyan alkalmazható a szöveg színe a szakasz használatával?

Lássuk különféle módszereket a HTML színek használatához:

1. Csomagolás HTML színekkel

Az alábbi kód megváltoztatja a bekezdés színét az egyszerű HTML kódokkal. 140 színes név létezik a weboldalak színezésére. Az alábbi kód bemutatja, hogyan kell a szöveg színét használni a szakasz segítségével.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Ez a tartalom nagyon világos

rózsaszín bekezdés szöveg

Kimenet:

2. A HEXCOLOR használata

Ez a példa a stílusszakaszt ismételten a hatszín deklarálására, amelyet egy „#” szimbólum követ.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Helló Világ

Hexa bekezdés szöveg

Kimenet:

3. RGB szín használata

A piros, zöld, kék mindegyik 8 bitet használ, és értéke 0 és 255 között változhat, ami különböző színeket eredményez. Az alábbi példa az RGB színeit értékeik szerint választja ki.



Color Picker

Kék bekezdés szöveg

Kimenet:

4. Módszer a stíluslap használatával



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

Minden címkét színekkel kell stílusolni.

Kimenet:

5. Saját CSS stílus létrehozása

.html fájl




CSS style sheet




CSS style sheet




CSS style sheet

Több HTMl dokumentum.

Helló Világ!

Külső CSS fájl lcolor.css

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

Kimenet:

Hogyan állítsuk be a szegély színét a HTML-ben?

Ez egy border color = ”“ attribútum használatával történik. Ez a Html elem használatával történik

sőt 3D effektusokat is létrehozhatunk. A szegély színe különböző attribútumokkal kerül alkalmazásra, például border = “szélesség”, bordercolor = “color def”, bordercolorlight = ”“. A CSS-nek van néhány továbbfejlesztett szegélytulajdonsága, amely elősegíti a határok létrehozását. Az alábbi példa bemutatja az egyetlen szegély színének beállítását a megfelelő táblázathoz. Itt táblázatsort és
táblázat adatait jelöli, és elkezdte használni címke. És a szöget számukra szélességük és színük alapján alkalmazzák




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

Kimenet:

Most nézzük meg a két szegélyszín külön-külön történő beállítását. Az alábbi kód a tábla attribútumot használja az elemekkel.



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

Kimenet:

Címke használata

Az összes elem csoportosítására szolgál, és segít a weboldal megtekintésében az adott pozícióban. Az alábbi kódban kettőt használtunk egy bekezdéshez, a másikat pedig a stílus attribútum megvalósításához a határ pixelek beállításával, a vastagság pedig a szélesség megadásával növekszik, és kiegészítést adtunk a bal oldali bemutatáshoz.



Sample border color using div

A természet gyönyörű

div szegéllyel.

Kimenet:

Példa: Ez elmagyarázza, hogyan kell az osztály- és listacímkékkel beállítani a párnázat és a margó színét.



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

Kimenet:

Hogyan határozhatunk meg színt a HTML-ben szereplő értékek használatával?

Az alapszínértékek 0 és 255 között változnak a vörös, kék, zöld színben. A színérték fontos a világosság kinyerésekor.

Az alábbi táblázat a színek mintaértékeit mutatja

Példa: Az alábbi példa a különböző színértékeket mutatja a háttérbeállításukban.

Az Adatbányászati ​​technikák a minták megértése

Osztályozás


jóslás


Regresszió


Osztályozás, predikciós technikák

HTML színek


Táblázat színei

Kimenet:

Hogyan lehet használni az RGB színértékeket a HTML-ben?

Az RGB közvetlenül a piros, zöld, kék színeket jelöli, és az RGB funkciót használja. Ezeket a három értéket veszi paraméterként, és egészként deklarálják, néha százalékban. Bármelyik színt szeretnénk, akkor az intenzitása nagyobb lesz, ha az egész érték o és 255 közé esik. Például, ha a kék szín inkább jelölésre kerül (0, 0, 255). itt az első két értéket 0, 0-ra, az utolsó értéket kékre 255-re jelöltük.

Példa: RGB szín



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.

Ez a világ legdrágább országa, Oslo a zöld város fővárosa.

Kimenet:

Hogyan határozhatjuk meg a színek világosságát a HTML-ben

A szín világosságát az a fényerő határozza meg, amelyet előnyben részesítünk, ha százalékban mérjük. A legtöbb webdesigner az RGB-nál kevesebb fényt szeretne használni, amelyet a követelményeknek megfelelően lehet beállítani. Itt egy fekete állítja a fényerőt 0% -ra, a fehér pedig 100% -ra. A hsl () függvény használatával adható meg.



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.

Ez a világ legdrágább országa, Oslo a zöld város fővárosa.

Kimenet:

A fenti példában kipróbálhatja a különböző színértékeket.

Következtetés

Ezért befejezésül láthattuk, hogy ennek különböző tulajdonságai vannak. A korábbi napokban a webfejlesztésnek számos módja van a weboldal színeinek meghatározására, és manapság a legnépszerűbb színvonalak az RGB és a Hex színkódok (az RGB jól ismert). Különböző alkalmazások léteznek, ahol a színek megvalósulnak, például csúszó méretarány, színpaletta stb.

Ajánlott cikkek

Ez egy útmutató a HTML színekhez. Itt a Bevezetésről beszélünk, Hogyan állítsunk be háttérszínt HTML-ben, Hogyan alkalmazzuk a színt a szöveghez HTML-ben, stb. További tudnivalókért áttekintheti a többi javasolt cikket is -

  1. HTML táblázatok
  2. Készítsen táblázatokat HTML-ben
  3. HTML betűtípus stílusok
  4. HTML űrlapelemek
  5. Program HTML színválasztó létrehozására (példa)
  6. Hogyan valósítsuk meg a színt és változtassuk meg a stílust a Matlabban?
  7. Fájlok feltöltése a PHP-ben példákkal