Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Поля CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация CSS3 Всплыв. подсказки CSS3 Стиль изображения CSS3 Отраж. изображения CSS3 Объект-подгонка CSS3 Объект-позиция CSS3 Маскировка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс

CSS Адаптивный

АВД-Введение АВД-Область просмотра АВД-Вид сетка АВД-Медиа запросы АВД-Изображения АВД-Видео АВД-Фреймворк АВД-Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры кода CSS Онлайн редактор CSS Фрагменты кода CSS Тест-викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

CSS Цвета



CSS поддерживает 140 + названия цветов, HSL шестнадцатеричные значения, значения RGB, значения RGBA, значения HSL, значения HSLA и непрозрачность.


RGBA Цвета

RGBA значения цвета являются расширением значений цвета RGB с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью rgba (красный, зеленый, синий, альфа). Параметр alpha является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

В следующем примере определяются различные цвета RGBA:

Пример
#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* красный с непрозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* синий с непрозрачностью */
Попробуйте сами »

HSL Цвета

HSL означает Оттенок, Насыщенность и Яркости.

Цвет значения HSL указано: 0.0hsl(оттенок, насыщенность, яркость).

  1. Оттенок - это градус на цветовом круге (от 0 до 360):
    • 0 (или 360) красный
    • 120 зеленый
    • 240 синий
  2. Насыщенность - это процентное значение: 100% - полный цвет.
  3. Яркость - также в процентах; 0% - темный (черный) и 100% - белый.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

В следующем примере определяются различные цвета HSL:

Пример
#p1 {background-color: hsl(120, 100%, 50%);}  /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);}  /* светло зеленый */
#p3 {background-color: hsl(120, 100%, 25%);}  /* темно зеленый */
#p4 {background-color: hsl(120, 60%, 70%);}   /* ярко зеленый */
Попробуйте сами »

HSLA Цвета

Значения цвета HSLA являются расширением значений цвета HSL с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью: hsla (оттенок, насыщенность, яркость, альфа), где параметр alpha определяет непрозрачность. Параметр alpha - это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

В следующем примере определяются различные цвета HSLA:

Пример
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зеленый с непрозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);};/* светло зеленый с непрозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темный зеленый с непрозрачностью */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}  /* ярко зеленый с непрозрачностью */
Попробуйте сами »

Непрозрачность

Свойство CSS opacity задает непрозрачность для всех элементов (как цвет фона и текста, будут матово/прозрачным).

Свойство значений opacity должно быть числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Обратите внимание, что текст выше также будет прозрачный / непрозрачный!

В следующем примере показаны различные элементы с прозрачностью:

Пример
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* красный с непрозрачностью */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* зеленый с непрозрачность */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* синий с непрозрачностью */
Попробуйте сами »

CSS3 Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Вставьте значение цвета RGBA для полного красного цвета фона элемента <h1> без прозрачности.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>Это заголовок</h1>
  <p>Это параграф</p>
  <p>Это параграф</p>
</body>