HTML Кольори - Як встановити колір тла в HTML? - Приклад

Зміст:

Anonim

Вступ у кольорах HTML

Ця стаття розповідає про те, як використовувати кольори на веб-сайті за допомогою HTML простими та простими способами. Кольори відіграють важливу роль у створенні веб-сайтів, щоб виглядати та відчувати себе добре. Немає вбудованого HTML тегу, натомість він використовує атрибут стилю або властивість кольору. Саме кольори вбудовані в елементи HTML за допомогою каскадного аркуша стилів (CSS). Кольори надають веб-сторінці елегантний вигляд. Додавання кольорів на веб-сторінку включає налаштування кольорів фону, таблиць, абзаців тощо.

Як встановити колір тла в HTML?

Покращення кольору фону робить веб-сайт красивим і сміливішим. Це робиться за допомогою кольорів, шістнадцяткових кодів кольорів. Значення кольорів RGB та RGBA (значення альфа 0 до 1).

Шістнадцятковий колір застосовується безпосередньо до коду Html за допомогою атрибута Style всередині елемента тіла Html. Шістнадцятковий - це комбінація і цифр, і літер. Нижче наведено приклад, що ілюструє колір фону на веб-сторінці.

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

Кодові фрагменти:

Щоб додати колір фону, ви можете використовувати атрибут bgcolor для відображення. Він сумісний з усіма браузерами, крім 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

Як застосувати колір до тексту в HTML?

Застосувати колір до тексту HTML досить легко, ми можемо додати / змінити колір тексту, застосувавши три способи, а саме шістнадцятковий колір, значення HSL та назви кольорів. Нижче наведено три різні методи нанесення кольору на відповідні веб-сторінки.

1. Назви кольорів

Це досить просто, використовуючи англійські імена кольорів, коли програма прямо вперед, ці кольорові назви використовуються. Вказані назви кольорів є прямими методами, і W3C оголосив 16 основних кольорів (чорний, жовтий, червоний, бордовий, сірий, вапно, зелений, оливковий, сріблястий, аква, синій, темно-білий, фіолетовий, фуксія, чирок)

2. HSL

Значення кольору відтінку та легкості. Відтінок визначається в межах від 0 до 360 градусів, насиченість і легкість від 0 до 100%.

3. Шестигранний колір

Для отримання точного результату застосовується шестизначне шістнадцяткове число. Щоб розробити перші двоцифрові позначити Червоне, два наступні - Зелене, два інші - Синє значення, а передує "#".

Наступний приклад пояснює різні способи нанесення кольорів на документи.


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

Вихід:

Існують різні способи зробити колір тексту, оскільки HTML має безліч настроюваних програм.

  1. Застосування розділу «Стиль»
  2. створення індивідуального аркуша стилів CSS
  3. Обгортання тексту

Як застосувати колір тексту за допомогою розділу?

Давайте подивимось різні методи використання HTML кольорів:

1. Обгортання за допомогою кольорів HTML

Нижче коду змінюється колір тексту в абзаці простими кодами HTML. Є 140 кольорових імен для розфарбовування веб-сайтів. Нижче код демонструє, як застосувати колір тексту за допомогою розділу.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Цей вміст дуже зрозумілий

текст абзацу рожевий

Вихід:

2. Використання HEXCOLOR

Знову ж, цей приклад містить розділ стилю, щоб оголосити шістнадцятковий колір, а потім символ "#".



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Привіт Світ

Текст абзацу в гекса

Вихід:

3. Використання кольору RGB

Червоний, зелений, синій використовує по 8 біт кожен, їх значення коливається від 0 до 255, що дає різні кольори. Наведений нижче приклад вибирає колір RGB за їх значеннями.



Color Picker

Текст синього абзацу

Вихід:

4. Метод за допомогою аркуша Стиль



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

Кожен тег потрібно стилізувати за кольорами.

Вихід:

5. Створення індивідуального стилю CSS

.html файл




CSS style sheet




CSS style sheet




CSS style sheet

Кілька документів HTMl.

Привіт Світ!

Зовнішній CSS-файл lcolor.css

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

