HTML boje - Kako postaviti boju pozadine u HTML-u? - Primjer

Sadržaj:

Anonim

Uvod u HTML boje

Ovaj članak govori o tome kako koristiti boje na web mjestu pomoću HTML-a na jednostavne i jednostavne načine. Boje igraju važnu ulogu u stvaranju web stranica kako bi izgledale i osjećale se dobro. Nema ugrađene HTML oznake umjesto toga koristi atribut stila ili svojstvo boje. Upravo su boje ugrađene u HTML elemente pomoću Cascading Style Sheet (CSS). Boje daju elegantan izgled web stranici. Dodavanje boja na web stranicu uključuje postavljanje boja pozadine, tablica, odlomaka itd.

Kako postaviti boju pozadine u HTML-u?

Povećavanje boje pozadine čini da web stranica izgleda ljepše i smjelije. Izvodi se pomoću boja, Hex boja kodova. RGB i RGBA vrijednosti boja (alfa vrijednost 0 do 1).

Šesterokutna boja primjenjuje se izravno na Html kod koristeći atribut Style unutar elementa tijela Html. Hex je kombinacija i brojeva i slova. Ispod je primjer koji ilustrira boju pozadine na web stranici.

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

Isječci koda:

Za dodavanje boje pozadine za prikaz možete koristiti atribut bgcolor. Kompatibilan je sa svim preglednicima, osim u 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

Kako primijeniti boju na tekst u HTML-u?

Primjena boje na HTML tekst je vrlo jednostavna, boju teksta možemo dodati / promijeniti primjenom na tri načina, a to su šesterokutna boja, HSL vrijednosti i nazivi boja. Slijede tri različite tehnike nanošenja boje na odgovarajuće web stranice.

1. Imena boja

To je prilično jednostavno korištenjem engleskih naziva boja kada je aplikacija izravno naprijed, koriste se ta imena boja. Određivanje imena boja izravne su metode i W3C je najavio 16 osnovnih boja (crna, žuta, crvena, Maroon, siva, vapno, zelena, maslina, srebrna, aqua, plava, mornarska, bijela, ljubičasta, fuksija, teal)

2. HSL

Vrijednosti zasićenja i lagane boje. Hue je definiran na 0 do 360 stupnjeva, zasićenost i lakoća od 0 do 100%.

3. Šesterokutna boja

Da bi se dobio precizan rezultat, primjenjuje se šestoznamenkasti šesteroznamenkasti broj. Za razradu prve dvocifre označavamo crvenu, a dvije sljedeće zelenu, a dvije dvije plavu vrijednost, a prethodi im '#'.

Sljedeći primjer objašnjava različite načine nanošenja boja na dokumente.


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

Izlaz:

Postoje različite metode za izradu boje teksta s obzirom da HTML ima puno prilagodljivih aplikacija.

  1. Primjena odjeljka Stil
  2. kreiranje pojedinačnog CSS lista
  3. Zamotavanje teksta

Kako primijeniti boju teksta pomoću odjeljka?

Pogledajmo različite metode za korištenje HTML boja:

1. Omotavanje pomoću HTML boja

Ispod koda mijenja boju teksta u odlomku s jednostavnim HTML kodovima. ima 140 imena u boji za obojavanje web stranica. Ispod koda prikazuje kako primijeniti boju teksta pomoću odjeljka.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Sadržaj je vrlo jasan

ružičasti tekst stavka

Izlaz:

2. Korištenje HEXCOLOR-a

Opet, ovaj primjer koristi odjeljak stila za proglašavanje šesterokutne boje nakon čega slijedi simbol '#'.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Pozdrav svijete

Tekst stavka heksa

Izlaz:

3. Korištenje RGB boje

Crvena, zelena, plava koristi svaki 8 bita, a njihova vrijednost varira od 0 do 255, što stvara različite boje. Primjer u nastavku odabire RGB boju prema njihovim vrijednostima.



Color Picker

Tekst plavog stavka

Izlaz:

4. Metoda pomoću stilskog lista



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

Svaka oznaka za oblikovanje boja.

Izlaz:

5. Stvaranje pojedinog CSS stila

.html datoteka




CSS style sheet




CSS style sheet




CSS style sheet

Više HTMl dokumenata.

Pozdrav svijete!

Vanjska CSS datoteka lcolor.css

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

