CSS примеры — учебник для новичков и не только // Вебшкола онлайн

 back-6197090 next-8520503

CSS — изменение фона
Фон страницы
Фон различных элементов
Изображение в качестве фона страницы
Неудачное фоновое изображение
Повтор фонового изображения по горизонтали
Позиционирование фонового изображения
Фиксированное фоновое изображение (изображение не прокручивается вместе с содержимым)
Свойства фона одной записью
Расширенные примеры с фоном

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

CSS — текст
Изменение цвета текста различных элементов
Выравнивание текста
Удаление подчеркивания ссылок
Оформление текста
Преобразование букв текста
Красная строка
Расстояние между символами
Расстояние между строками
Направление чтения текста
Увеличение расстояния между словами
Перенос строк
Выравнивание изображения по вертикали

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

CSS — шрифты
Шрифт текста
Размер шрифта
Размер шрифта в пикселях
Размер шрифта в em
Размер шрифта в процентах и em
Стиль шрифта
Варианты шрифта
Толщина линий шрифта
Свойства шрифта одной записью

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

CSS — ссылки
Изменение цвета посещенных и непосещенных ссылок
Использование text-decoration в ссылках
Фон ссылок
Добавление других стилей ссылкам
Создание кнопок

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

CSS — списки
Маркеры списков
Маркеры-изображения
Маркеры-изображения — кросс-браузерное решение
Свойства списков одной записью

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

CSS — таблицы
Границы таблиц
Использование свойства border-collapse
Ширина и высота таблицы
Выравнивание содержимого таблицы по горизонтали
Выравнивание содержимого таблицы по вертикали
Расстояние между содержимым таблицы и границами ячеек
Цвет границ ячеек
Положение названия таблицы
Создание веселой таблицы

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

CSS — боксовая модель
Элемент шириной 250px
Элемент шириной 250px — кросс-браузерное решение

Объяснение боксовой модели в CSS

CSS — бордюры (границы)
Ширина четырех границ
Ширина верхней границы
Ширина нижней границы
Ширина левой границы
Ширина правой границы

Стиль четырех границ

Стиль верхней границы
Стиль нижней границы
Стиль левой границы
Стиль правой границы

Цвет четырех границ

Цвет верхней границы
Цвет нижней границы
Цвет левой границы
Цвет правой границы

Свойства границ одной записью

Разные границы на разных сторонах

Свойства верхней границы одной записью
Свойства нижней границы одной записью
Свойства левой границы одной записью
Свойства правой границы одной записью

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

CSS — внешняя граница
Рисование линии вокруг элемента (outline)
Стиль внешней границы
Цвет внешней границы
Ширина внешней границы

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

CSS — внешний отступ
Отступ до соседних элементов
Внешний отступ одной записью
Отступ сверху текста в сантиметрах
Отступ снизу текста в процентах
Отступ слева от текста в сантиметрах

Объяснение внешнего отступа в CSS

CSS — внутренний отступ
Левый внутренний отступ
Правый внутренний отступ
Верхний внутренний отступ
Нижний внутренний отступ
Все внутренние отступы одной записью

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

CSS — группировка
Группировка селекторов
Вложенные селекторы

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

CSS — размеры элементов
Высота изображения в пикселях
Высота изображения в процентах
Ширина элемента в пикселях
Ширина элемента в процентах
Максимальная высота элемента
Максимальная ширина элемента в пикселях
Максимальная ширина элемента в процентах
Минимальная ширина элемента
Минимальная ширина элемента в пикселях
Минимальная ширина элемента в процентах

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

CSS — отображение элементов
Скрытие элементов (visibility:hidden)
Скрытие элементов (display:none)
Отображение элементов как строчные блоки
Отображение элементов как блоки
Использование visibility:collapse

Объяснение отображения элементов в CSS

CSS — позиционирование элементов
Относительное позиционирование относительно окна браузера
Относительное позиционирование относительно нормального положения
Абсолютное позиционирование
Перекрывание элементов
Отображение части элемента
Создание окон с полосами прокручивания
Автоматическое добавление полос прокручивания
Отступ изображения сверху
Отступ изображения снизу
Отступ изображения слева
Отступ изображения справа
Изменение курсора

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

CSS — плавающие элементы
Использование свойства float
Выравнивание изображения в параграфе по правому краю
Выравнивание изображения с подписью по правому краю
Выравнивание первой буквы параграфа по левому краю (буквица)
Создание фотогалереи
Запрет обтекания элемента
Создание горизонтального меню
Создание сайта — блочная разметка

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

CSS — выравнивание элементов
Выравнивание по центру
Выравнивание слева/справа с помощью внешнего отступа
Выравнивание слева/справа с помощью внешнего отступа— кросс-браузерное решение
Выравнивание с помощью float
Выравнивание с помощью float — кросс-браузерное решение

Объяснение выравнивания в CSS

CSS — генерируемое содержание
Вставка адреса страницы в название ссылок
Автоматическая нумерация пунктов списка
Изменение кавычек

CSS — псевдо-классы
Цвет ссылок
Другие стили ссылок
Использование :focus
Использование :first-child
Использование :first-child — выделение элемента в параграфе
Использование :first-child — выделение элемента в первом параграфе
Использование :lang

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

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

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

CSS — навигация
Готовое вертикальное меню
Готовое горизонтальное меню

Объяснение блоков навигации в CSS

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

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

CSS — прозрачность изображения
Создание прозрачных изображений
Создание прозрачного блока с текстом

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

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

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

CSS — выборка атрибутов
Выборка элементов с атрибутом title
Выборка элементов с атрибутом title и заданным значением
Выборка элементов с атрибутом title и заданным значением с пробелами
Выборка элементов с атрибутом title и заданным значением (разделенным дефисом)

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

back-6197090 next-8520503 unect-2326228