ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Комментарии CSS Цвета
Цвета RGB HEX HSL
CSS Фоны
Цвет фона Изображение фона Повторение фона Вложение фона Сокращенное свойство
CSS Границы
Границы Ширина границы Цвет границы Стороны границы Сокращенное свойство Закругленные границы
CSS Margin
Margin Margin Collapse
CSS Padding CSS Height/Width CSS Блочная модель CSS Контур
Контур Ширина контура Цвет контура Сокращенное свойство Outline Offset
CSS Текст
Цвет текста Выравнивание текста Оформление текста Преобразование текста Интервал текста Тень текста
CSS Шрифты
Семейство шрифта Безопасный веб-шрифт Запасные варианты шрифта Стиль шрифта Размер шрифта Google-шрифт Сочетания шрифта Сокращенное свойство
CSS Иконки CSS Ссылки CSS Списки CSS Таблицы
Table Границы Table Размер Table Выравнивание Table Стиль Table Адаптивность
CSS Display CSS Max-Width CSS Position CSS Overflow CSS Float
Float Clear Float Примеры
CSS Inline-Block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Opacity CSS Панель навигации
Панель навигации Вертикальный навбар Горизонтальный навбар
CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности CSS !important

CSS Продвинутый

CSS Закругленные углы CSS Границы изображений CSS Фоны CSS Цвета CSS Ключевые слова цвета CSS Градиенты
Линейные градиенты Радиальные градиенты
CSS Тени
Эффекты тени Тень блока
CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Отражение изображения CSS object-fit CSS object-position CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные
Функция var() Переопределение переменных Переменные и JavaScript Переменные в медиа-запросах
CSS Размеры блоков CSS Медиа-запросы CSS Примеры медиа-запросов CSS Flexbox
CSS Flexbox CSS Flex Контейнер CSS Flex Элементы CSS Flex Адаптивность

CSS Адаптивный

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

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

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

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

CSS Примеры

❮ Prev Next ❯

CSS Синтаксис

CSS синтаксис CSS комментарии

CSS объяснение синтаксиса

CSS Селекторы

Селектор элементов Селектор id Селектор class (для всех элементов) Селектор class (только для <p> элементов) HTML-элемент, который ссылается на два класса Универсальный селектор Группировка селекторов

CSS объяснение селекторов

CSS Цвета

Установить цвет фона элемента Установить цвет текста Установите цвет границы Установите разные значения цвета Установить значения RGB Установить значения HEX Установить значения HSL

CSS объяснение цветов

CSS Фоны

Установить цвет фона страницы Установить цвет фона разных элементов Установить изображение в качестве фона страницы Как повторить фоновое изображение только по горизонтали Как разместить фоновое изображение Фиксированное фоновое изображение (это изображение не будет прокручиваться с остальной частью страницы) Все свойства фона в одном объявлении Расширенный пример фона

Объяснение свойств фона

CSS Границы

Установите ширину четырех границ Установите ширину верхней границы Установите ширину нижней границы Установите ширину левой границы Установите ширину правой границы Установите стиль четырех границ Установите стиль верхней границы Установить стиль нижней границы Установить стиль левой границы Установите стиль правой границы Установите цвет четырех границ Установите цвет верхней границы Установите цвет нижней границы Установите цвет левой границы Установите цвет правой границы Все свойства границы в одном объявлении Добавить закругленные границы к элементу Установите разные границы на каждой стороне Все свойства верхней границы в одном объявлении Все свойства нижней границы в одном объявлении Все свойства левой границы в одном объявлении Все свойства правой границы в одном объявлении

Объяснение свойств границы

CSS Внешние отступы (margin)

Укажите разные поля для каждой стороны элемента Используйте сокращенное свойство margin с четырьмя значениями Используйте сокращенное свойство margin с тремя значениями Используйте сокращенное свойство margin с двумя значениями Используйте сокращенное свойство margin с одним значением Установите margin на auto, чтобы центрировать элемент внутри его контейнера. Пусть левый margin унаследован от родительского элемента Свёртывание внешних отступов

Объяснение свойств margin

CSS Внутренние отступы (padding)

Укажите разные отступы для каждой стороны элемента Используйте сокращенное свойство padding с четырьмя значениями Используйте сокращенное свойство padding с тремя значениями Используйте сокращенное свойство padding с двумя значениями Используйте сокращенное свойство padding с одним значением Padding и ширина элемента (без изменения размеров блока) Padding и элемент width (с изменением размеров блока) Установить отступ слева от элемента Установить отступ справа от элемента Установить отступ сверху элемента Установить отступ снизу элемента

