Html фоновый цвет: Цвет фона | htmlbook.ru

Содержание

Цвет фона | htmlbook.ru

Цвет фона является достаточно важным элементом любой веб-страницы. Во-первых,
он задает нужное настроение и общий настрой сайта, а во-вторых, облегчает восприятие
текста.

Цвет фона веб-страницы задается с использованием атрибута bgcolor
тега <body>.

Пример 1. Изменение цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0">
   <p>...</p>
 </body>
</html>

Цвет можно указывать в шестнадцатеричном значении или по его имени.

Несмотря на то, что для фона можно указывать любой цвет, на большинстве
сайтов используются преимущественно белый фон и черные буквы, как
наиболее устоявшийся вариант.

Фоновый рисунок

В качестве фона можно использовать любое подходящее для этого изображение.
Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться
с цветовой гаммой веб-страницы и быть маленьким по размеру, чтобы быстро загружаться.
Если после перечисленного вы все еще хотите добавить фоновый рисунок на страницу,
следует воспользоваться атрибутом background тега
<body>.

Пример 2. Добавление фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый рисунок</title>
 </head>
 <body background="images/bg.jpg">
  <p>...</p>
 </body>
</html>

Если изображение меньше размера экрана монитора, оно будет размножено
по горизонтали и вертикали.

Поскольку фоновый рисунок загружается медленнее, чем цвет фона,
может получиться, что текст не будет читаться некоторое время, пока
не произойдет загрузка рисунков. То же самое может случиться и при
отключенных в браузере рисунках. Поэтому рекомендуется всегда задавать
цвет фона наряду с фоновым рисунком (пример 3).

Пример 3. Использование фонового рисунка и цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg">
   <p>...</p>
 </body>
</html>

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается
вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным
с помощью атрибута bgproperties=»fixed» тега <body>.

Пример 4. Задание фиксированного фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фон</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg" 
  bgproperties="fixed">
   <p>...</p>
 </body>
</html>

При указании атрибута bgproperties, как показано
в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным,
а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

Как задавать цвет фона HTML документа

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

Вероятно, вы уже не раз видели, что цвет фона на html страничках не всегда бывает белым. Белый цвет это цвет фона, который устанавливается браузером по умолчанию, если не указан какой ни, будь другой цвет.

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: <body bgcolor=»#FFFF99″> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body>
</html>

Создайте html страничку, содержащую код, приведенный выше, и посмотрите в браузере, какой она будет иметь цвет фона. Для этого откройте ваш текстовый редактор блокнот скопируйте туда код представленный выше. Затем сохраните текстовый документ с расширением .html, как это сделать мы рассматривали в уроке основы html.

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

Для этого запустите Photoshop и в панели инструментов щелкните по значку выбор цвета (смотрите рисунок ), затем появится палитра цветов в которой с помощью ползунков вы можете выбрать тот или иной цвет, а его код будет отображен в низу, на рисунке оно обведено красным квадратом.

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. <body bgcolor=»red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Просмотров: 102946

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>

<p>Синий текст параграфа.</p>

<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>

<p>Параграф.</p>

<p>
 <b>Жирный текст.</b>
 <span>Обычный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как сделать фон в HTML?

Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

Чтобы задать фон в HTML используйте промежуточный DOCTYPE

А начну я с того, что в HTML5 нет возможности задать фон для сайта. Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Как создаётся фон на веб-странице?

Если с этим разобрались, давайте перейдём к пониманию того, как создаётся фон. И первое, что здесь нужно отметить – это различие между фоновым цветом и фоновой картинкой. В начале идёт фоновый цвет, который заливает всё доступное пространство страницы или её элемента. Поверх него накладывается повторяющаяся фоновая картинка. Визуально это можно изобразить следующим образом:

Фон HTML-документа и его элементов

Второе, что Вам нужно знать – это различие между телом документа и элементом документа. Тело документа обозначается в HTML-коде веб-страницы тегом BODY, который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

Элементы страницы находятся внутри тега BODY. Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.

Атрибут bgcolor для создания фонового цвета

Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:

<body bgcolor=»#ec008c»>
  <!— тело документа —>
</body>

В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:

<table bgcolor=»#ec008c»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD.

Как узнать код цвета?

Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.

Также Вы можете использовать многочисленные онлайн сервисы, например:

Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

Атрибут background для создания фоновой картинки

Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

<body background=»/2014/06/bg.jpg»>
  <!— тело документа —>
</body>

В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:

Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.

А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:

<table background=»/2014/06/bg.jpg»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.

Абсолютный и относительный путь к фоновой картинке

