Примеры, демонстрирующие применение различных HTML-элементов и свойств CSS.
Текст
- Заголовки: h1 — h6: стиль по умолчанию
- Размер не имеет значения: создание заголовков любого размера, который вы выберете, с помощью CSS
- Жирный шрифт, курсив, регистр и высота строки: Использование font-weight, font-style, font-variant, text-transform и line-height
- Семейства шрифтов: списки семейств шрифтов и общие резервные семейства шрифтов
- Размеры шрифта: абсолютные и относительные единицы измерения
- Выделение текста с помощью интервалов: text-align, text-indent, word-spacing и letter-spacing свойства
- Выравнивание по вертикали: свойство vertical-align
- Нижний и надстрочный индексы: использование позиционирования в качестве альтернативы vertical-align свойству
- Тени текста: тени на тексте
- Простые заглавные буквы: простой способ достижения общего эффекта
- Необычные заглавные буквы: оживляем первую букву
- Графические заглавные буквы: использование изображений
- Заглавные буквы первого абзаца: нацелены на первую букву первого абзаца
- Извлечённая цитата 1: простая структура извлекаемых цитат
- Извлечённая цитата 2: добавить немного стиля
- Извлечённая цитата 3: более сложный стиль
Ссылки
- Подчёркивание: различные способы подчёркивания (обычно ссылок) с помощью text-decoration, border-bottom и background-image
- Якоря и целевые объекты: ссылки на части страницы и их стилизация с использованием псевдокласса :target
- Переходы 1: графические ссылки, которые изменяются при наведении на них курсора с помощью :hover
- Переходы 2: дополнительные интерактивные эффекты с использованием псевдокласса :active
- Переходы 3: постепенное появление и исчезновение
- Переходы 4: вращение, использование transform
- Простые CSS-переходы: тонкая анимация текстовых ссылок при наведении на них курсора мыши
- Дополнительные CSS-переходы: с использованием border-radius цветов и RGBa
- Функции синхронизации переходов в CSS: обработка ускорения и замедления анимированных переходов
Цвета, изображения и фон
- Цвета: цвета CSS, с использованием свойств color и background-color
- HTML-изображения: элемент img
- Больше переходов CSS: использование border-radius и цветов RGBa.
- Фоновые изображения: свойство CSS background-image
- Позиционирование фонов: с помощью свойства background-position
- Повторяющиеся фоновые изображения: использование свойства background-repeat
- Фоновое вложение: как фон ведёт себя при прокручивании содержимого
- Размер фонового изображения: использование background-size
- Несколько фонов: наложение фонов слоями внутри одного поля
- Линейные градиенты: создание градиентных фонов с помощью CSS
- Радиальные градиенты: круглые и эллиптические градиентные фоны
- Непрозрачность: прозрачность окна
Макет
- Ширина и высота: width, height, max-width, min-height и так далее
- Границы: толстые, тонкие, этого цвета, того цвета, сплошные, пунктирные
- Скруглённые углы: использование свойства border-radius
- Тени от коробок: добавление всплывающих окон
- Свёртывание полей: как вертикальные поля сливаются, или “сворачиваются”, друг в друга
- Описывание: “Контуры”, которые ограничивают границы
- Переполнение: управление частями содержимого, которое не помещаются внутри коробки
- Block и inline 1: изменение поведения блоков с помощью свойства display
- Block и inline 2: больше различий между блоками и строчными блоками
- Block и inline 3: применение display: inline-block
- Позиционирование: статическое: следуя обычному потоку
- Позиционирование: относительное: смещение от начального положения коробки
- Позиционирование: абсолютное значение 1: позиционирование по отношению к контейнеру коробки
- Позиционирование: абсолютное 2: внутри позиционированного поля
- Позиционирование: исправленное: по отношению к области просмотра
- Z-индекс: укладка расположенных блоков
- Floating 1: простой плавающий прямоугольник
- Floating 2: два плавающих поля
- Floating 3: очистка плавающих полей
- Макет страницы 1: две колонки шаг 1: размещение навигационной колонки
- Макет страницы 2: две колонки шаг 2: использование margin для вывода содержимого из-под навигационной колонки
- Макет страницы 3: использование рамки для создания фона для столбца
- Макет страницы 4: три столбца
- Макет страницы 5: добавление заголовка
- Макет страницы 6: нижние колонтитулы не всегда будут работать со столбцами с абсолютным расположением
- Макет страницы 7: добавление нижнего колонтитула с использованием плавающих столбцов
- Чарльз Дарвин: усовершенствованная версия основных принципов предыдущих примеров
- 2D преобразования: манипулирование размером, формой и положением блоков с помощью свойства transform
- Начало преобразования: изменение точки, от которой измеряются преобразования
Списки и навигация
- Базовые списки: элементы ul, ol и li
- Вложенные списки: списки внутри списков
- Списки описаний: dl, dt и dd
- Маркеры списка: изменение маркеров и нумерации с помощью list-style-type
- Изображения в качестве маркеров элементов списка: использование list-style-image
- Внутренние и внешние маркеры списка: Использование list-style-position
- Выпадающие списки 1: основы работы с выпадающим меню
- Выпадающие списки 2: простое многоуровневое выпадающее меню
- Встроенные вкладки: базовая навигация по вкладкам с использованием свойства display
- Плавающие вкладки: основные вкладки, использующие свойство float
- Больше вкладок: придание вкладкам большего сходства с табуляцией
- Ещё больше вкладок: альтернативный стиль табуляции
- Узкие вкладки: использование простых подчёркиваний
- Необычные вкладки: сходят с ума от CSS
- Показывать / скрывать навигацию: переключение отображения с помощью JavaScript
- Показывать / скрывать навигацию: переключение отображения с помощью псевдокласса :target
Таблицы
- Базовая таблица: элементы table, tr и td
- Ячейки заголовка: элементы th
- Объединение ячеек 1: атрибут rowspan
- Объединение ячеек 2: атрибут colspan
- Свёртывание границ 1: свёртывание границ ячеек таблицы
- Свёртывание границ 2: свёртывание границ ячеек таблицы и границ таблицы
- Группы столбцов: элементы col и colgroup
- Пустые ячейки: использование empty-cells свойства для указания того, как должны отображаться пустые ячейки
- Автоматическая компоновка таблицы: алгоритм компоновки по умолчанию, используемый таблицами
- Исправлена компоновка таблицы: задаётся с помощью свойства table-layout
Формы
- Текстовые поля: элементы типа текста и пароля input
- Флажки и переключатели: другие типы элементов input
- Ввод файла: для загрузки
- Текстовые области: элемент textarea
- Поля выбора: базовое использование элементов select и option
- Группы опций поля выбора: использование элемента optgroup
- Поля выбора с несколькими выделениями: использование атрибута multiple
Страницы в тему:
