Среда, 20 Марта 2013 13:43

Цвет текста в CSS

Written by 
Оцени эту запись
(1 Голос)

В данной статье мы будем рассматривать CSS свойство color со всех сторон. При помощи свойства color мы можем задавать цвет текста на HTML странице.

 

 

Пример:

 

body {

color: #121212;

}

 

Значением свойства color могут быть:

 

  • название цвета - black, red, violet
  • значение цвета в RGB - rgb(255, 0, 0) отвечает красному цвету
  • значение цвета в HEX - #ff0000 или #f00 отвечают красному цвету

 

 

 

body {

color: #121212;

}

a {

color: blue;

}

h1 {

color: rgb(255, 0, 255);

}

 

Чтобы узнать точное значение RGB или HEX цвета в графических редакторах, кликните на него пипеткой или посмотрите в свойствах текста.

 

При задании цвета в RGB, вы должны указать три значения в виде чисел от 0 до 255:

 

color: rgb(255, 0, 0);

 

Первое значение отвечает за красный цвет, второй - за зеленый, а третий - за синий. Это следует из названия - RedGreenBlue.

 

Значение HEX задается шестизначным числом в шестнадцатеричной системе счисления, где первые две цифры отвечают красному цвета, вторые - зеленому и последние - синему. То есть, на каждый цвет приходится число от 0 до ff. Поясню этот момент! В шестнадцатеричной системе цифры не от 0 до 10(как в десятеричной), а 0 до f: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Соответственно, 0 красного цвета в RGB - это 00 в HEX, 255 в RGB - это FF в HEX.

 

Если цифры в значении цвета HEX совпадают попарно, то их можно сокращать:

 

#ff0022 -- #f02

 

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

 

Приведу основные цвета:

 

Название Цвета RGB HEX Вид
Белый rgb(255, 255, 255) #ffffff  
Черный rgb(0, 0, 0) #000000  
Красный rgb(255, 0, 0) #ff0000  
Синий rgb(0, 0, 255) #0000ff  
Зеленый rgb(0, 255, 0) #00ff00  
Маджента rgb(255, 0, 255) #FF00FF  
Желтый rgb(255, 255, 0) #FFFF00  
Циан rgb(255, 165, 0) #00FFFF  
Оранжевый rgb(0, 255, 0) #FFA500  

 

 

Свойство color наследуется дочерними элементами. Данное свойство поддерживается всеми современными браузерами. Обычно по умолчанию браузеры ставят тексту черный цвет. У ссылок цвет отличается, его нужно задавать отдельно. Обычно ссылки синего цвета.

 

 

Примечание.

 

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

 

 

 

 

Additional Info

Комментарии  

 
0 #1 newJS 01.07.2017 03:06
Для выбора цвета есть немало программ, вот одна из них.
Подбор и Конвертация HTML цветов
http://newjs.my1.ru/load/podbor_i_konvertacija_html_cvetov/1-1-0-6
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов