HTML цвета - Как установить цвет фона в HTML? - пример

Содержание:

Anonim

Введение в HTML-цвета

В этой статье рассказывается, как использовать цвета на веб-сайте с использованием HTML простым и легким способом. Цвета играют важную роль в создании веб-сайтов, чтобы выглядеть и чувствовать себя хорошо. В HTML нет встроенного отдельного тега, вместо этого он использует атрибут style или свойство color. Точно, цвета встраиваются в элементы HTML с использованием Cascading Style Sheet (CSS). Цвета придают элегантный вид веб-странице. Добавление цветов на веб-страницу включает настройку цветов фона, таблиц, абзацев и т. Д.

Как установить цвет фона в HTML?

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

Шестнадцатеричный цвет применяется непосредственно к Html-коду с помощью атрибута Style внутри элемента body 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?

Это делается с помощью атрибута border 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

Выход:

Теперь давайте посмотрим, как установить два цвета границы отдельно. Приведенный ниже код использует атрибут table со своими элементами.



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 с окантовкой цвета.

Выход:

Пример: объясняется, как установить цвет для отступов и полей с помощью тегов class и list.



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 для красного, синего, зеленого. Значение цвета очень важно для освещения.

В таблице ниже приведены примеры значений для цветов

Пример: приведенный ниже пример показывает различные значения цвета в настройках фона.

Методы Data Mining - понять шаблоны

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


прогнозирование


регрессия


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

Цвета HTML


Цвета стола

Выход:

Как использовать значения цвета RGB в HTML?

RGB обозначает красный зеленый синий напрямую и использует функцию RGB. Он принимает эти три значения в качестве параметров и объявляется как целое число, иногда в процентах. Какому бы цвету мы не хотели, его интенсивность получает более высокое значение 255, поскольку целочисленное значение находится в интервале от 0 до 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. Здесь мы обсуждаем Введение, Как установить цвет фона в HTML, Как применить цвет к тексту в HTML и т. Д. Вы также можете просмотреть другие предлагаемые нами статьи, чтобы узнать больше -

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