Стандартные 140 цветов, применяемых в веб-дизайне. Таблица стилей 140 colors
При стилизации html-страниц часто необходимо использовать различные цвета. Согласно спецификации HTML5 вся стилизация страниц производится в каскадных таблицах стилей - CSS. Обычно на сайтах применяют подключение к html-страницам внешних файлов css, в которых и прописываются все нужные стили. При этом часто возникает необходимость в таблице стилей для каждого элемента прописывать определённый цвет (текста, фона, тени).
Для того, чтобы облегчить работу по стилизации html-страниц, я написал таблицу стилей для стандартных 140 веб-цветов, применяемых в веб-дизайне и распознаваемых всеми браузерами.
С помощью этой таблицы стилей 140 стандартных веб-цветов отпадает необходимость прописывать цвет для каждого html-элемента в каскадной таблице стилей. Достаточно просто подключить к html-странице таблицу стилей 140 стандартных веб-цветов 140colors.css и уже в html-коде применять для элементов необходимый цвет, просто указав его название в качестве класса.
Например, нам необходимо задать синий цвет фона для заголовка h2. Для этого достаточно указать для него class="blue":
Пример
<h2 class="blue">Заголовок на синем фоне</h2>
Результат:
Заголовок на синем фоне
Или задать цвет фона параграфа золотым - gold:
Пример
<p class="gold">Параграф из золотым фоном.</p>
Результат:
Параграф из золотым фоном.
Т.е. цвет фона в данном случае указывается в качестве класса. При этом по умолчанию текст на светлых фонах отображается чёрным цветом, а на тёмных фонах - белым цветом.
Также для большей контрастности и эффектности отображения белому тексту на тёмном фоне добавляется тень (как правило чёрного цвета). При этом вы можете открыть код самой таблице стилей 140 цветов и отредактировать, при необходимости поменяв и подкорректировав как цвет текста, так и цвет и толщину тени.
Обратите внимание, что классы для одного элемента можно указывать через пробел, т.е., указав класс с названием цвета, также можно указывать любой другой класс, применяемый к данному элементу.
Пример
<p class="gold padding-8 margin-12">Параграф из золотым фоном.</p>
Результат:
Параграф из золотым фоном.
Полный список всех 140 стандартных названий веб-цветов вы можете увидеть на странице 140 стандартных (безопасных) веб-цветов.
Скачать каскадную таблицу стилей из названиями (классами) 140 стандартных веб-цветов вы можете здесь: 140colors.css
