Farby HTML Ako nastaviť farbu pozadia v HTML? - príklad

Obsah:

Anonim

Úvod do farieb HTML

Tento článok sa venuje tomu, ako na webe používať farby jednoduchým a ľahkým spôsobom pomocou HTML. Farby hrajú dôležitú úlohu pri vytváraní webových stránok, aby vyzerali a cítili sa dobre. Neexistuje žiadna vstavaná samostatná značka HTML, ktorá namiesto toho využíva atribút štýlu alebo vlastnosť farby. Presne, farby sú vložené do prvkov HTML pomocou kaskádového štýlu (CSS). Farby dodávajú webovej stránke elegantný vzhľad. Pridanie farieb na webovú stránku zahŕňa nastavenie farieb pozadia, tabuliek, odsekov atď.

Ako nastaviť farbu pozadia v HTML?

Vďaka zosvetleniu pozadia bude web vyzerať pekne a odvážnejšie. Deje sa to pomocou farieb, hexadecimálnych farebných kódov. Hodnoty farieb RGB a RGBA (hodnota alfa 0 na 1).

Hexová farba sa aplikuje priamo na Html kód pomocou atribútu Style vo vnútri elementu tela Html. Hex je kombinácia čísel a písmen. Nižšie je uvedený príklad ilustrujúci farbu pozadia na webovej stránke.

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

Útržky kódu:

Ak chcete pridať farbu pozadia, môžete na zobrazenie použiť atribút bgcolor. Je kompatibilný so všetkými prehliadačmi okrem 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

Ako aplikovať farbu na text v HTML?

Použitie farby na text HTML je pomerne ľahké, môžeme pridať / zmeniť farbu textu použitím troch spôsobov, a to Hex color, HSL hodnoty a názvy farieb. Nasledujú tri rôzne techniky aplikovania farieb na príslušné webové stránky.

1. Názvy farieb

Je to úplne jednoduché, ak sa v aplikácii používa priamy názov anglických názvov farieb. Názvy farieb sú priame metódy a W3C oznámila 16 základných farieb (čierna, žltá, červená, kaštanová, sivá, limetková, zelená, olivová, strieborná, aqua, modrá, námornícka, biela, fialová, fuchsiová, sivozelená).

2. HSL

Odtiene sfarbenia a svetlosti farieb. Odtieň je definovaný v rozsahu 0 až 360 stupňov, sýtosť a ľahkosť od 0 do 100%.

3. Šesťhranná farba

Na dosiahnutie presného výsledku sa používa šesťmiestne hexadecimálne číslo. Na vypracovanie prvých dvoch číslic označujeme červenú, ďalšie dve označujú zelenú, ďalšie dve označujú modrú hodnotu a pred ktorými je „#“.

Nasledujúci príklad vysvetľuje rôzne spôsoby aplikácie farieb na dokumenty.


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

Výkon:

Existujú rôzne metódy na farbu textu, pretože HTML má veľa prispôsobiteľných aplikácií.

  1. Použitie časti Štýl
  2. vytvorenie samostatného hárku štýlov CSS
  3. Zalomenie textu

Ako použiť farbu textu pomocou sekcie?

Pozrime sa na rôzne spôsoby použitia farieb HTML:

1. Balenie pomocou farieb HTML

Nižšie uvedený kód mení farbu textu v odseku pomocou jednoduchých kódov HTML. Existuje 140 farebných názvov na zafarbenie webových stránok. Nižšie uvedený kód ukazuje, ako použiť farbu textu pomocou sekcie.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Tento obsah je veľmi jasný

ružový text odseku

Výkon:

2. Používanie HEXCOLOR

Aj v tomto príklade je v sekcii štýlov deklarovaná hexanová farba nasledovaná symbolom #.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

ahoj svet

Text v odseku Hexa

Výkon:

3. Použitie farby RGB

Červená, zelená, modrá používa 8 bitov a ich hodnota sa pohybuje od 0 do 255, čo vytvára rôzne farby. Nižšie uvedený príklad vyberie farbu RGB podľa svojich hodnôt.



Color Picker

Modrý text odseku

Výkon:

4. Metóda pomocou hárku štýlov



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

Každá značka má byť štylizovaná s farbami.

Výkon:

5. Vytvorenie individuálneho štýlu CSS

.html súbor




CSS style sheet




CSS style sheet




CSS style sheet

Viac dokumentov HTMl.

Ahoj svet!

Externý súbor CSS lcolor.css

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

Výkon:

Ako nastaviť farbu orámovania v HTML?