Отдельно стоит уделить внимание адресу фоновой картинки. В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес, например:

<body background=»/images/bg.jpg»>
  <!— тело документа —>
</body>

В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать тут.

Подведём итоги

Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE. Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/03TsNz

Применение цвета к HTML элементам с помощью CSS — HTML

Использование цвета — одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет — одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью CSS, существует множество способов присвоить цвет HTML элементам, чтобы придать им желаемый вид. Эта статья даёт базовые представления о всех способах применения цвета к HTML элементам с помощью CSS.

К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.

Мы затронем большинство из того, что нужно знать при использовании цвета, включая список элементов, которые могут иметь цвет, и необходимые для этого CSS свойства, как задать цвет, и как  использовать его в таблицах стилей и в JS скриптах. Мы также рассмотрим как предоставить возможность пользователю выбрать цвет. 

Завершим мы статью размышлениями на тему как использовать цвет с умом: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.

На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. 

На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

Эти свойства используются для определения цвета текста, его фона и любого оформления текста.

color (en-US)
Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
background-color
Цвет фона текста.
text-shadow

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.

text-decoration-color (en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

text-emphasis-color (en-US)

Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.

caret-color (en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> (en-US) или элементам , для которых установлен атрибут contenteditable.

Блоки

Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.

borders
См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color
Цвет фона блока.
column-rule-color
Цвет линий, которые разделяют колонки текста.
outline-color (en-US)
Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid),  штриховая (dashed) и так далее.

border-color (en-US)
Задаёт единый цвет для всех сторон границы элемента.
border-left-color (en-US), border-right-color (en-US), border-top-color (en-US), and border-bottom-color (en-US)
Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color (en-US) and border-block-end-color (en-US)
С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color (en-US) and border-inline-end-color (en-US)
Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API
Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.

WebGL
Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb"
Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb.
"#rrggbbaa"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb.
"#rgba"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue
Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha
Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому  светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством <angle>, а именно —  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
  2. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
  3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.

Вот несколько примеров цвета в HSL записи:

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

 

Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

Давайте начнём наш пример с результата, который нам нужно достичь:

 

HTML

HTML, который создаёт вышеупомянутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

 

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс .box, который определит эти общие свойства:

 

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

 

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

 

Класс .boxLeft, который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:

  • background-color определяет цвет фона блока значением rgb(245, 130, 130).
  • outline (en-US), в отличие от привычного нам свойства border,  не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
  • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

 

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

 

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

  • background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
  • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
  • Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
  • С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
  • И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>
CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}
JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)
An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia
Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

Как делается фоновый цвет

Здравствуйте уважаемые начинающие веб-мастера. Этой статьёй начинаем очень интересную тему — Фоновый цвет и фоновые изображения.

Всё что касается фона, в веб-дизайне определяется свойством background

Главное отличие фонового цвета и фоновых изображений это то, что они занимают всё отведённое для них пространство, будь то поле экрана или какой либо блок.

Итак — фоновый цвет экрана


body{
  background: #ebc2af;
}

Фоновый цвет отдельного блока. Это может быть любой блочный html элемент. Мы-же начнём работать с блоками div


div{
  background: #afe6eb;
  border: 2px solid #ffff00;
  width: 400px;
  height:150px;
  margin: auto;
}

Объединим эти два селектора в html файле

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
body{
  background: #ebc2af;
}
div{
  background: #afe6eb;
  border: 2px solid #ffff00;
  width: 400px;
  height: 150px;
  margin: auto;
}
</style>
</head>
<body>
  <div></div>

</body>
</html>

Получилась вот такая картина

Точно так же можно сделать фон любому абзацу, слову или словосочетанию. Например так:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.fon{
background:#ffe5b4;
padding:5px;
}
</style>
</head>
<body>
<p>Хороший артист - это хороший человек, или наоборот-
конченный мерзавец, или уж как обычно - всяко бывает?</p>
<p>Журналисты - акулы , а питаются только тем, что другие настряпают.
Наверное все таки - <span>
шакалы</span>, ну кто покруче - гиены.</p>
</body>
</html>

Результат:

Можно ещё загнуть и скруглить уголки у блока с абзацем, но об этом в статье Как сделать тень

А в следующей статье мы научимся делать фоновый цвет, плавно переходящий от тёмных тонов к более светлым, и от одного цвета к другому.


Перемена

Ученик — учителю:
— Следует ли наказывать кого-нибудь за то, чего он не делал?
— Нет, разумеется ни в коем случае нельзя!
— Хорошо. Я не сделал домашнее задание…

