Стандартні 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