Robí sa to pomocou atribútu border color = "“. Uskutočňuje sa pomocou prvku HTML

a dokonca dokážeme vytvoriť 3D efekty. Farba orámovania sa použije s použitím rôznych atribútov, ako napríklad border = „width“, bordercolor = „color def“, bordercolorlight = „“. CSS má vylepšené vlastnosti hraníc, ktoré pomáhajú pri vytváraní hraníc. Nižšie uvedený príklad ukazuje nastavenie farby jediného okraja na zodpovedajúcu tabuľku. Tu označuje riadok tabuľky a
označuje dáta tabuľky a začína sa používať tag. Hranica pre nich sa aplikuje pomocou ich šírky a farieb




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

Výkon:

Teraz sa pozrime na nastavenie dvoch farieb okrajov osobitne. Nižšie uvedený kód používa atribút tabuľky s ich prvkami.



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

Výkon:

Pomocou značky

Používa sa na zoskupenie všetkých prvkov a pomáha pri prezeraní webovej stránky na jej konkrétnej pozícii. V nižšie uvedenom kóde sme použili dva na odsek a druhý na implementáciu atribútu štýlu nastavením hraničných pixelov a hrúbka sa zväčšuje rozdielom šírky a pridali sme výplň, aby sme ich demonštrovali vľavo.



Sample border color using div

Príroda je krásna

div s farbou orámovania.

Výkon:

Príklad: Toto vysvetľuje, ako nastaviť farbu výplne a okraja pomocou značiek tried a zoznamov.



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

Výkon:

Ako určiť farbu pomocou hodnôt v HTML?

Základné hodnoty farieb sa pohybujú od 0 do 255 pre červenú, modrú a zelenú. Hodnota farby je dôležitá pri rozdávaní svetla.

V nasledujúcej tabuľke sú uvedené vzorové hodnoty farieb

Príklad: Nižšie uvedený príklad zobrazuje rôzne hodnoty farieb v ich nastaveniach pozadia.

Techniky dolovania dát je pochopiť vzorce

klasifikácia


predpoveď


regresia


Klasifikácia, predikčné techniky

HTML farby


Farby stola

Výkon:

Ako používať hodnoty farieb RGB v HTML?

RGB označuje priamo červenú zelenú modrú farbu a používa funkciu RGB. Tieto tri hodnoty berie ako parametre a niekedy sa vyjadrí ako celé číslo v percentách. Bez ohľadu na to, akú farbu chceme, jej intenzita je daná vyššou hodnotou 255, pretože celé číslo klesá medzi o až 255. Napríklad ak chceme mať modrú farbu, je výhodné označiť ju (0, 0 255). tu sú prvé dve hodnoty označené ako 0, 0 a posledná hodnota je 255 pre modrú farbu.

Príklad: RGB farba



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.

Je to najdrahšia krajina na svete, Oslo je hlavným mestom tohto zeleného mesta.

Výkon:

Ako určiť ľahkosť farieb v HTML

Svetlosť farby je definovaná jasom, ktorý uprednostňujeme, meria sa v percentách. Väčšina webových dizajnérov chce používať ľahkosť ako RGB, ktorú je možné upraviť podľa požiadaviek. Tu čierna nastavila jas na 0% biela nastavená na 100%. Zadáva sa pomocou funkcie 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.

Je to najdrahšia krajina na svete, Oslo je hlavným mestom tohto zeleného mesta.

Výkon:

Vo vyššie uvedenom príklade môžete skúsiť s rôznymi hodnotami farieb.

záver

Preto sme dospeli k záveru, že to má odlišné vlastnosti. V predchádzajúcich dňoch má vývoj webu veľa spôsobov, ako špecifikovať farby pre svoju webovú stránku, av súčasnosti sú najobľúbenejšími farebnými kódmi RGB a Hex (RGB je dobre známy). Existujú rôzne aplikácie, v ktorých sú farby implementované ako posuvná stupnica, paleta farieb atď.

Odporúčané články

Toto je sprievodca farbami HTML. Tu diskutujeme o úvodu, ako nastaviť farbu pozadia v HTML, o tom, ako použiť farbu na text v HTML, atď. Ďalšie informácie nájdete aj v ďalších navrhovaných článkoch -

  1. Značky tabuliek HTML
  2. Vytvorte tabuľky v HTML
  3. Štýly písma HTML
  4. Prvky formulára HTML
  5. Program na vytvorenie nástroja na výber farieb HTML (príklad)
  6. Ako implementovať farbu a zmeniť štýl v Matlabe?
  7. Ako nahrať súbor v PHP s príkladmi