Цвета W3.CSS
Цветовая схема по умолчанию, используемая в W3.CSS, основана на цветах дизайна материалов (цвета, используемые в маркетинге, дорожных знаках и стикерах).
Раскрашивание HTML-элементов
Классы w3 - color и w3- text- color можно использовать для окрашивания любого элемента HTML:
Контейнеры:
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Кнопки:
Текст:
Границы:
красный
Зеленый
Синий
Желтый
серый
Чернить
Таблицы:
| Имя | Точки |
|---|---|
| Джилл Смит | 50 |
| Ева Джексон | 94 |
| Адам Джонсон | 67 |
Открытки:
Автомобиль – это колесное самоходное транспортное средство, используемое для передвижения. В большинстве определений этого термина указывается, что автомобили предназначены для движения в первую очередь по дорогам, вмещают от одного до восьми человек и обычно имеют четыре колеса. (Википедия)
Цвета фона
Классы w3- color устанавливают цвет фона для любого HTML-элемента:
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Цвета серый и серый взаимозаменяемы во всех классах W3.CSS.
Цвета текста
Классы w3- text- color устанавливают цвет текста любого HTML-элемента:
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Цвета при наведении
Классы w3- hover- color определяют цвет фона при наведении для любого элемента HTML:
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Классы w3-hover- text- color определяют цвет текста при наведении для любого элемента HTML:
Лондон
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Библиотеки цветов
В дополнение к стандартным цветам W3.CSS, W3.CSS также может использовать цвета из множества различных библиотек цветов:
Цвета окон:
Нажмите здесь, чтобы узнать больше о цветах Windows
Модные цвета:
желтая
ель
пион
Порт
Нажмите здесь, чтобы узнать больше о модных цветах
Цвета шоссе:
Нажмите здесь, чтобы узнать больше о библиотеках цветов
Вы узнаете намного больше о цветах в последующих главах этого урока.