Трансформация текста (text-transform): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании CSS-свойства `text-transform`. Это свойство позволяет изменять регистр текста: делать все буквы заглавными, строчными или начинать каждое слово с заглавной буквы. Вам будут предложены HTML-фрагменты и CSS-стили с пропусками, которые нужно заполнить правильными значениями или свойствами, чтобы добиться нужного визуального эффекта. Задания идут от простого применения свойства к более сложным случаям, включая комбинации с другими селекторами и сброс трансформации для вложенных элементов.

Список тем

Заголовок заглавными буквами

Ваша задача - изменить стиль заголовка `<h1>` так, чтобы весь его текст отображался заглавными буквами. Заполните пропуски в CSS-коде, чтобы применить соответствующую трансформацию текста.

CSS

h1 {
  /* Преобразование текста в заглавные буквы */
  input1: input2;
  color: #333; 
}

                     h1 {
  /* Преобразование текста в заглавные буквы */
  input1: input2;
  color: #333; 
}

HTML

<h1>пример заголовка</h1>
<p>Этот текст не должен измениться.</p>

Чтобы преобразовать весь текст в заглавные буквы, используйте CSS-свойство `text-transform` со значением `uppercase`. Вам нужно указать и само свойство, и его значение в соответствующих полях.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Параграф строчными буквами

Необходимо стилизовать параграф с классом `lowercase-text` так, чтобы весь его текст отображался строчными (маленькими) буквами, независимо от исходного регистра. Допишите недостающее CSS-свойство.

CSS

.lowercase-text {
  /* Преобразование текста в строчные буквы */
  input1: lowercase;
  font-style: italic; 
}

                     .lowercase-text {
  /* Преобразование текста в строчные буквы */
  input1: lowercase;
  font-style: italic; 
}

HTML

<p class="lowercase-text">ЭТОТ ТЕКСТ НУЖНО СДЕЛАТЬ СТРОЧНЫМ.</p>
<p>Обычный текст без изменений.</p>

Для преобразования текста в строчные буквы используется значение `lowercase` свойства `text-transform`. В данном задании пропущено только имя свойства.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Капитализация названий

Сделайте так, чтобы каждое слово в элементах списка `<li>` внутри блока с классом `product-list` начиналось с заглавной буквы. Заполните пропущенное значение CSS-свойства.

CSS

.product-list li {
  /* Каждое слово с заглавной буквы */
  text-transform: input1;
  padding: 5px 0; 
}

                     .product-list li {
  /* Каждое слово с заглавной буквы */
  text-transform: input1;
  padding: 5px 0; 
}

HTML

<ul class="product-list">
  <li>яблочный сок</li>
  <li>молочный шоколад</li>
  <li>свежий хлеб</li>
</ul>

Чтобы сделать первую букву каждого слова заглавной, используйте значение `capitalize` для свойства `text-transform`. Вам нужно вписать только это значение.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные трансформации для разных элементов

Примените разные стили трансформации текста: заголовок `<h2>` должен быть капитализирован (каждое слово с большой буквы), а параграф `<p>` должен быть полностью в верхнем регистре. Заполните пропуски.

CSS

h2 {
  /* Каждое слово с заглавной буквы */
  text-transform: input1;
  color: navy; 
}

p {
  /* Все буквы заглавные */
  text-transform: input2;
  line-height: 1.5; 
}

                     h2 {
  /* Каждое слово с заглавной буквы */
  text-transform: input1;
  color: navy; 
}

p {
  /* Все буквы заглавные */
  text-transform: input2;
  line-height: 1.5; 
}

HTML

<h2>важное объявление</h2>
<p>просьба ознакомиться с информацией.</p>

Для заголовка `<h2>` используйте `text-transform: capitalize;`. Для параграфа `<p>` используйте `text-transform: uppercase;`. Заполните пропущенные значения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отмена трансформации для вложенного элемента

Весь текст внутри `div` с классом `promo-block` должен быть в верхнем регистре, кроме текста внутри элемента `<span>`, который должен отображаться как есть (без трансформации). Заполните пропуски в CSS.

CSS

.promo-block {
  text-transform: uppercase;
  border: 1px solid #ccc; 
  padding: 10px; 
}

.promo-block span {
  /* Отмена трансформации */
  input1: input2;
  font-weight: bold; 
  color: red; 
}

                     .promo-block {
  text-transform: uppercase;
  border: 1px solid #ccc; 
  padding: 10px; 
}

.promo-block span {
  /* Отмена трансформации */
  input1: input2;
  font-weight: bold; 
  color: red; 
}

HTML

<div class="promo-block">
  Только сегодня! <span>Скидка 50%</span> на все товары!
</div>

Сначала примените `text-transform: uppercase;` к классу `promo-block`. Затем для вложенного `span` используйте `text-transform: none;`, чтобы отменить трансформацию родителя. Вам нужно указать свойство и значение для `span`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Трансформация по классам

Задайте стили для трех разных классов: `.uppercase-me` должен делать текст заглавными, `.capitalize-me` - капитализировать, а `.lowercase-me` - делать строчными. Заполните все пропуски.

CSS

.uppercase-me {
  /* Верхний регистр */
  input1: input2;
}

.capitalize-me {
  /* Капитализация */
  input3: capitalize;
}

.lowercase-me {
  /* Нижний регистр */
  text-transform: input4;
}

                     .uppercase-me {
  /* Верхний регистр */
  input1: input2;
}

.capitalize-me {
  /* Капитализация */
  input3: capitalize;
}

.lowercase-me {
  /* Нижний регистр */
  text-transform: input4;
}

HTML

<p class="uppercase-me">Этот текст должен быть заглавными.</p>
<p class="capitalize-me">этот текст должен быть капитализирован.</p>
<p class="lowercase-me">ЭТОТ ТЕКСТ ДОЛЖЕН БЫТЬ СТРОЧНЫМИ.</p>

Используйте свойство `text-transform` с соответствующими значениями: `uppercase` для `.uppercase-me`, `capitalize` для `.capitalize-me` и `lowercase` для `.lowercase-me`. Заполните пропущенные свойства и значения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация аббревиатур

Часто аббревиатуры пишут заглавными буквами. Используйте `text-transform`, чтобы все элементы `<abbr>` отображались в верхнем регистре. Заполните пропуски.

CSS

abbr {
  /* Аббревиатуры заглавными */
  input1: input2;
  /* Дополнительные стили для наглядности */
  border-bottom: 1px dotted blue; 
  cursor: help; 
}

                     abbr {
  /* Аббревиатуры заглавными */
  input1: input2;
  /* Дополнительные стили для наглядности */
  border-bottom: 1px dotted blue; 
  cursor: help; 
}

HTML

<p>Изучаем <abbr title="HyperText Markup Language">html</abbr> и <abbr title="Cascading Style Sheets">css</abbr>.</p>
<p>Скоро узнаем про <abbr title="JavaScript">js</abbr>.</p>

Чтобы стилизовать все элементы `<abbr>`, используйте селектор `abbr`. Примените к нему свойство `text-transform` со значением `uppercase`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку