Эта серия упражнений посвящена свойству `word-spacing` в CSS. Вы попрактикуетесь в изменении интервалов между словами в тексте, используя различные значения и единицы измерения. Задания построены от простого к сложному: начиная с базового увеличения и уменьшения расстояния, до применения свойства к конкретным элементам и сброса унаследованных значений. Вам будет предоставлен готовый HTML и CSS код с пропусками, которые нужно заполнить, чтобы достичь желаемого визуального результата.
Список тем
- Модуль 1: Основы CSS
- Селекторы элементов.
- Селекторы классов и идентификаторов.
- Цвет текста и фона.
- Размеры и единицы измерения в CSS.
- Семейство шрифта и базовые свойства текста.
- Стилизация текста (жирный, курсив, подчеркивание).
- Выравнивание и интервалы текста.
- Комбинированные селекторы.
- Псевдоклассы для ссылок.
- Приоритеты стилей и каскадность.
- Наследование в CSS.
- Модуль 2: Блочная модель и позиционирование
- Блочная модель CSS (box model).
- Внутренние отступы (padding).
- Внешние отступы (margin).
- Границы элементов (border).
- Сокращенная запись свойств границ.
- Радиус скругления углов (border-radius).
- Свойство display и его значения.
- Блочные элементы (display: block).
- Строчные элементы (display: inline).
- Строчно-блочные элементы (display: inline-block).
- Скрытие элементов (display: none, visibility: hidden).
- Статичное позиционирование (position: static).
- Относительное позиционирование (position: relative).
- Абсолютное позиционирование (position: absolute).
- Фиксированное позиционирование (position: fixed).
- Липкое позиционирование (position: sticky).
- Свойство z-index и порядок наложения элементов.
- Свойство float и его применение.
- Свойство clear для обтекания.
- Центрирование элементов различными способами.
- Модуль 3: Селекторы CSS продвинутый уровень
- Групповые селекторы.
- Селекторы потомков (descendant selectors).
- Дочерние селекторы (child selectors).
- Соседние селекторы (adjacent sibling selectors).
- Общие сиблинги (general sibling selectors).
- Селекторы атрибутов: точное совпадение.
- Селекторы атрибутов: частичное совпадение.
- Псевдоклассы состояний (:hover, :active, :focus, :visited).
- Псевдоклассы для форм (:checked, :disabled, :required).
- Структурные псевдоклассы (:first-child, :last-child).
- Псевдоклассы :nth-child() и :nth-of-type().
- Псевдоклассы :not() и :empty.
- Псевдоэлементы ::before и ::after.
- Псевдоэлементы ::first-letter и ::first-line.
- Псевдоэлемент ::selection.
- Псевдоэлемент ::placeholder.
- Комбинирование псевдоклассов и псевдоэлементов.
- Создание декоративных элементов с помощью псевдоэлементов.
- Модуль 4: Работа с фоном и визуальными эффектами
- Фоновый цвет (background-color).
- Фоновое изображение (background-image).
- Повторение фона (background-repeat).
- Позиционирование фона (background-position).
- Размер фона (background-size).
- Фиксация фона (background-attachment).
- Сокращенная запись свойств фона.
- Множественные фоновые изображения.
- Линейные градиенты (linear-gradient).
- Радиальные градиенты (radial-gradient).
- Конические градиенты (conic-gradient).
- Тень блока (box-shadow).
- Тень текста (text-shadow).
- Прозрачность (opacity).
- Фильтры (filter: blur, grayscale, etc.).
- Режимы смешивания (mix-blend-mode, background-blend-mode).
- Маски с mask-image.
- Формы с clip-path.
- Модуль 5: Типографика продвинутый уровень
- Межстрочное расстояние (line-height).
- Интервалы между буквами (letter-spacing).
- Интервалы между словами (word-spacing).
- Трансформация текста (text-transform).
- Декорирование текста (text-decoration).
- Перенос слов (word-break, overflow-wrap).
- Управление пробелами (white-space).
- Многоколоночный текст (columns).
- Обрезка текста (text-overflow, ellipsis).
- Вертикальное выравнивание текста (vertical-align).
- Направление текста (direction, writing-mode).
- Веб-шрифты и @font-face.
- Модуль 6: Flexbox
- Введение в Flexbox.
- Включение Flexbox (display: flex).
- Flex-контейнер и flex-direction.
- Выравнивание с justify-content.
- Выравнивание с align-items.
- Выравнивание с align-content.
- Свойство align-self для отдельных элементов.
- Свойство flex-wrap.
- Свойство flex-flow (сокращение для direction и wrap).
- Свойство flex-grow.
- Свойство flex-shrink.
- Свойство flex-basis.
- Сокращенное свойство flex.
- Порядок элементов с order.
- Сложные макеты на Flexbox.
- Вложенные flex-контейнеры.
- Создание адаптивной навигационной панели с Flexbox.
- Модуль 7: CSS Grid Layout
- Введение в Grid Layout.
- Включение Grid Layout (display: grid).
- Создание сетки: grid-template-columns.
- Создание сетки: grid-template-rows.
- Единица измерения fr.
- Функция repeat().
- Промежутки с gap, row-gap, column-gap.
- Размещение элементов: grid-column.
- Размещение элементов: grid-row.
- Сокращенная запись grid-area.
- Именованные линии и области.
- Свойство grid-template-areas.
- Автоматическое размещение элементов.
- Автоматические треки (grid-auto-rows, grid-auto-columns).
- Управление потоком элементов (grid-auto-flow).
- Выравнивание в Grid: justify-items и align-items.
- Выравнивание в Grid: justify-content и align-content.
- Выравнивание отдельного элемента (justify-self, align-self).
- Сложные макеты на Grid.
- Комбинирование Grid и Flexbox.
- Модуль 8: Трансформации и переходы
- Трансформации: translate.
- Трансформации: scale.
- Трансформации: rotate.
- Трансформации: skew.
- Комбинирование трансформаций.
- Точка трансформации с transform-origin.
- 3D-трансформации и перспектива.
- Переходы с transition-property.
- Длительность перехода с transition-duration.
- Функции плавности с transition-timing-function.
- Задержка с transition-delay.
- Сокращенное свойство transition.
- Переходы для нескольких свойств.
- Создание интерактивных элементов с переходами.
- Производительность трансформаций и переходов.
- Модуль 9: Анимации
- Создание keyframes.
- Свойство animation-name.
- Свойство animation-duration.
- Свойство animation-timing-function.
- Свойство animation-delay.
- Свойство animation-iteration-count.
- Свойство animation-direction.
- Свойство animation-fill-mode.
- Свойство animation-play-state.
- Сокращенное свойство animation.
- Множественные анимации.
- Создание сложных анимаций.
- Анимации с использованием переменных.
- Оптимизация производительности анимаций.
- Анимации и доступность.
- Модуль 10: Адаптивный дизайн
- Относительные единицы измерения (%, em, rem).
- Единицы vh и vw.
- Медиа-запросы: основы.
- Медиа-запросы: max-width и min-width.
- Медиа-запросы: ориентация устройства.
- Медиа-запросы: типы устройств и медиа-функции.
- Mobile-first подход.
- Адаптивные изображения.
- Элемент picture и атрибуты srcset/sizes.
- Адаптивная типографика.
- Адаптивная навигация.
- Адаптивные таблицы.
- Адаптивные формы.
- Отзывчивые медиа (видео, iframe).
- Тестирование адаптивности.
- Модуль 11: Формы и CSS
- Базовая стилизация input и button.
- Стилизация textarea.
- Стилизация состояний форм (:focus, :valid, :invalid).
- Стилизация placeholder.
- Кастомизация radio и checkbox с помощью CSS.
- Стилизация select и option.
- Создание кастомных выпадающих списков.
- Стилизация range input.
- Стилизация file input.
- Валидация форм и стилизация сообщений об ошибках.
- Модуль 12: Современные возможности CSS
- Переменные CSS (Custom Properties).
- Область видимости переменных.
- Функция calc().
- Свойство object-fit для изображений.
- Свойство object-position.
- Scroll Snap.
- Контейнерные запросы (Container Queries).
- Подсеточные элементы (Subgrid).
- Логические свойства (logical properties).
- CSS Houdini (введение).
- Feature Queries (@supports).
- Новые селекторы CSS (is(), where(), has()).
- Модуль 13: Практические проекты
- Создание адаптивной навигационной панели.
- Создание карточек товаров.
- Создание слайдера изображений на CSS.
- Создание табов.
- Создание дропдаун-меню.
- Создание галереи изображений с фильтрами.
- Создание анимированных иконок.
- Создание адаптивного лендинга.
- Создание тёмной темы с CSS-переменными.
- Создание анимированных кнопок.
- Создание анимированных форм.
- Создание сетки изображений с hover-эффектами.
- Создание адаптивного футера.
- Создание макета блога на CSS Grid.
- Создание адаптивного дашборда.
- Создание интерактивной формы с анимациями.
- Создание CSS-арта.
Увеличение интервала между словами
Ваша задача — увеличить расстояние между словами в абзаце текста. Используйте свойство, отвечающее за интервалы между словами, и задайте ему положительное значение в пикселях. Введите имя свойства и значение.
CSS
p {
font-size: 16px;
input1: input2;
}HTML
<p>Это пример текста, где нужно увеличить расстояние между словами.</p>
Используйте свойство `word-spacing` и задайте ему значение `10px`. Не забудьте указать единицу измерения `px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Уменьшение интервала между словами
Теперь попробуйте уменьшить стандартное расстояние между словами в абзаце. Используйте свойство для интервалов между словами и задайте ему отрицательное значение в пикселях. Слова могут начать немного накладываться друг на друга.
CSS
p {
font-size: 18px;
input1: -2px;
}HTML
<p>Этот текст должен иметь уменьшенные интервалы между словами.</p>
Используйте свойство `word-spacing` со значением `-2px`. Отрицательные значения допустимы и уменьшают стандартный интервал.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Использование относительных единиц (em)
Задайте интервал между словами, используя относительную единицу измерения `em`. Установите интервал, равный половине размера шрифта элемента. Введите свойство и значение с единицей измерения.
CSS
.relative-spacing {
font-size: 20px;
input1: input2;
}HTML
<p class="relative-spacing">Интервал между словами здесь должен быть относительным (0.5em).</p>
Используйте свойство `word-spacing` со значением `0.5em`. Единица `em` зависит от текущего размера шрифта элемента (`font-size`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Возврат к нормальному интервалу
В родительском элементе задано увеличенное расстояние между словами. Ваша задача — для вложенного элемента `span` вернуть стандартное (нормальное) расстояние между словами. Введите соответствующее свойство и его значение.
CSS
div {
word-spacing: 15px;
font-size: 16px;
}
span {
font-weight: bold;
input1: input2;
}HTML
<div>Этот текст имеет большой интервал, а <span>этот вложенный текст должен иметь нормальный</span> интервал.</div>
Чтобы сбросить интервал к значению по умолчанию, используйте свойство `word-spacing` со значением `normal`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Применение к конкретному классу
На странице есть несколько абзацев. Примените увеличенный интервал между словами (`8px`) только к абзацу с классом `highlighted`. Допишите селектор и свойство.
CSS
p {
font-size: 14px;
margin-bottom: 10px;
}
input1 {
input2: 8px;
color: #005a9c; /* Цвет не редактируется */
}HTML
<p>Это обычный абзац текста без изменений.</p>
<p class="highlighted">К этому абзацу нужно применить увеличенный интервал между словами.</p>
<p>Это еще один обычный абзац.</p>
Чтобы стилизовать только элемент с классом `highlighted`, используйте селектор `.highlighted`. Затем примените свойство `word-spacing` со значением `8px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Наследование и переопределение
Родительский `div` имеет отрицательный интервал между словами. Один из дочерних абзацев (`p.first`) должен унаследовать это значение, а другой (`p.second`) должен иметь увеличенный интервал (`5px`). Допишите недостающее свойство и значение для второго абзаца.
CSS
.container {
word-spacing: -3px;
font-size: 16px;
}
.first {
/* Наследует word-spacing: -3px; */
color: #555;
}
.second {
input1: input2;
color: #1a1a1a;
}HTML
<div class="container">
<p class="first">Этот абзац наследует отрицательный интервал.</p>
<p class="second">Этот абзац должен иметь увеличенный интервал (5px).</p>
</div>
Свойство `word-spacing` наследуется. Для абзаца с классом `second` нужно явно переопределить унаследованное значение, установив `word-spacing: 5px;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Загрузка...