Объяснение свойств Padding

CSS Height/Width - Высота/Ширина

Установите высоту и ширину элемента Установите максимальную ширину элемента Установите высоту и ширину разных элементов Установите высоту и ширину изображения, используя проценты Установите минимальную ширину и максимальную ширину элемента Установите минимальную высоту и максимальную высоту элемента

Объяснение свойств размеров

CSS Блочная модель

Демонстрация блочной модели Укажите элемент общей шириной 250 пикселей

Объяснение блочной модели

CSS Контур

Нарисуйте линию вокруг элемента (контур) Установить стиль контура Установите цвет контура Использовать outline-color: инвертировать контур Установите ширину контура Использовать сокращенное свойство outline Добавьте пространство между контуром и краем / границей элемента

Объяснение свойств контура

CSS Текст

Установить цвет текста разных элементов Выровнять текст Удалить линию под ссылками Украсить текст Управление буквами в тексте Отступ текста Укажите расстояние между символами Укажите расстояние между строками Установить направление текста элемента Увеличьте пробел между словами Укажите тень текста для элемента Отключить перенос текста внутри элемента Вертикальное выравнивание изображения внутри текста

Объяснение свойств текста

CSS Шрифты

Установить шрифт текста Установите размер шрифта Установите размер шрифта в пикселях Установите размер шрифта в em Установите размер шрифта в процентах и em Установить стиль шрифта Установить вариант шрифта Установите жирность шрифта Все свойства шрифта в одном объявлении

Объяснение свойств шрифта

CSS Иконки

Иконки Font Awesome Иконки Bootstrap Иконки Google

Объяснение использования иконок

CSS Ссылки

Добавить разные цвета для посещенных / не посещенных ссылок Использование текстового оформления на ссылках Укажите цвет фона для ссылок Добавьте другие стили к гиперссылкам Различные типы курсоров Дополнительно - создание блоков ссылок Дополнительно - создание блоков ссылок с границами

Объяснение свойств ссылки

CSS Списки

Все различные маркеры элементов списка в списках Установить изображение в качестве маркера элемента списка Расположите маркер элемента списка Удалить настройки списка по умолчанию Все свойства списка в одном объявлении Списки стилей с цветами Полноразмерный список

Объяснение свойств списка

CSS Таблицы

Укажите черную границу для элементов таблицы th и td Использование border-collapse Одиночная граница вокруг таблицы Укажите ширину и высоту таблицы Установить горизонтальное выравнивание содержимого (выравнивание текста) Установить вертикальное выравнивание контента (вертикальное выравнивание) Укажите отступы для элементов th и td Горизонтальные разделители Элементы таблицы при наведении Полосатые таблицы Укажите цвет границ таблицы Установить положение заголовка таблицы Адаптивная таблица Создать модную таблицу

Объяснение свойств таблицы

CSS Дисплей

Как скрыть элемент (visibility:hidden) Как не отображать элемент (display:none) Как отобразить блочный элемент в виде встроенного элемента Как отобразить встроенный элемент в виде блочного элемента Как использовать CSS вместе с JavaScript, чтобы показать скрытый контент

Объяснение свойств отображения

CSS Позиционирование

Расположите элемент относительно окна браузера Расположите элемент относительно его нормального положения Расположить элемент с абсолютным значением Липкое позиционирование Перекрывающиеся элементы Установить форму элемента Установите верхний край изображения, используя значение в пикселях Установите нижний край изображения, используя значение в пикселях Установите левый край изображения, используя значение в пикселях Установите правый край изображения, используя значение в пикселях Положение текста на изображении (верхний левый угол) Положение текста на изображении (верхний правый угол) Положение текста на изображении (нижний левый угол) Положение текста на изображении (нижний правый угол) Положение текста на изображении (по центру)

Объяснение свойств позиционирования

CSS Overflow - Переполнение

Использование overflow: visible - Переполнение не обрезается. Оно выводится за пределами поля элемента. Использование overflow: hidden - Переполнение обрезается, а остальное содержимое скрыто. Использование overflow: scroll - Переполнение ограничено, но добавлена полоса прокрутки, чтобы увидеть остальную часть содержимого. Использование overflow: auto - Если переполнение ограничено, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого. Использование overflow-x и overflow-y.

Объяснение свойств Overflow

CSS Обтекание - Float

