САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация 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 PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Примеры



CSS Синтаксис

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

Объяснение


CSS Цвет Фона

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

Объяснение


CSS Границы

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

Объяснение


CSS Поля

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

Объяснение


CSS Отступы

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

Объяснение


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

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

Объяснение


CSS Бокс Модель

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

Объяснение


CSS Контур

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

Объяснение


CSS Текст

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

Объяснение


CSS Шрифт

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

Объяснение


CSS Иконки

Установить иконки Font Awesome
Установить иконки Bootstrap
Установить иконки Google

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


CSS Ссылки

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

Объяснение


CSS Списки

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

Объяснение


CSS Таблицы

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

Объяснение


CSS Дисплей

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

Объяснение


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

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

Объяснение


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

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

Объяснение


CSS Поплавок

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

Объяснение


CSS Выравнивание

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

Объяснение


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

Потомок селектора
Ребенок селектора
Брат селектора
Генеральный брат селектора

Объяснение


CSS Генерируемое содержимое

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


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

Добавить различных цвета к гиперссылке
Добавить других стили к гиперссылке
Использовать фокус
Подбор первого элемента p
Подбор первого элемента i во всех элементах p
Подбор всех элементах i во всех первых дочерних элементах p
Использовать язык

Объяснение


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

Установить первую букву в тексте
Установить первую строку в тексте
Установить первую букву и первую строку
Вставить содержимое перед элементом
Вставить содержимое после элемента

Объяснение


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

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

Объяснение


CSS Навигационная Панель

Полностью стилизованная вертикальная панель навигации
Полностью стилизованная горизонтальная панель навигации

Объяснение


CSS Выпадение

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

Объяснение


CSS Подсказки

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

Объяснение


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

Галерея Изображений
Отзывчивая галерея изображений

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


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

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

Объяснение


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

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

Объяснение


CSS Формы

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

Объяснение


CSS Счетчики

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

Объяснение


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

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

Объяснение


CSS3 Изображения Границ

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

Объяснение


CSS3 Фон

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

Объяснение


CSS3 Градиенты

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

Объяснение


CSS3 Теневой Эффект

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

Объяснение