Izlaz:

Kako postaviti boju granice u HTML-u?

To se provodi pomoću atributa obruba boje = "". Izvodi se pomoću Html elementa

pa čak i mi možemo stvoriti 3D efekte. Boja obruba primjenjuje se koristeći različite atribute poput border = "width", bordercolor = "boja def", bordercolorlight = "". CSS ima neka poboljšana svojstva granice koja pomažu u stvaranju obruba. Donji primjer prikazuje postavljanje jedne bočne boje na odgovarajuću tablicu. Ovdje označava red tablice i
označava podatke tablice i počinje se koristiti označiti. I obrub za njih primjenjuje se pomoću njihove širine i boja




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

Izlaz:

Sada pogledajmo postavljanje dvije boje obruba odvojeno. Kod u nastavku koristi atribut tablice sa njihovim elementima.



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

Izlaz:

Korištenje oznake

Koristi se za grupiranje svih elemenata i pomaže pri pregledu web stranice na određenom položaju. U donjem kôdu koristili smo dva za paragraf, a drugi za implementaciju atributa stila postavljanjem rubnih piksela, a debljina se povećava davanjem širine i dodali smo obloge kako bismo ih demonstrirali s lijeve strane.



Sample border color using div

Priroda je prekrasna

div s obrubom boje.

Izlaz:

Primjer: Ovo objašnjava kako postaviti boju za oblaganje i marginu pomoću oznaka klase i popisa.



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

Izlaz:

Kako odrediti boju koristeći vrijednosti u HTML-u?

Osnovne vrijednosti boja variraju od 0 do 255 za crvenu, plavu, zelenu. Vrijednost boje važna je pri odavanju lakoće.

Ispod tablice prikazane su vrijednosti uzoraka za boje

Primjer: Donji primjer prikazuje različite vrijednosti boja u njihovim pozadinskim postavkama.

Tehnike data datainga razumiju obrasce

Klasifikacija


proricanje


Regresija


Klasifikacija, tehnike predviđanja

HTML boje


Boje stola

Izlaz:

Kako se koristi HTML vrijednost RGB u HTML-u?

RGB crveno-zelene plave boje označava izravno i koristi RGB funkciju. Ove tri vrijednosti uzima kao parametre i deklarira kao cijeli broj, ponekad u postocima. Koju god boju želimo da joj intenzitet damo veću vrijednost 255 jer cijeli broj pada između o do 255. Na primjer, da bi imao plavu boju, poželjno je označiti (0, 0255). ovdje su prve dvije vrijednosti označene kao 0, 0, a zadnja vrijednost je 255 za plavu.

Primjer: RGB boja



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.

To je najskuplja zemlja na svijetu, Oslo je glavni grad ovog zelenog grada.

Izlaz:

Kako odrediti lakoću boja u HTML-u

Svjetlost boje je definirana svjetlinom za koju volimo da se mjeri u postocima. Većina web dizajnera želi koristiti jednostavnost nego RGB koja se može prilagoditi zahtjevima. Ovdje crna boja postavlja svjetlinu na 0%, a bijelu na 100%. Određuje se pomoću funkcije 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.

To je najskuplja zemlja na svijetu, Oslo je glavni grad ovog zelenog grada.

Izlaz:

U gornjem primjeru možete pokušati s različitim vrijednostima boje.

Zaključak

Dakle, za zaključak smo vidjeli da to ima različita svojstva. U ranijim vremenima web razvoj ima mnogo načina za određivanje boja za svoju web stranicu, a danas su najpopularnije boje u boji RGB i Hex boja (RGB je dobro poznat). Postoje različite aplikacije u kojima se boje implementiraju poput klizne ljestvice, palete boja itd.

Preporučeni članci

Ovo je vodič za HTML boje. Ovdje smo raspravljali o Uvodu, Kako postaviti pozadinsku boju u HTML-u, Kako primijeniti boju na tekst u HTML-u itd. Također možete proći kroz naše druge predložene članke da biste saznali više -

  1. Oznake HTML tablice
  2. Napravite tablice u HTML-u
  3. Stilovi HTML fontova
  4. Elementi HTML obrasca
  5. Program za stvaranje HTML alata za odabir boja (primjer)
  6. Kako implementirati boju i promijeniti stil u Matlabu?
  7. Kako učitati datoteku u PHP s primjerima