Простое использование свойства float Изображение с границей и полями, которое плавает справа в параграфе Изображение с надписью, которая плавает справа Пусть первая буква параграфа смещается влево Отключение float (используя свойство clear) Отключение float (используя хак "clearfix") Создать плавающие блоки Создать изображения рядом друг с другом Создание блоков одинаковой высоты (с flexbox) Создание горизонтального меню Создать пример веб-макета

Объяснение свойств Float

CSS Inline-block

Показать различия между inline, inline-block и block Использование inline-block для создания навигационных ссылок

Объяснение Inline-block

CSS Выравнивание элементов

Выравнивание по центру с помощью margin Выравнивание по центру текста Выравнивание по центру изображения Выравнивание Слева/Справа Выравнивание Слева/Справа - Кроссбраузерное решение Выравнивание Слева/Справа с помощью float Выравнивание Слева/Справа с помощью float - Кроссбраузерное решение Вертикальное центрирование с padding Вертикальное и горизонтальное центрирование Вертикальное центрирование с line-height Вертикальное и горизонтальное центрирование с position

Объяснение свойств выравнивания

CSS Комбинаторы

Унаследованый селектор Дочерний селектор Смежный селектор Главный родственный селектор

Объяснение селекторов комбинаторов

CSS Псевдо-классы

Добавить разные цвета к гиперссылке Добавьте другие стили к гиперссылкам Использование :focus :first-child - соответствовать первому элементу p :first-child - соответствует первый элемент i во всех элементах p :first-child - сопоставить все элементы i во всех первых дочерних элементах p Использование :lang

Объяснение псевдо-классов

CSS Псевдо-элементы

Сделайте первую букву особенной в тексте Сделайте первую строку особенной в тексте Сделайте первую букву и первую строку особенными Использование :before, чтобы вставить какой-либо контент перед элементом Использование :after, чтобы вставить некоторый контент после элемента

Объяснение псевдо-элементов

CSS Сгенерированный контент

Вставьте URL в круглые скобки после каждой ссылки со свойством content Нумерация разделов и подразделов с помощью "Section 1", "1.1", "1.2" и т.д. Укажите кавычки с помощью свойства quotes

Объяснение CSS счётчиков

CSS Opacity - Прозрачность

Создание прозрачных изображений Создание прозрачных изображений - эффект наведения мыши Обратный эффект наведения мыши для прозрачных изображений Прозрачный блок/div Прозрачный блок/div с помощью RGBA значений Создание прозрачного блока с текстом на фоновом изображении

Объяснение прозрачности изображений

CSS Навигационные панели

Полностью стилизованная вертикальная панель навигации Полностью стилизованная горизонтальная панель навигации Фиксированная вертикальная панель навигации на всю высоту Фиксированная горизонтальная панель навигации Липкая панель навигации (не работает в IE или Edge 15 и более ранних версиях) Адаптивная верхняя навигация Адаптивная боковая навигация

Объяснение навигационных панелей

CSS Выпадающие элементы

Выпадающий текст Выпадающее меню Выровненное по правому краю выпадающее меню Выпадающее изображение Выпадающая панель навигации

Объяснение выпадающих элементов

CSS Галерея изображений

Галерея изображений Адаптивная галерея изображений

Объяснение галереи изображений

CSS Спрайты изображений

Спрайт изображения Спрайт изображения - список навигации Спрайт изображения с эффектом наведения

Объяснение спрайтов изображений

CSS Селекторы атрибутов

Выбрать все элементы <a> с атрибутом target Выбрать все элементы <a> с атрибутом target="_blank" Выбирает все элементы с атрибутом title, который содержит разделенный пробелами список слов, одним из которых является "flower"Выбрать все элементы с атрибутом class со значением, которое начинается с "top" (должно быть целым словом) Выбрать все элементы с атрибутом class со значением, которое начинается с "top" (не должно быть целым словом) Выбирает все элементы со значением атрибута класса, которое заканчивается на "test" Выбирает все элементы со значением атрибута класса, которое содержит "te"

Объяснения селекторов атрибутов

CSS Формы

Поле ввода на всю ширину Отступы поля ввода Границы поля ввода Нижняя граница поля ввода Цветные поля ввода Сфокусированные поля ввода Сфокусированные поля ввода 2 Ввод с иконкой/изображением Анимированный поиск Стилизация текстовой области Стилизация меню выбора Стилизация кнопок ввода Адаптивная форма

Объяснение форм

