Учебники

HTML — Цвета

Декабрь 15, 2018

Цвета очень важны, чтобы придать вашему сайту хороший внешний вид. Вы можете указать цвета на уровне страницы, используя тег <body>, или вы можете установить цвета для отдельных тегов, используя атрибут bgcolor .

Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:

  • bgcolor — устанавливает цвет фона страницы.

  • текст — устанавливает цвет для основного текста.

  • alink — устанавливает цвет для активных или выбранных ссылок.

  • ссылка — устанавливает цвет для связанного текста.

  • vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.

bgcolor — устанавливает цвет фона страницы.

текст — устанавливает цвет для основного текста.

alink — устанавливает цвет для активных или выбранных ссылок.

ссылка — устанавливает цвет для связанного текста.

vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.

Методы цветового кодирования HTML

Существует три способа настройки цвета на вашей веб-странице:

  • Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.

  • Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.

  • Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().

Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.

Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.

Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().

Теперь мы увидим эти раскраски одну за другой.

HTML Colors — Названия цветов

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

Примечание. Проверьте полный список имен цветов HTML.

Стандарт W3C 16 цветов

Вот список имен W3C Standard 16 Colours, и их рекомендуется использовать.

черный Серый Серебряный белый
желтый Лайм вода фуксия
красный зеленый синий Пурпурный
каштановый оливковый флот чирок

пример

Вот примеры для установки фона тега HTML по имени цвета —

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML-цвета — шестнадцатеричные коды

Шестнадцатеричное — это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две — значение зеленого цвета (GG), а последние — значение синего (BB).

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Paintshop Pro или MS Paint.

Каждому шестнадцатеричному коду будет предшествовать знак фунта или хеша #. Ниже приведен список нескольких цветов с использованием шестнадцатеричной записи.

цвет Цвет HEX
# 000000
# FF0000
# 00FF00
# 0000FF
# FFFF00
# 00FFFF
# FF00FF
# C0C0C0
#FFFFFF

пример

Вот примеры для установки фона тега HTML по цветному коду в шестнадцатеричном формате —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML-цвета — значения RGB

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

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

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

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

цвет Цвет RGB
RGB (0,0,0)
RGB (255,0,0)
RGB (0,255,0)
RGB (0,0,255)
RGB (255,255,0)
RGB (0255255)
RGB (255,0,255)
RGB (192192192)
RGB (255,255,255)

пример

Вот примеры для установки фона тега HTML с помощью цветового кода с использованием значений rgb () —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Браузер Безопасные Цвета

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

52
Share: