Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Вам дано три цвета:
#DD0022,rgb(2%, 40%, 96%)иrgb(60, 60, 60). А так же вам дан HTML и CSS код. Менять цвета, которые даны, нельзя. Что нужно сделать, подумайте сами. Просто напомню, чтобы изменить цвет текста, нужно использовать свойствоcolor: цвет;.
Самый удобный, распространенный, универсальный способ указания цвета - RGB. RGB это аббревиатура (Red Green Blue), что означает: красный, зеленый, синий – основные цвета, путем комбинирования которых получаются все остальные цвета.
Цвет при помощи RGB можно устанавливать несколькими способами, далее подробно про каждый.
Функциональный формат записи цвета в CSS
Общий вид функционального формата: rgb(цвет), где «цвет», это комбинация из трех целых чисел (от 0 до 255) или трех процентных значений (от 0% до 100%), перечисленных через запятую. Далее несколько примеров.
rgb(255, 255, 255) /* белый цвет */
rgb(0, 0, 0) /* черный цвет */
rgb(255, 0, 0) /* красный цвет */Далее те же цвета, только при помощи процентных значений.
rgb(100%, 100%, 100%) /* белый цвет */
rgb(0%, 0%, 0%) /* черный цвет */
rgb(100%, 0%, 0%) /* красный цвет */После rgb и перед ( нет пробела!
Теперь давайте сделаем цвет текста заголовка каким-то рандомным цветом, например, rgb(222, 14, 100), это какой-то розовый или фиолетовый цвет. Далее пример применения.
h1 {
color: rgb(222, 14, 100);
}А теперь при помощи процентных значений и RGB создадим пару оттенков зеленого. Это пример 4.
p.one { color: rgb(0%, 20%, 0%); }
p.two { color: rgb(0%, 40%, 0%); }
p.three { color: rgb(0%, 60%, 0%); }
p.four { color: rgb(0%, 80%, 0%); }
p.five { color: rgb(0%, 100%, 0%); }<p class = "one">Зеленый</p>
<p class = "two">Зеленый</p>
<p class = "three">Зеленый</p>
<p class = "four">Зеленый</p>
<p class = "five">Зеленый</p>Кстати, процентные числа можно писать дробные, например, rgb(40.2%, 22.34%, 12%), так цвет будет более точный.
И что же произойдет, если мы выйдем за рамки диапазона значений? Ничего особенного не будет, просто значения будут интерпретированы к ближайшим границам (0% или 100%, 0 или 255). Далее пример пятый.
.selector {
rgb(200%, 3100%, 101%) /* будет rgb(100%, 100%, 100%) */
rgb(-200%, 0%, 12%) /* будет rgb(0%, 0%, 12%) */
rgb(257, -130, 212) /* будет rgb(255, 0, 212) */
}Допустим, у нас есть следующий CSS код: rgb(12%, 96%, 43%) и нам нужно перевести процентные значения в целые. Это делается очень просто, нужно умножить каждый уровень на 255, а потом разделить на 100, в итоге получим rgb(30.6, 244.8, 109.65), после мы округляем по правилам математики и получаем желанное: rgb(31, 245, 110).
Шестнадцатеричный формат записи цвета в CSS
Я чаще всего использую именно шестнадцатеричный формат, просто он короче. Далее пример.
p { color: #FFFFFF; } /* белый цвет текста */
p { color: #000000; } /* черный цвет текста */
p { color: #FF0000; } /* красный цвет текста */Отличий от RGB почти нет. Указывается три цвета RRGGBB в диапазоне от 00 до FF (FF это 255 в десятичной системе). Как видите, между числами и буквами нет пробелов и прочих знаков (вторая причина, почему мне этот формат больше нравится), и шестнадцатеричный код начинается с решетки (#). Кстати, шестнадцатеричный формат называют HEX форматом. Далее пример трех одинаковых цветов, которые написаны тремя способами.
p { color: rgb(33, 12, 255); }
p { color: rgb(13%, 5%, 100%); }
p { color: #210CFF; }Можно писать HEX формат еще и так:
p { color: #000; } /* то же самое #000000 */
p { color: #123; } /* то же самое #112233 */
p { color: #0FB; } /* то же самое #00FFBB */Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
