HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS
Цвета RGB Шестнадцатеричный ВШЛ
CSS-фоны
Фоновый цвет Фоновая картинка Повторение фона Фоновое приложение Фоновая стенография
CSS границы
Границы Ширина рамки Цвет границы Пограничные стороны Пограничная стенография Закругленные границы
CSS поля
Поля Margin Collapse
CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-текст
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-шрифты
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-иконки CSS-ссылки CSS-списки CSS-таблицы
Table Borders Table Size Table Alignment Table Style Table Responsive
Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS
Float Clear Float Examples
Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS
Navbar Vertical Navbar Horizontal Navbar
Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты
Linear Gradients Radial Gradients Conic Gradients
CSS-тени
Shadow Effects Box Shadow
Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Цвета CSS

❮ Предыдущий Следующий ❯

CSS поддерживает более 140 названий цветов, значения HEX, значения RGB , значения RGBA, значения HSL, значения HSLA и непрозрачность.

Цвета RGBA

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

Значение цвета RGBA задается с помощью: rgba(красный, зеленый, синий, альфа). Альфа-параметр представляет собой число от 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);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Цвета HSL

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

Значение цвета HSL указывается с помощью: hsl (оттенок, насыщенность, яркость).

  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%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Цвета HSLA

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

Значение цвета HSLA указывается с помощью: hsla(hue, saturation, lightness, 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);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

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

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

Значение opacityсвойства должно быть числом от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).

rgb(255, 0, 0); непрозрачность: 0,2;
rgb(255, 0, 0); непрозрачность: 0,4;
rgb(255, 0, 0); непрозрачность: 0,6;
rgb(255, 0, 0); непрозрачность: 0,8;

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

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

Пример

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

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

Упражнение:

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

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

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Предыдущий Следующий ❯