CSS Счётчики

Создание счетчика Вложенные счетчики 1 Вложенные счетчики 2

Объяснение счетчиков

CSS Макет сайта

Простой, адаптивный макет сайта Пример веб-сайта

Объяснение макета веб-сайта

CSS Закругленные углы

Добавить закругленные углы к элементам Округлить каждый угол отдельно Создать эллиптические углы

Объяснение CSS закругленных углов

CSS Границы изображений

Создайте границу изображения вокруг элемента, используя ключевое слово round Создайте границу изображения вокруг элемента, используя ключевое слово stretch Граница изображения - различные значения среза

Объяснение CSS границ изображений

CSS Фоны

Добавить несколько фоновых изображений для элемента Укажите размер фонового изображения Масштабирование фонового изображения с использованием "contain" и "cover" Определить размеры нескольких фоновых изображений Полноразмерное фоновое изображение (полностью заполняет область содержимого) Используйте background-origin, чтобы указать, где расположено фоновое изображение Используйте background-clip, чтобы указать область рисования фона

Объяснение CSS фонов

CSS Градиенты

Линейный градиент - сверху вниз Линейный градиент - слева направо Линейный градиент - диагональ Линейный градиент - с указанным углом Линейный градиент - с несколькими цветными стопами Линейный градиент - цвет радуги + текст Линейный градиент - с прозрачностью Линейный градиент - повторяющийся линейный градиент Радиальный градиент - равномерно расположенные цветовые остановки Радиальный градиент - разнесенные цветовые стопы Радиальный градиент - установить форму Радиальный градиент - ключевые слова разного размера Радиальный градиент - повторяющийся радиальный градиент

Объяснение CSS градиентов

CSS Эффекты тени

Простой эффект тени Добавьте цвет к тени Добавьте эффект размытия тени Белый текст с черной тенью Красная неоновая светящаяся тень Красно-синяя неоновая светящаяся тень Белый текст с черной, синей и темно-синей тенью Добавить простую тень блока к элементу Добавить цвет блочной тени Добавить цвет и эффект размытия в блочную тень Создание бумажных карточек (текст) Создание бумажных карточек (поляроидные изображения)

Объяснение CSS эффектов тени

CSS Эффекты текста

Укажите, как скрытый, переполненный контент должен передаваться пользователю Как отобразить переполненное содержимое при наведении на элемент Разрешить разбивать длинные слова и переносить их на следующую строку Укажите правила разрыва строки

Объяснение CSS эффектов текста

CSS Веб-шрифты

Используйте ваши "собственные" шрифты в правиле @font-face Используйте ваши "собственные" шрифты в правиле @font-face (жирные)

Объяснение CSS веб-шрифтов

CSS 2D Трансформации

translate() - переместить элемент из текущей позиции rotate() - повернуть элемент по часовой стрелке rotate() - повернуть элемент против часовой стрелки scale() - увеличить элемент scale() - уменьшить элемент skewX() - наклоняет элемент вдоль оси X skewY() - наклоняет элемент вдоль оси Y skew() - наклоняет элемент вдоль оси X и Y matrix() - вращать, масштабировать, перемещать и наклонять элемент

Объяснение CSS 2D трансформаций

CSS 3D Трансформации

rotateX() - вращать элемент вокруг своей оси X в определенной степени rotateY() - вращать элемент вокруг своей оси Y на заданную степень rotateZ() - вращать элемент вокруг своей оси Z на заданную степень

Объяснение CSS 3D трансформаций

CSS Переходы

Переход - изменить ширину элемента Переход - изменить ширину и высоту элемента Укажите разные кривые скорости для перехода Укажите задержку для эффекта перехода Добавить преобразование в эффект перехода Укажите все свойства перехода в одном сокращенном свойстве

Объяснение CSS переходов

CSS Анимации

Привязать анимацию к элементу Анимация - изменить цвет фона элемента Анимация - изменить цвет фона и положение элемента Задержка анимации Запустите анимацию 3 раза до остановки Запустите анимацию навсегда Запустить анимацию в обратном направлении Запускайте анимацию в чередующихся циклах Кривые скорости для анимации Сокращенное свойство анимации

Объяснение CSS анимации

CSS Всплывающие подсказки

Подсказка справа Подсказка слева Подсказка вверху Подсказка внизу Подсказка со стрелкой Анимированная подсказка

Объяснение всплывающих подсказок

CSS Стиль изображений

