Учебник по 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 Z-индекс 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 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

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


Цвета задаются с помощью предопределенных имен цветов или значений RGB, HEX, HSL, RGBA, HSLA.


Имена цветов CSS

В CSS цвет можно указать с помощью предопределенного имени цвета:

Помидор
апельсин
ДоджерСиний
СреднийМореЗеленый
серый
Сланцево-синий
Фиолетовый
Светло-серый

CSS/HTML поддерживает 140 стандартных названий цветов .


Цвет фона CSS

Вы можете установить цвет фона для элементов HTML:

Привет мир


Боль сама по себе любовь Вот почему это для малейшего, кто наша обычная практика терпит, чтобы воспользоваться последствиями

Пример

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>


Цвет текста CSS

Вы можете установить цвет текста:

Привет мир

Боль сама по себе любовь

Вот почему это для малейшего, кто наша обычная практика терпит, чтобы воспользоваться последствиями

Пример

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Цвет границы CSS

Вы можете установить цвет границ:

Привет мир

Привет мир

Привет мир

Пример

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Значения цвета CSS

В CSS цвета также могут быть указаны с использованием значений RGB, значений HEX, значений HSL, значений RGBA и значений HSLA:

То же, что и название цвета "Помидор":

RGB(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

То же, что и название цвета «Помидор», но прозрачность 50%:

RGBA (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0,5)

Пример

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Узнайте больше о значениях цвета

Вы узнаете больше о RGB , HEX и HSL в следующих главах.