Как самому сделать и установить красивые маркеры для списка < < < В раздел > > > Фоновые изображения в css
 

HTML Email Цвет Фона — CodeRoad

Я создал почту HTML и отредактировал css. Теперь все хорошо. Но, я хочу дать фоновый цвет моему окну.

Мой код:

<body bgcolor="#f2f2f2" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Но не работайте. Когда я стол, моя структура рушится.

<table bgcolor="#f2f2f2">
--
My Email Structure
**
</table>

Как я могу это исправить?

Протестированные браузеры:

Firefox,
Safari,
хром.

Тестирование клиента:

Gmail

html

css

background

html-email

Поделиться

Источник


Slaythern Aareonna    

11 января 2013 в 10:44

2 ответа

  • Чередующийся цвет фона в HTML UL

    Я хотел бы чередовать цвет фона в неупорядоченном списке HTML без использования JQuery.

  • Настройка SSRS HTML цвет фона

    Я использую SSRS 2012. У нас есть заполнитель, содержащий выражение, которое динамически захватывает столбец в нашей базе данных, хранящий html. SSRS, к сожалению, не поддерживает цвет фона стиля CSS, который мы используем для отображения выделенного текста. Например, учитывая HTML ниже <span…


1

<table>

</table>

Атрибут bgcolor устарел в HTML 4.01.

Устаревший элемент или атрибут — это устаревший элемент или атрибут.

Устаревшие элементы могут устареть в будущем, но браузеры должны продолжать поддерживать устаревшие элементы для обратной совместимости.

Поделиться


Blazer    

11 января 2013 в 10:49


-2

Попробуйте css

 body {background-color:#f2f2f2;}

цвет фона должен работать.
Ссылка здесь

Поделиться


10minute    

11 января 2013 в 10:48

Похожие вопросы:

html table пропустите их цвет границы и цвет фона после печати

<input type= button value=Print onclick=return PrintReport() class=lbutton/> <iframe frameborder=0 height=768px width=95% id=loader src= name=loader/> function PrintReport() {…

HTML цвет фона

1.I я пытаюсь написать код html, для которого текст написан красным цветом, а цвет фона-желтым,я использую следующее: текст идет красным, но фон не желтый, что я упускаю? 2.basically я пытаюсь…

gmail html email цвет фона

Есть ли какой-нибудь способ поместить цвет в качестве фона в HTML email для gmail? Я использовал это для того, чтобы сделать фон тела серым, но это не работает <body leftmargin=0 topmargin=0…

Чередующийся цвет фона в HTML UL

Я хотел бы чередовать цвет фона в неупорядоченном списке HTML без использования JQuery.

Настройка SSRS HTML цвет фона

Я использую SSRS 2012. У нас есть заполнитель, содержащий выражение, которое динамически захватывает столбец в нашей базе данных, хранящий html. SSRS, к сожалению, не поддерживает цвет фона стиля…

Outlook email — Html table цвет фона ячейки не работает? :-/

Какой сценарий html я должен использовать, чтобы цвет фона ячейки таблицы работал в MS-Outlook 2007 и 2010?? <table> <tr> <td style=background-color:#ffff00>Background…

цвет фона текста в RTF

По некоторым причинам мне нужно экспортировать данные RTF (без изображений, только текст) из приложения iOS, чтобы иметь возможность читать их в Word или любом текстовом процессоре. На данный момент…

Email проблема цвета фона

Я создаю информационный бюллетень и устанавливаю цвет фона с помощью шестнадцатеричного кода #25292C;, когда я отправляю информационный бюллетень, сообщение появляется нормально. Когда я пересылаю…

outlook 2010 email цвет фона html/css свойство не работает

Я попробовал приведенный ниже код для цвета фона заголовка в шаблоне email. Код отлично работает для других клиентов email, но в outlook 2010 он вообще не будет показывать цвет фона. Я пробовал…

Цвет фона html body effects цвет фона кнопки

у меня есть небольшое приложение html, которое изменяет только цвет фона тела html на случайно сгенерированный шестнадцатеричный цвет. Проблема у меня есть в том, что когда я нажимаю на кнопку,…

CSS-фонов

Свойства фона CSS используются для добавления фоновых эффектов.
для элементов.

В этих главах вы узнаете о следующих свойствах фона CSS:

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • фоновая позиция
  • фон (сокращенное свойство)

CSS цвет фона

Свойство background-color определяет цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

корпус {
фоновый цвет: светло-голубой;
}

Попробуй сам »

В CSS цвет чаще всего задается следующим образом:

  • допустимое название цвета — например, «красный»
  • шестнадцатеричное значение — например, «# ff0000»
  • значение RGB — например, «rgb (255,0,0)»

Посмотрите на значения цветов CSS, чтобы получить полную
список возможных значений цвета.

Прочие элементы

Вы можете установить цвет фона для любых HTML-элементов:

Пример

Здесь элементы

,

и

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
цвет фона: светло-голубой;
}

p {
цвет фона:
желтый;
}

Попробуй сам »

Непрозрачность / прозрачность

Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы
наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.

Прозрачность с использованием RGBA

Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере устанавливается непрозрачность цвета фона, а не текста:

Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB,
вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В
альфа Параметр — это число от 0,0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}

