Семейство шрифта и базовые свойства текста: Тренажер CSS

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

В этом тренажере вы попрактикуетесь в использовании CSS-свойств для управления шрифтами и базовым форматированием текста. Вам будут предложены HTML-фрагменты и CSS-код с пропусками. Ваша задача — заполнить пропуски, чтобы добиться желаемого визуального результата. Задания охватывают такие свойства, как `font-family`, `font-size`, `font-weight`, `font-style`, `text-align`, `text-decoration`, `text-transform`, `line-height`, `letter-spacing` и `color`. Внимательно читайте описания и экспериментируйте!

Список тем

Изменение семейства шрифта

Измените шрифт основного текста на странице на 'Arial'. Если 'Arial' недоступен, используйте любой шрифт без засечек (sans-serif).

CSS

body {
  font-family: input1, input2;
}

                     body {
  font-family: input1, input2;
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Основной текст страницы.</p>
</body>

Используйте свойство `font-family`. Укажите 'Arial' в качестве основного шрифта, а затем общее семейство `sans-serif` в качестве запасного.

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

Результат

Сообщения

Выполнить

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

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

Изменение размера шрифта

Установите размер шрифта для основного текста (тег `<p>`) равным 16 пикселям.

CSS

p {
  font-size: input1;
}

                     p {
  font-size: input1;
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Основной текст страницы.</p>
</body>

Используйте свойство `font-size` для тега `<p>`.

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

Результат

Сообщения

Выполнить

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

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

Жирный заголовок

Сделайте текст заголовка (тег `<h1>`) жирным.

CSS

h1 {
  font-weight: input1;
}

                     h1 {
  font-weight: input1;
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Текст.</p>
</body>

Используйте свойство `font-weight` со значением `bold`.

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

Результат

Сообщения

Выполнить

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

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

Курсивный текст

Сделайте текст внутри тега `<em>` курсивным.

CSS

em {
  font-style: input1;
}

                     em {
  font-style: input1;
}

HTML

<body>
  <p>Это <em>важный</em> текст.</p>
</body>

Используйте свойство `font-style` со значением `italic`.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание текста по центру

Выровняйте текст заголовка (тег `<h1>`) по центру.

CSS

h1 {
  text-align: input1;
}

                     h1 {
  text-align: input1;
}

HTML

<body>
  <h1>Заголовок</h1>
</body>

Используйте свойство `text-align` со значением `center`.

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

Результат

Сообщения

Выполнить

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

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

Подчеркнутый текст

Добавьте подчеркивание для ссылок (тег `<a>`).

CSS

a {
  text-decoration: input1;
}

                     a {
  text-decoration: input1;
}

HTML

<body>
  <p>Это <a href="#">ссылка</a>.</p>
</body>

Используйте свойство `text-decoration` со значением `underline`.

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

Результат

Сообщения

Выполнить

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

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

Заглавные буквы

Сделайте все буквы в заголовке (тег `<h1>`) заглавными.

CSS

h1 {
  input1: uppercase;
}

                     h1 {
  input1: uppercase;
}

HTML

<body>
  <h1>Заголовок</h1>
</body>

Используйте свойство `text-transform` со значением `uppercase`.

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

Результат

Сообщения

Выполнить

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

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

Увеличенный интервал между строками

Увеличьте межстрочный интервал для основного текста (тег `<p>`) до 1.5.

CSS

p {
  input1: 1.5;
}

                     p {
  input1: 1.5;
}

HTML

<body>
 <p>Многострочный текст.<br>Вторая строка.<br>Третья строка.</p>
</body>

Используйте свойство `line-height`. Значение 1.5 означает, что интервал будет в 1.5 раза больше размера шрифта.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование свойств

Для абзацев (тег `<p>`) установите шрифт 'Georgia', размер 18px, жирное начертание и красный цвет.

CSS

p {
  font-family: input1;
  font-size: input2;
  font-weight: input3;
  color: input4;
}

                     p {
  font-family: input1;
  font-size: input2;
  font-weight: input3;
  color: input4;
}

HTML

<body>
  <p>Текст абзаца.</p>
</body>

Используйте свойства `font-family`, `font-size`, `font-weight` и `color`.

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

Результат

Сообщения

Выполнить

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

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

Межбуквенный интервал

Увеличьте межбуквенный интервал для текста в классе `.special-text`.

CSS

.special-text {
 letter-spacing: input1;
}

                     .special-text {
 letter-spacing: input1;
}

HTML

<p class="special-text">Этот текст имеет увеличенный межбуквенный интервал.</p>

Используйте свойство `letter-spacing`. Попробуйте значение `2px`.

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

Результат

Сообщения

Выполнить

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

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

Убираем подчеркивание у ссылок и делаем цвет черным

Уберите подчеркивание у ссылок и сделайте цвет текста ссылок черным, при наведении курсора мыши, ссылка должна стать красной и подчеркнутой.

CSS

a {
  text-decoration: input1;
 color: input2;
}

a:hover{
 text-decoration: input3;
 color: input4;
}

                     a {
  text-decoration: input1;
 color: input2;
}

a:hover{
 text-decoration: input3;
 color: input4;
}

HTML

<a href="https://naytikurs.ru">Ссылка</a>

Используйте свойство `text-decoration: none;` чтобы убрать подчеркивание, `color: black;` чтобы сделать текст черным, `:hover` псевдокласс для стилизации при наведении и внутри добавьте `text-decoration: underline;` и `color: red;`

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

Результат

Сообщения

Выполнить

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

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