ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Цвета


Red

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Aqua

Teal

Green

Light Green

Lime

Sand

Khaki

Yellow

Amber

Orange

Deep Orange

Blue Gray

Brown

Light Gray

Gray

Dark Gray

Pale Red

Pale Yellow

Pale Green

Pale-Blue

Цветовая схема по умолчанию, используемая в W3.CSS, вдохновлена Material Design Colors (цвета, используемые в маркетинге, дорожные знаки и заметки).


Раскраска HTML-элементов

Классы w3-color и w3-text-color можно использовать для окрашивания любого элемента HTML:

Контейнеры:

Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Кнопки:

Текст:

Red Purple Blue Green Orange

Границы:

Red

Green

Blue

Yellow

Gray

Black

Таблицы:

Имя Размер головы
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Открытки:

Автомобиль - это самоходное транспортное средство на колесах, используемое для перевозки. В большинстве определений этого термина указывается, что автомобили предназначены для движения в основном по дорогам, для размещения от одного до восьми человек, обычно для четырех колес. (Википедия)


Цвета фона

Классы w3-color устанавливают цвет фона для любого элемента HTML:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.


London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.


London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Пример

<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>
Попробуйте сами »

Цвета gray и grey являются взаимозаменяемыми во всех классах W3.CSS.


Цвета текста

Классы w3-text-color устанавливают цвет текста любого элемента HTML:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Пример

<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:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Пример

<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:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Пример

<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 цвета:

Red
Green
Blue
Yellow
Steel
Teal
Cobalt
Sienna

Fashion цвета:

Flame
Greenery
Marina
Primrose
Yellow
Neutral Gray
Shaded
Spruce
Navy
Peony
Tawny
Port

Highway цвета:

Red
Green
Blue
Yellow

Вы узнаете намного больше о цветах в последующих главах этого урока.