Попробуй сам »

background-color — CSS: каскадные таблицы стилей

Свойство CSS background-color устанавливает цвет фона элемента.

 
цвет фона: красный;
цвет фона: индиго;


цвет фона: # bbff00;
цвет фона: # bf0;
цвет фона: # 11ffee00;
цвет фона: # 1fe0;
цвет фона: # 11ffeeff;
цвет фона: # 1fef;


цвет фона: rgb (255, 255, 128);
цвет фона: rgba (117, 190, 218, 0.5);


цвет фона: hsl (50, 33%, 25%);
цвет фона: hsla (50, 33%, 25%, 0,75);


цвет фона: текущий цвет;
цвет фона: прозрачный;


цвет фона: наследовать;
цвет фона: начальный;
цвет фона: вернуться;
цвет фона: не задано;

Свойство background-color указано как одно значение > .

Значения

<цвет>
Равномерный цвет фона.Он визуализируется за любым заданным фоновым изображением , хотя цвет по-прежнему будет виден через любую прозрачность изображения.

Важно убедиться, что коэффициент контрастности между цветом фона и цветом текста, размещенного над ним, достаточно высок, чтобы люди с ослабленным зрением могли прочитать содержимое страницы.

Коэффициент контрастности цвета определяется путем сравнения яркости текста и значений цвета фона.Чтобы соответствовать текущим правилам доступности веб-содержимого (WCAG), требуется соотношение 4,5: 1 для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.

 <цвет> 
, где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |

HTML 

  

  Lorem ipsum dolor sit amet, consctetuer





  Lorem ipsum dolor sit amet, consctetuer





  Lorem ipsum dolor sit amet, consctetuer

CSS 

 .exampleone {цвет фона: прозрачный; }

.exampletwo {
  цвет фона: rgb (153,102,153);
  цвет: rgb (255,255,204);
}

.examplethree {
  цвет фона: # 777799;
  цвет: #FFFFFF;
}

Результат

Таблицы BCD загружаются только в браузере

Установить или изменить цвет фона HTML

Сегодня на веб-сайте отображается не только текст. Все мы знаем, что мы можем добавлять или изменять некоторые элементы в HTML. Мы можем добавить изображение, видео, аудио или изменить цвет и стиль.Теперь в этом руководстве мы узнаем о том, как установить или изменить цвет фона HTML с помощью шестнадцатеричных цветовых кодов, имен цветов HTML и значений RGB.

Определение и использование.

Свойство HTML background-color задается для изменения или установки цвета фона элемента. Фон — это общий размер элемента, включая отступы и границу, но не поля.

Установить свойство background-color в элементе HTML

Первый начинается с цвета фона элемента.Когда вы вставите его в элемент, у вас будет полный цвет страницы. Раскрасить тело веб-страницы довольно просто. Просто следуйте этому коду, чтобы установить цвет фона HTML в элементе.

Пример 1: 

  
        
        
             Документ

Вот как HTML-код выше будет отображаться в браузере:

Можно ли установить цвет фона HTML в элементе? Да мы можем.Например, мы изменим цвет фона элемента

.

Пример 2: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац 

                


                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац 

                


                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац

Вот как HTML-код выше будет отображаться в браузере:

Задайте цвет фона с помощью шестнадцатеричного цветового кода

Шестнадцатеричный цветовой код со свойством background-color — самый популярный способ установить цвет фона HTML.Цвет Hex имеет хэштег ‘#’ и цветовой код RRGGBB (#RRGGBB). Это пример применения шестнадцатеричного цветового кода непосредственно к элементу HTML.

Пример 3: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 

                    
 Цвет шестигранника # FF0000 

                


                

                    
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 

                    
 Цвет шестигранника # 00FF00 

                


                

                    
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 

                    
 Цвет шестнадцатеричного кода # 0000FF

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с помощью имени цвета HTML

