Вы здесь: Главная > CSS > Цвет

Цвет

Опубликовано автором Просмотры: 13

CSS предоставляет в ваше распоряжение 16 777 216 цветов. Они могут принимать форму имени, значения RGB (красный / зелёный / синий) или шестнадцатеричного кода.

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

red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00

Предопределённые названия цветов включают aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. transparent также является допустимым значением.

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

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

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

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

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

Color и background-color

Цвета могут быть применены с помощью color (цвет объекта) и background-color (цвет фона).

Синий фон и жёлтый текст могли бы выглядеть следующим образом:

h1 {
    color: yellow;
    background-color: blue;
}

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

body {
    font-size: 14px;
    color: navy;
}
h1 {
    color: #ffc;
    background-color: #009;
}

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

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

Страницы в тему:

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

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