Округленное изображение Круглое изображение Миниатюрное изображение Миниатюра изображения в виде ссылки Адаптивное изображение Текст на изображении (верхний левый угол) Текст на изображении (верхний правый угол) Текст на изображении (нижний левый угол) Текст на изображении (нижний правый угол) Текст на изображении (по центру) Поляроидные изображения Фильтр изображений в градациях серого Дополнительно - модальное изображение с CSS и JavaScript

Объяснение CSS изображений

CSS Object-fit

Обрежьте стороны изображения, сохранив соотношение сторон, и заполните пространство Пример всех значений свойств объекта

Объяснение Object-fit

CSS Кнопки

Основные CSS кнопки Цвета кнопок Размеры кнопок Округлые кнопки Цветные границы кнопок Кнопки при наведении мыши Тень кнопок Отключенные кнопки Ширина кнопок Группы кнопок Ограниченная группа кнопок Анимированная кнопка (эффект наведения) Анимированная кнопка (волновой эффект) Анимированная кнопка (эффект нажатия)

Объяснение CSS кнопок

CSS Пагинация (нумерация страниц)

Простая пагинация Активная и удобная пагинация Округлая активная и удобная пагинация Эффект перехода при наведении мышки Пагинация с границами Округлые границы пагинации Пагинация с пробелом между ссылками Размер пагинации Пагинация с пробелом между ссылками Пагинация по центру Хлебные крошки

Объяснение CSS пагинации

CSS Несколько столбцов

Создать несколько столбцов Укажите разрыв между столбцами Укажите стиль правила между столбцами Укажите ширину правила между столбцами Укажите цвет правила между столбцами Укажите ширину, стиль и цвет правила между столбцами Укажите, сколько столбцов должен охватывать элемент Укажите предложенную оптимальную ширину для столбцов

Объяснение CSS несколько столбцов

CSS Пользовательский интерфейс

Разрешить пользователю изменить ширину элемента Разрешить пользователю изменить высоту элемента Разрешить пользователю изменять ширину и высоту элемента Добавьте пространство между контуром и границей элемента

Объяснение CSS пользовательского интерфейса

CSS Переменные

Использование var() функции Использование функции var() для вставки нескольких значений пользовательских свойств

Объяснение CSS переменных

CSS Размер блока

Ширина элементов без box-sizing Ширина элементов с box-sizing Элементы формы + box-sizing

Объяснение CSS размеров блока

CSS Flexbox (гибкий блок)

Flexbox с тремя гибкими элементами Flexbox с тремя гибкими элементами - направление rtl flex-direction - row-reverse flex-direction - column flex-direction - column-reverse justify-content - flex-end justify-content - center justify-content - space-between justify-content - space-around align-items - stretch align-items - flex-start align-items - flex-end align-items - center align-items - baseline flex-wrap - nowrap flex-wrap - wrap flex-wrap - wrap-reverse align-content - center Заказать flex-элементы Margin-right:auto; Margin:auto; = perfect centering align-self on flex items Укажите длину гибкого элемента относительно остальных гибких элементов Адаптивная галерея изображений с flexbox Адаптивный сайт с flexbox

Объяснение CSS flexbox

CSS Медиа-запросы

Измените цвет фона на светло-зеленый, если область просмотра составляет 480 пикселей в ширину или шире Показать меню, которое будет всплывать слева от страницы, если область просмотра составляет 480px в ширину или шире

Объяснение CSS медиа-запросов

CSS Медиа-запросы - Больше примеров

Установите разные цвета фона в зависимости от ширины экрана Адаптивное меню навигации Адаптивные столбцы с использованием float Адаптивные столбцы с использованием flexbox Скрыть элементы с помощью медиа-запросов Адаптивный размер шрифта Адаптивная галерея изображений Адаптивный вебсайт Изменить макет страницы в зависимости от ориентации браузера От минимальной ширины до максимальной ширины

Объяснение CSS медиа-запросов

CSS Адаптивный веб-дизайн

Адаптивный вид сетки Добавить брэкпоинты для настольных компьютеров, ноутбуков и телефонов Типичные брэкпоинты Адаптивное изображение Адаптивное видео Адаптивный фреймворк: W3.CSS Адаптивный фреймворк: Bootstrap

Объяснение CSS адаптивного веб-дизайна

CSS Grid - Сетка

Макет сетки Элементы сетки Пробелы в столбцах сетки Линии сетки Контейнер сетки Элементы сетки

Объяснение CSS сетки

❮ Prev Next ❯