Второй способ установить цвет фона в HTML — использовать имя цвета HTML.Название цвета — это самый простой способ изменить цвет в HTML-документе. Просто введите название цвета, например Red, Green или Blue, со свойством background-color.

Пример 4: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Красный 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета: зеленый 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета: синий 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Голубой 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Пурпурный 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Желтый

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета RGB

Теперь мы установим свойство HTML background-color, используя значения RGB.Используйте тот же атрибут стиля, что и раньше, но замените шестнадцатеричный цвет или имя цвета на значения RGB.

Пример 5: 

  
            
            
                 Документ 
            
                

                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (255,0,0) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (0,255,0) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (0,0,255)

Вот как HTML-код выше будет отображаться в браузере:

При использовании значений RGB у вас есть дополнительная опция для установки, указывающая уровень непрозрачности с альфа-каналом.Это будет контролировать уровень прозрачности фона. Альфа объявляется с буквой «а». Если используется альфа, код формата — «rgba». Значение альфа — 0 и 1, 0 для полной прозрачности и 1 для непрозрачности. Это пример использования значений «rgba».

Пример 6: 

  
            
            
                 Документ 
            
                

                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (255,0,0,0.5) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (0,255,0,0.5) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (0,0,255,0.5)

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета HSL

Цветовые значения HSL менее популярны, чем раньше.HSL — это оттенок, насыщенность и яркость. Просто следуйте тому же синтаксису, что и значения RGB, чтобы использовать их для установки цвета фона HTML.

Пример 7: 

  
        
        
             Документ

Вот как HTML-код выше будет отображаться в браузере:

Как и в случае с RGB, вы также можете добавить альфа-канал, чтобы установить уровень непрозрачности для значений HSL.

Пример 8: 

  
        
        
             Документ 
        
        

            

                
 Раскрашивание фона элемента div с помощью HSL с альфа-каналом 

                
 hsla (0,100%, 50%, 0,5)

Вот как HTML-код выше будет отображаться в браузере:

Есть несколько способов установить или изменить цвет фона HTML.Это так легко и просто, запомните это, если вы хотите установить цвет, используйте атрибут «style» и свойство CSS background-color. Синтаксис такой:

  <тег>

Если вы хотите узнать больше о цветовом коде, вы можете увидеть в предыдущем руководстве о цветовых кодах HTML. Вы можете найти полный исходный код этих примеров на нашем GitHub.

Это только основное. Если вам нужно больше узнать о HTML, CSS, Javascript или других подобных областях, вы можете пройти следующий дешевый курс:

Спасибо!

Цвет фона HTML: как настроить фон

Обычная веб-страница имеет белый фон.То же самое с таблицей и текстами. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те времена, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS. В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS.В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.

Темы в статье

Цвет фона тела с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д. Атрибут, используемый для изменения цвета фона — background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 


 Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.

Цвет фона корпуса с использованием шестнадцатеричных кодов цветов

Мир полон красок. Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть свое название, например красный, желтый, черный и т. Д.Но у каждого цвета столько оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, кирпичный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы.Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 


 Это демонстрационная веб-страница

Обратите внимание на приведенный выше код. Все аналогично предыдущему методу, но с небольшими изменениями.Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF — шестнадцатеричный код пурпурного цвета.

Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным кодом цвета.

Изменение цвета фона HTML тега div

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице. Цвет фона таких разделов или разделов также можно изменить с помощью CSS.Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 




 Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

В приведенном выше коде цвет фона веб-страницы желтый, а у части div красный фон. В теге div встроенный стиль используется для установки красного цвета фона.# FFF00 и # FF0000 — это шестнадцатеричные коды цветов желтого и красного соответственно.

Изменение цвета фона таблицы

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color. Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 Имя 
 Страна 
 Возраст 


 Джон 
 США 
 21 



 Сэм 
 Испания 
 22

В приведенном выше коде встроенный стиль используется в теге таблицы.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.

Изменение цвета фона текста

На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть необходимость в тексте с определенным цветом фона, встроенные стили также можно использовать в теге span.Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.

 


  у этого текста нет цвета фона  


  этот текст имеет красный цвет фона  


  этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой части веб-страницы с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

Цвет фона электронного письма HTML: лучший способ их закодировать

Кодирование цветов фона звучит как простая задача, не так ли? Правда? Даже этот незначительный элемент стиля имеет некоторые подводные камни, и необходимо учесть несколько соображений, чтобы добиться согласованного рендеринга в почтовых клиентах.

