CSS Примеры
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