Вихід:

Як встановити колір кордону в HTML?

Це робиться за допомогою атрибуту рамки color = ”“. Це робиться за допомогою елемента Html

і навіть ми можемо створювати 3D ефекти. Колір рамки застосовується за допомогою різних атрибутів, таких як border = "width", bordercolor = "color def", bordercolorlight = "". CSS має деякі покращені властивості кордону, які допомагають створювати межі. Наведений нижче приклад показує встановлення одного кольору рамки для відповідної таблиці. Ось позначає рядок таблиці та
позначає дані таблиці і її починають використовувати тег. І рамка для них наноситься за допомогою їх ширини та кольорів




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

Вихід:

Тепер подивимося, як встановити два кольори рамки окремо. У наведеному нижче коді використовується атрибут таблиці зі своїми елементами.



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

Вихід:

Використовуючи тег

Він використовується для групування всіх елементів та допомагає переглядати веб-сторінку на її конкретному місці. У наведеному нижче коді ми використали два для абзацу та інше, щоб реалізувати атрибут стилю, встановивши межі пікселів, а товщина збільшується, видаючи ширину, і ми додали накладки, щоб продемонструвати їх зліва.



Sample border color using div

Природа прекрасна

div з кольором окантовки.

Вихід:

Приклад: Це пояснює, як встановити колір для прокладки та поля за допомогою тегів класу та списку.



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

Вихід:

Як вказати колір за допомогою значень у HTML?

Основні значення кольору змінюються від 0 до 255 для червоного, синього, зеленого. Значення кольору важливе для видачі легкості.

Нижче в таблиці показані зразкові значення кольорів

Приклад . Нижчеприклад показує різні значення кольорів у їхніх фонових налаштуваннях.

Методи обміну даними - це зрозуміти закономірності

Класифікація


Прогнозування


Регресія


Класифікація, методи прогнозування

Кольори HTML


Кольорові таблиці

Вихід:

Як використовувати значення кольорів RGB у HTML?

RGB позначає червоно-зелений синій кольори безпосередньо та використовує функцію RGB. Ці три значення приймаються як параметри і оголошуються як цілі, іноді у відсотках. Яким би кольором ми не хотіли, щоб його інтенсивність отримала більш високе значення 255, оскільки ціле значення падає від o до 255. Наприклад, щоб мати синій колір, його бажано позначати (0, 0255). тут перші два значення позначені як 0, 0, а останнє значення - 255 для синього.

Приклад: колір RGB



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.

Це найдорожча країна світу, Осло - столиця цього зеленого міста.

Вихід:

Як вказати легкість кольорів у HTML

Легкість кольору визначається яскравістю, яку ми вважаємо за краще, вимірюється у відсотках. Більшість веб-дизайнерів бажають використовувати легкість, ніж RGB, яку можна регулювати відповідно до вимог. Тут чорний колір встановлює яскравість на 0%, білий - на 100%. Він задається за допомогою функції 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.

Це найдорожча країна світу, Осло - столиця цього зеленого міста.

Вихід:

Ви можете спробувати з різними значеннями кольору у наведеному вище прикладі.

Висновок

Тому для висновку ми бачили, що це має різні властивості. У попередні часи веб-розробка мала багато способів вказати кольори для свого веб-сайту, а сьогодні найпопулярнішими кольоровими колірами є кольори RGB та Hex кольорів (RGB добре відомий). Існують різні програми, де кольори реалізовані як розсувна шкала, колірна палітра тощо.

Рекомендовані статті

Це посібник з HTML Colors. Тут ми обговорюємо Вступ, Як встановити колір тла в HTML, Як застосувати колір до тексту в HTML тощо. Ви також можете ознайомитись з іншими запропонованими нами статтями, щоб дізнатися більше -

  1. Теги HTML-таблиць
  2. Створіть таблиці в HTML
  3. Стилі шрифтів HTML
  4. Елементи форми HTML
  5. Програма для створення HTML-вибору кольорів (приклад)
  6. Як реалізувати колір та змінити стиль у Matlab?
  7. Як завантажити файл у PHP з прикладами