И не только разработчикам нужно успокаивать богов почтовых ящиков. По мере того, как темный режим набирает обороты, появляется еще больше сред, о которых нужно знать, некоторые из которых потребуют от дизайнеров электронной почты особой осторожности при применении цветов фона в своих проектах.

Из этого сообщения в блоге вы узнаете:

Зачем использовать фоновые цвета в электронном письме?

Внедрение стратегии цвета фона отвечает нескольким потребностям, когда дело доходит до совершенствования вашей почтовой программы. С технической точки зрения использование цветов фона не увеличивает время загрузки ваших писем, и они по-прежнему видны, даже когда изображения отключены.Они могут помочь отделить контент, вызвать обмен сообщениями или отделить электронную почту от других в почтовом ящике вашего подписчика, потенциально увеличивая вовлеченность вашей аудитории.

Выделиться во входящих

Вы можете создать эффектное открытие, как это письмо от Blurb.

Зона героя сильна. Яркий оранжевый фон производит впечатление, контрастируя с синим цветом логотипа, подчеркивая идентичность бренда. Как только читатель прокручивает область героя, вторичный контент оказывается на белом фоне, предлагая идеальный опыт чтения для больших объемов текста.

Источник: Really Good Emails

Отдельные разделы

Если у вас длинное электронное письмо, цвет — отличный способ визуально разделить различные блоки контента, чтобы оно было более удобным для восприятия.

Рекламные письма от гиганта кофейни Starbucks могут быть довольно длинными, поскольку в одном письме содержится несколько рекламных сообщений. Чтобы разделы выделялись друг от друга, используются разные цвета фона.

Просмотреть это письмо в Litmus

Повышение идентичности бренда

Градиенты являются частью фирменного стиля Marketing Agency 1973 Ltd, поэтому вы часто найдете жирные линейные градиенты на фоне их электронных писем.Фоновые градиенты могут сделать композиции более динамичными и даже побудить подписчика к прокрутке.

Источник: Really Good Emails

Итак, как лучше всего применить эти методы при разработке электронной почты? Я попросил своего товарища по команде и разработчика электронных писем Litmus, Карин Слейтер, рассказать нам о кодировании сплошных и градиентных фонов.

Как закодировать сплошной цвет фона электронного письма HTML

Цвета фона можно кодировать разными способами и в разных местах.Но каждый метод не поддерживается в одинаковой степени почтовыми клиентами. Вот краткая диаграмма, показывающая, какой код стиля фона и метод цветового кода работают для основных почтовых клиентов.

Поддержка почтового клиента для цветов фона

