Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Заказать
Реклама Поддержка
HTML CSS JAVASCRIPT SQL PYTHON PHP

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

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет
Цвет RGB HEX HSL
CSS Фон
Фон цвет Фон изображение Фон повторение Фон вложеный Фон стенография
CSS Границы
Границы Ширина границ Цвет границ Стороны границ Границы стенография Закругленные границы
CSS Поля
Отступ cнаружи Разрушить поля
CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур
Контур Ширина контура Цвет контура Контур стенография Смещение контура
CSS Текст
Форматирование текста Выравнивание текста Оформление текста Преобразование текста Интервал текста Тень текста
CSS Шрифты
Семейство шрифтов Безопасные шрифты Резервные шрифты Стиль шрифтов Размер шрифтов Google шрифты Сочетание шрифтов Стенография шрифтов
CSS Иконки CSS Ссылки CSS Списки CSS Таблицы
Границы таблицы Размер таблицы Выравнивание таблицы Стиль таблицы Отзывчивая таблица
CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок
Поплавок Очистить Примеры float
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 Переменные
Переменная var() Переопределение Переменные с JS Медиа-запросы
CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс
CSS Гибкий бокс CSS Flexbox контейнер CSS Flexbox элементы CSS Flexbox отзывчивый

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 Синтаксис

CSS Синтаксис

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

CSS Селекторы

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

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

CSS Как / Где?

Внешний CSS Внутренний CSS Встроенный CSS Несколько таблиц стилей Каскадный порядок

CSS Объяснение как и где?

CSS Комментарии

Однострочный комментарий Многострочный комментарий

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

CSS Цвета

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

CSS Объяснение цвета

CSS Фоны

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

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

CSS Границы

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

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

CSS Поля

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

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

CSS Отступы

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

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

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

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

CSS Объяснение свойств height/width

CSS Бокс Модель

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

CSS Объяснение модели box

CSS Контур

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

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

CSS Текст

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

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

CSS Шрифты

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

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

CSS Иконки

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

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

CSS Ссылки

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

CSS Объяснение Ссылки

CSS Списки

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

CSS Объяснение Списка

CSS Таблицы

Укажите черную рамку для элементов table, th и td Использование border-collapse Единая граница вокруг таблицы Укажите ширину и высоту таблицы Установите выравнивание содержимого по горизонтали (text-align) Установите выравнивание содержимого по вертикали (vertical-align) Укажите отступы для элементов th и td Горизонтальные разделители Таблица с возможностью перемещения Таблицы в полоску Укажите цвет границ таблицы Задайте положение заголовка таблицы Адаптивная таблица Создайте необычную таблицу

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

CSS Дисплей

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

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

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

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

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

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

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

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

CSS Плавающий

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

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

CSS Встроенный блок

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

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

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

Выравнивание по центру с полями Выравнивание текста по центру Центрировать изображение Выравнивание по левому/правому краю в соответствии с позицией Выравнивание по левому/правому краю в соответствии с решением position - Crossbrowser Выравнивание по левому/правому краю с помощью float Выравнивание по левому/правому краю с помощью решения float - Crossbrowser Выровнять по вертикали с помощью отступов Центрировать по вертикали и горизонтали Выровнять по вертикали с помощью высоты строки Центрируйте по вертикали и горизонтали с указанием позиции

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

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

Селектор потомков Дочерний селектор <Селектор смежных элементов Общий селектор родственных элементов

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

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

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

CSS Объяснение pseudo-classes explained

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

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

CSS Объяснение pseudo-elements explained

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

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

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

CSS Панели навигации

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

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

CSS Выпадающий

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

CSS Объяснение раскрывающихся списков

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

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

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

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

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

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

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

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

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

CSS Формы

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

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

CSS Счетчики

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

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

CSS Макет веб-сайта

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

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

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

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

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

CSS Изображения границ

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

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

CSS Фоны

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

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

CSS Градиенты

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

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

CSS Теневые эффекты

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

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 Всплывающие подсказки

Подсказка справа Подсказка слева Всплывающая подсказка Нижняя подсказка Подсказка со стрелкой Анимированная подсказка Animated tooltip

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

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

Закругленное изображение Обведенное изображение Эскиз изображения Эскиз изображения в виде ссылки Адаптивное изображение Текст изображения (верхний левый угол) Текст изображения (правый верхний угол) Текст изображения (нижний левый угол) Текст изображения (нижний правый угол) Текст изображения (по центру) Изображения Polaroid Фильтр изображений в градациях серого Дополнительно — модальное изображение с CSS и JavaScript

CSS Объяснение images explained

CSS Отражение изображения

Создать отражение под изображением Создать отражение справа от изображения Создайте зазор между изображением и отражением Создайте эффект затухания отражения

CSS Объяснение image reflection explained

CSS Объект-соответствия

Использовать object-fit: cover Использовать object-fit: contain Использовать object-fit: fill Использовать object-fit: none Использовать object-fit: scale-down Все значения свойства object-fit в одном примере

CSS Объяснение object-fit

CSS Объект-позиция

Расположите изображение так, чтобы большое старое здание было в центре Расположите изображение так, чтобы знаменитая Эйфелева башня находится в центре

CSS Объяснение object-position explained

CSS Кнопки

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

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

CSS Пагинация

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

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

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

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

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

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

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

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

CSS Переменные

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

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

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

Ширина элементов без изменения размера Ширина элементов с размером окна Элементы формы + размер окна

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

CSS Флексбокс

Flexbox с тремя гибкими элементами Flexbox с тремя flex-элементами — направление 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 Order the flex items Margin-right: auto; Margin:auto; = идеальное центрирование align-self on flex items Укажите длину гибкого элемента относительно остальных гибких элементов Создайте адаптивную галерею изображений с помощью flexbox Создайте адаптивный веб-сайт с помощью flexbox

CSS Объяснение флексбокса

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

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

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

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

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

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

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

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

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

CSS Сетка

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

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


❮ Назад Далее ❯