Код стиля CSS-свойства
«background» и «background-color»		 HTML-атрибут «bgcolor»
Цветовой код 6-значное шестнадцатеричное 3-значное шестнадцатеричное RGB RGBA 6-значное шестнадцатеричное 3-значное шестнадцатеричное RGB RGBA
Apple Mail 14 ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook 2016 (macOS 10.12,6) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook 13, 16, 19 (Windows 10) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Outlook Office 365 (Windows 10) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Outlook Office 365 (Mac OS 10.15) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Почта Windows 10 ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Приложение Gmail (Android 10) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Приложение Gmail (iOS 13.4.1) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook (Android 7.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook (iOS 12.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Samsung Mail (Android 7.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
iPad 11 Air (iOS 14.2 поколения 4) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
iPhone 12 (iOS 14.2) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
AOL Mail (Edge) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Comcast (край) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Gmail (Chrome) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Office 365 ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook.com ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Web.de ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Yahoo! Почта ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет

Все мы знаем, что почтовые клиенты могут быть немного привередливыми.Итак, как лучше всего закодировать цвета фона, чтобы он работал во всех почтовых клиентах? Я объясню вам наши рекомендации и объясню, почему.

1. Используйте таблицы и ячейки таблицы

В HTML-коде есть четыре места, в которые можно добавить цвет фона:

  • <таблица>

Самое безопасное место для добавления цвета фона — это таблица или ячейка таблицы.

Тег удален в Yahoo и AOL, поэтому любой примененный к нему цвет фона не будет отображаться в этих почтовых клиентах.А размещение цвета на обертке

после тела будет работать везде, кроме клиентов Outlook, поскольку они не поддерживают теги

в электронных письмах.

Чтобы получить самую широкую поддержку почтового клиента, оберните всю электронную почту в тег

100% ширины и поместите туда свой цвет фона. И используйте ячейки таблицы

для разделов электронной почты, чтобы у вас была большая гибкость в раскрашивании определенных блоков содержимого.

2. Добавьте цвет с помощью свойства CSS и цветовых кодов HEX или значений RGB.

Цвета фона можно закодировать несколькими способами:

  • Использование HTML-атрибута bgcolor
  • Использование свойства CSS background-color
  • Использование сокращенного CSS свойства background
  • Использование шестизначного шестнадцатеричного кода цвета
  • Использование трехзначного шестнадцатеричного цветового кода
  • Использование значений цвета RGB

Что касается того, как поставить цвет фона на таблицу или ячейку таблицы, вы должны использовать свойство CSS.

При тестировании двух методов свойств CSS — background-color и background — мы обнаружили, что оба они дают одинаковые согласованные результаты, пока вы только добавляете цвет (без изображений). Согласно caniemail.com, использование свойства background для чего-либо, кроме добавления цвета, может привести к тому, что ваш цвет не будет отображаться.

HTML-атрибут bgcolor не очень хорошо работал в Outlook из-за непоследовательной поддержки трехзначных HEX-кодов. А использование значений RGB и RGBA привело к неправильному цвету или полностью пропаданию цвета.

Вот наш тест цвета фона с использованием различных методов в Outlook, чтобы вы могли убедиться сами:

См. Этот тест в Litmus →

. В других почтовых клиентах трехзначный HEX-код отображался хорошо, но значения RGB и RGBA приводили к неправильным цветам при применении к атрибуту bgcolor HTML.

См. Этот тест в Litmus →

После всего нашего тестирования мы пришли к одному выводу: придерживайтесь свойств CSS и используйте 3- или 6-значные HEX-коды или значения RGB. Они работали во всех почтовых клиентах.

Введение непрозрачности с альфа-каналом для значения RGBA не поддерживалось в Outlook, Web.de или GMX.de, но в остальном имело достойную поддержку.

Итак, ваш окончательный код должен выглядеть примерно так, чтобы раскрасить весь фон таблицы:

цветов | HTML Dog

Следующие значения, чтобы указать полный как красный-как-красный-может-быть, все дают один и тот же результат:

  • красный
  • RGB (255,0,0)
  • RGB (100%, 0%, 0%)
  • # ff0000
  • # f00

Стандартные названия цветов включают аква , черный , синий , фуксия , серый , зеленый , салатовый , бордовый , темно-синий , оливковый , фиолетовый , красный , серебристый , бирюзовый , белый и желтый . прозрачный также является допустимым значением.

За возможным исключением черный и белый , названия цветов имеют ограниченное использование на современных, хорошо спроектированных веб-сайтах, потому что они настолько специфичны и ограничивают.

Три значения в значении RGB: от 0 до 255, 0 — самый низкий уровень (например, без красного), 255 — самый высокий уровень (например, полный красный). Эти значения также могут быть в процентах.

Шестнадцатеричная система (ранее и более точно известная как « шестнадцатеричная ») — это система счисления по основанию 16 и .Обычно мы используем десятичную систему счисления и ( с основанием 10, , от 0 до 9), но шестнадцатеричная система имеет 16 цифр, от 0 до f.

Шестнадцатеричное число предваряется символом решетки ( # ) и может состоять из трех или шести цифр. По сути, трехзначная версия является сжатой версией шестизначной ( # ff0000 становится # f00 , # cc9966 становится # c96 и т. Д.). Трехзначную версию легче расшифровать (первая цифра, как и первое значение в RGB, красная, вторая зеленая и третья синяя), но шестизначная версия дает вам больше контроля над точным цветом.

CSS3, последняя версия CSS, также позволяет определять цвета HSL — оттенок, насыщенность и яркость. Подробнее об этом, а также о полупрозрачных цветах можно найти в Расширенном руководстве по CSS.

Новый раздел примеров!
Посмотрите на весь этот код в действии и поиграйте с ним.

цвет и цвет фона

Цвета могут быть применены с использованием цвета и цвета фона (обратите внимание, что это должен быть «цвет» американского английского языка, а не «цвет»).

Синий фон и желтый текст могут выглядеть так:

 
h2 {
  цвет: желтый; 
  цвет фона: синий; 
}

Эти цвета могут быть слишком резкими, поэтому вы можете изменить код своего файла CSS для немного других оттенков:

 
тело {
    размер шрифта: 14 пикселей;
    цвет: темно-синий;
}

h2 {
  цвет: #ffc; 
  цвет фона: # 009; 
}

Сохраните файл CSS и обновите страницу в браузере.Вы увидите, что цвета первого заголовка (элемент h2 ) изменились на желтый и синий.

Вы можете применить свойства color и background-color к большинству HTML-элементов, включая body , который изменит цвета страницы и всего на ней.

Как изменить цвет фона в HTML

В HTML мы можем изменить цвет фона веб-страницы следующими способами:

  1. Использование атрибута bgcolor
  2. Использование встроенного атрибута стиля
  3. Использование внутреннего CSS

1.Использование атрибута bgcolor

Примечание. HTML 5 не поддерживает атрибут bgcolor тега

, поэтому мы должны использовать встроенный атрибут стиля и внутренние параметры CSS для изменения цвета веб-страницы.

Если мы хотим изменить цвет фона веб-страницы с помощью атрибута bgcolor , мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко изменить цвет фона:

Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать атрибут bgcolor для изменения цвета фона этого HTML страница.



<Голова>
<Название>
Измените цвет фона с помощью атрибута Bgcolor


<Тело>
JavaTpoint
Учебное пособие по HTML
В HTML мы можем изменить цвет фона веб-страницы следующими способами:
1. Использование атрибута bgcolor
2. Использование встроенного атрибута стиля
3.Использование внутреннего CSS

Шаг 2: Теперь переместите курсор в пределах начального тега в нашем HTML-документе. Затем введите атрибут bgcolor , как показано в следующем блоке:

Шаг 3: Теперь нам нужно задать цвет, который мы хотим использовать на фоне веб-страницы. Итак, введите имя цвета в атрибуте bgcolor , как описано в следующем блоке.



<Голова>
<Название>
Измените цвет фона с помощью атрибута Bgcolor



JavaTpoint
Учебное пособие по HTML
В HTML мы можем изменить цвет фона веб-страницы следующими способами:
1. Использование атрибута bgcolor
2. Использование встроенного атрибута стиля
3.Использование внутреннего CSS

Проверить это сейчас

Шаг 4: И, наконец, нам нужно сохранить код Html в текстовом редакторе и запустить код. После выполнения мы увидим фон веб-страницы того же цвета, который указан в документе. На следующем снимке экрана показан вывод вышеуказанного Html-кода:

.

2. Использование атрибута встроенного стиля

Если мы хотим изменить цвет фона веб-страницы с помощью встроенного атрибута стиля, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко изменить цвет фона.

Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать атрибут стиля Inline для изменения цвета фона этого HTML-страница.



<Голова>
<Название>
Измените цвет фона с помощью атрибута Inline style


<Тело>
Эта страница поможет вам понять, как изменить цвет фона веб-страницы.

И этот раздел поможет вам понять, как изменить цвет фона страницы Html с помощью атрибута style.

Шаг 2: Теперь переместите курсор в пределах начального тега в нашем HTML-документе. Затем введите атрибут стиля , как показано в следующем блоке:

Шаг 3: Теперь нам нужно задать цвет, который мы хотим использовать на фоне веб-страницы.Итак, введите имя цвета в свойстве background-color атрибута стиля , как описано в следующем блоке.



<Голова>
<Название>
Измените цвет фона с помощью атрибута Inline style


<Тело>
Эта страница поможет вам понять, как изменить цвет фона веб-страницы.

И этот раздел поможет вам понять, как изменить цвет фона страницы Html с помощью атрибута style.

Проверить это сейчас

Шаг 4: И, наконец, нам нужно сохранить код Html в текстовом редакторе и запустить код. После выполнения мы увидим фон веб-страницы того же цвета, который указан в документе. На следующем снимке экрана показан результат приведенного выше Html-кода:

.

3. Использование внутреннего CSS

Если мы хотим изменить цвет фона веб-страницы с помощью внутренней каскадной таблицы стилей, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко изменить цвет фона.

Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для изменения цвета фона этого HTML страница.



<Голова>
<Название>
Измените цвет фона с помощью внутренней каскадной таблицы стилей


<Тело>
Эта страница поможет вам понять, как изменить цвет фона веб-страницы.

И этот раздел поможет вам понять, как изменить цвет фона страницы Html с помощью внутренней каскадной таблицы стилей.

Шаг 2: Теперь мы должны поместить курсор в тег заголовка документа Html, а затем определить стили внутри тега


<Тело>
Эта страница поможет вам понять, как изменить цвет фона веб-страницы.

И этот раздел поможет вам понять, как изменить цвет фона страницы Html с помощью внутренней каскадной таблицы стилей.

Проверить это сейчас

Шаг 4: И, наконец, нам нужно сохранить код Html в текстовом редакторе и запустить код. После выполнения мы увидим фон веб-страницы того же цвета, который указан в документе. На следующем снимке экрана показан вывод вышеуказанного Html-кода:

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *