Псевдоэлементы ::first-letter и ::first-line: Тренажер CSS

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

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

Список тем

Стилизация первой буквы абзаца

Ваша задача - применить стили к первой букве абзаца с классом 'lead'. Используйте псевдоэлемент, чтобы сделать первую букву крупнее (размер уже задан) и изменить её цвет на красный. Вам нужно указать правильный селектор с псевдоэлементом.

CSS

.lead {
  font-size: 16px;
  color: #333;
}

input1 {
  color: red;
  font-size: 2.5em; /* Размер не меняем */
}

                     .lead {
  font-size: 16px;
  color: #333;
}

input1 {
  color: red;
  font-size: 2.5em; /* Размер не меняем */
}

HTML

<p class="lead">Это пример текста, у которого нужно стилизовать первую букву. Она должна стать красной и заметно крупнее остального текста.</p>

Для стилизации первой буквы элемента используется псевдоэлемент `::first-letter`. Его нужно добавить к селектору элемента, который вы хотите стилизовать. В данном случае, это абзац с классом 'lead'. Полный селектор будет выглядеть как `.lead::first-letter`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация первой строки абзаца

Теперь стилизуем первую строку абзаца с идентификатором 'intro'. Используйте соответствующий псевдоэлемент, чтобы сделать текст первой строки жирным (свойство `font-weight` уже задано) и преобразовать его в верхний регистр (свойство `text-transform` уже задано). Вам нужно вставить только имя псевдоэлемента.

CSS

#intro {
  font-family: sans-serif;
  line-height: 1.5;
}

#intro::input1 {
  font-weight: bold; /* Не меняем */
  text-transform: uppercase; /* Не меняем */
}

                     #intro {
  font-family: sans-serif;
  line-height: 1.5;
}

#intro::input1 {
  font-weight: bold; /* Не меняем */
  text-transform: uppercase; /* Не меняем */
}

HTML

<p id="intro">Это вводный абзац текста. Первая строка этого абзаца должна быть отформатирована особым образом: стать жирной и в верхнем регистре. Остальной текст абзаца остается без изменений.</p>

Для стилизации первой строки элемента используется псевдоэлемент `::first-line`. Добавьте его к селектору `#intro`, чтобы применить стили.

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

Результат

Сообщения

Выполнить

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

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

Добавление плавающей буквицы

Создайте эффект 'буквицы' для первого абзаца статьи (элемент `p` внутри `div` с классом 'article'). Первая буква должна 'плавать' слева от текста. Для этого нужно использовать псевдоэлемент `::first-letter` и добавить свойство, отвечающее за обтекание элемента.

CSS

.article p {
  text-align: justify;
}

.article p::first-letter {
  font-size: 3em; /* Не меняем */
  color: navy;
  margin-right: 5px; /* Не меняем */
  input1: left; 
}

                     .article p {
  text-align: justify;
}

.article p::first-letter {
  font-size: 3em; /* Не меняем */
  color: navy;
  margin-right: 5px; /* Не меняем */
  input1: left; 
}

HTML

<div class="article">
  <p>Начало интересной статьи. Первая буква этого абзаца должна стать большой буквицей, расположенной слева от основного текста, который будет ее обтекать. Это распространенный типографский прием.</p>
  <p>Второй абзац статьи, его первая буква не должна быть затронута.</p>
</div>

Используйте псевдоэлемент `::first-letter` для селектора `div.article p`. Чтобы буква обтекалась текстом слева, примените свойство `float` со значением `left`.

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

Результат

Сообщения

Выполнить

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

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

Изменение цвета и стиля первой строки

Сделайте первую строку всех абзацев `<p>` внутри элемента с классом 'note' зеленой и курсивной. Вам нужно дописать селектор с псевдоэлементом и указать свойство для курсивного начертания.

CSS

.note p {
  margin-bottom: 1em;
}

input1 {
  color: green;
  input2: italic;
}

                     .note p {
  margin-bottom: 1em;
}

input1 {
  color: green;
  input2: italic;
}

HTML

<div class="note">
  <p>Это важное примечание. Первая строка этого примечания должна быть зеленой и курсивной, чтобы привлечь внимание читателя к началу текста.</p>
  <p>Еще одно примечание в том же блоке. Его первая строка также должна быть зеленой и курсивной.</p>
</div>

Селектор должен выбирать все `p` внутри `.note` и применять псевдоэлемент `::first-line`. Это будет `.note p::first-line`. Для установки курсивного начертания используйте свойство `font-style` со значением `italic`.

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

Результат

Сообщения

Выполнить

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

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

Одновременное использование ::first-letter и ::first-line

Примените стили одновременно к первой букве и первой строке абзаца с классом 'highlight'. Первая буква должна быть крупной и оранжевой, а вся первая строка (включая первую букву) должна иметь светло-желтый фон. Допишите оба псевдоэлемента.

CSS

.highlight {
  font-family: 'Georgia', serif;
}

.highlight::input1 {
  color: orange;
  font-size: 3em; /* Не меняем */
  float: left;
  margin-right: 4px; /* Не меняем */
  line-height: 0.8;
}

.highlight::input2 {
  background-color: lightyellow; /* Не меняем */
}

                     .highlight {
  font-family: 'Georgia', serif;
}

.highlight::input1 {
  color: orange;
  font-size: 3em; /* Не меняем */
  float: left;
  margin-right: 4px; /* Не меняем */
  line-height: 0.8;
}

.highlight::input2 {
  background-color: lightyellow; /* Не меняем */
}

HTML

<p class="highlight">Этот абзац демонстрирует совместное использование псевдоэлементов. Первая буква должна быть большой и оранжевой, а вся первая строка, включая эту букву, должна иметь светло-желтый фон.</p>

Вам нужно создать два правила: одно для `.highlight::first-letter` (для стилизации буквы) и второе для `.highlight::first-line` (для стилизации строки). Обратите внимание, что стили `::first-letter` имеют приоритет над стилями `::first-line` для самой первой буквы.

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

Результат

Сообщения

Выполнить

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

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

Стилизация ::first-letter с фоном и отступами

Сделайте первую букву элемента `blockquote` более выразительной. Добавьте ей темно-синий фон (`background-color`), белый цвет текста (`color`), внутренние отступы (`padding`) 5px со всех сторон и небольшой правый отступ (`margin-right`) 8px. Вам нужно вставить названия свойств для фона и внутреннего отступа.

CSS

blockquote {
  border-left: 3px solid #ccc;
  padding-left: 15px;
  margin-left: 10px;
  font-style: italic;
}

blockquote::first-letter {
  input1: navy;
  color: white;
  input2: 5px;
  margin-right: 8px; /* Не меняем */
  font-size: 1.5em; /* Не меняем */
  font-style: normal; /* Убираем курсив для буквы */
  font-weight: bold;
}

                     blockquote {
  border-left: 3px solid #ccc;
  padding-left: 15px;
  margin-left: 10px;
  font-style: italic;
}

blockquote::first-letter {
  input1: navy;
  color: white;
  input2: 5px;
  margin-right: 8px; /* Не меняем */
  font-size: 1.5em; /* Не меняем */
  font-style: normal; /* Убираем курсив для буквы */
  font-weight: bold;
}

HTML

<blockquote>Цитата, первая буква которой должна быть выделена фоном и отступами. Это сделает ее похожей на инициал в старинных книгах, но в более современном стиле.</blockquote>

Используйте псевдоэлемент `::first-letter` для селектора `blockquote`. Для установки цвета фона используйте свойство `background-color` (или `background`). Для внутренних отступов используйте свойство `padding`.

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

Результат

Сообщения

Выполнить

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

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

Увеличение межбуквенного расстояния для ::first-line

Для всех абзацев `<p>` увеличьте расстояние между буквами в первой строке на 2 пикселя. Используйте соответствующий псевдоэлемент и свойство для управления межбуквенным интервалом.

CSS

p {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

p::first-line {
  color: #555;
  input1: 2px;
}

                     p {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

p::first-line {
  color: #555;
  input1: 2px;
}

HTML

<p>В этом абзаце первая строка должна выглядеть немного разреженной из-за увеличенного расстояния между буквами. Это может использоваться для акцентирования начала текста или просто как стилистический прием.</p>
<p>Второй абзац для проверки, что стиль применяется ко всем абзацам. Его первая строка также должна иметь увеличенное межбуквенное расстояние.</p>

Примените псевдоэлемент `::first-line` к селектору `p`. Для изменения расстояния между буквами используется свойство `letter-spacing`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация первой буквы заголовка

Примените стили к первой букве заголовка `h2` с классом 'section-title'. Сделайте ее другого цвета (пурпурный) и немного увеличьте размер относительно остального текста заголовка (множитель `1.2em` уже задан). Допишите селектор с псевдоэлементом.

CSS

.section-title {
  font-family: 'Times New Roman', serif;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

input1 {
  color: purple;
  font-size: 1.2em; /* Не меняем */
}

                     .section-title {
  font-family: 'Times New Roman', serif;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

input1 {
  color: purple;
  font-size: 1.2em; /* Не меняем */
}

HTML

<h2 class="section-title">Заголовок раздела</h2>
<p>Текст после заголовка...</p>

Заголовки (h1-h6) являются блочными элементами, поэтому к ним можно применять `::first-letter`. Создайте правило для селектора `h2.section-title::first-letter`.

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

Результат

Сообщения

Выполнить

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

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

Применение ::first-line к элементу списка

Стилизуйте первую строку каждого элемента списка `li` внутри упорядоченного списка `<ol>` с классом 'steps'. Первая строка должна быть выделена полужирным начертанием. Допишите селектор с псевдоэлементом.

CSS

.steps {
  margin-left: 20px;
}

.steps li {
  margin-bottom: 10px;
}

input1 {
  font-weight: bold; /* Не меняем */
}

                     .steps {
  margin-left: 20px;
}

.steps li {
  margin-bottom: 10px;
}

input1 {
  font-weight: bold; /* Не меняем */
}

HTML

<ol class="steps">
  <li>Первый шаг инструкции. Первая строка этого шага должна быть полужирной, чтобы выделить начало описания действия.</li>
  <li>Второй шаг. Аналогично, первая строка должна быть полужирной. Убедитесь, что текст достаточно длинный для переноса строки.</li>
  <li>Третий и последний шаг. Его первая строка также должна быть выделена.</li>
</ol>

Элементы списка `li` по умолчанию являются блочными (display: list-item), поэтому к ним можно применять `::first-line`. Селектор будет `.steps li::first-line`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация ::first-letter с изображением

Рядом с изображением находится описание (абзац с классом 'caption'). Сделайте первую букву этого описания большой (размер 3em), жирной и цвета #B22222 (Firebrick). Изображение и текст уже расположены рядом. Вам нужно добавить селектор с псевдоэлементом и свойство для жирного начертания.

CSS

.image-container {
  margin-bottom: 15px;
}

.image-container img {
  float: left;
  width: 60px; /* Не меняем */
  height: auto;
  margin-right: 10px; /* Не меняем */
}

.caption {
  overflow: hidden; /* Для containment float */
  font-size: 14px;
}

input1 {
  font-size: 3em; /* Не меняем */
  color: #B22222; /* Не меняем */
  input2: bold;
  line-height: 1;
}

                     .image-container {
  margin-bottom: 15px;
}

.image-container img {
  float: left;
  width: 60px; /* Не меняем */
  height: auto;
  margin-right: 10px; /* Не меняем */
}

.caption {
  overflow: hidden; /* Для containment float */
  font-size: 14px;
}

input1 {
  font-size: 3em; /* Не меняем */
  color: #B22222; /* Не меняем */
  input2: bold;
  line-height: 1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Пример картинки">
  <p class="caption">Описание к картинке. Первая буква этого описания должна быть большой, жирной и красного цвета, создавая акцент рядом с изображением.</p>
</div>

Используйте селектор `.caption::first-letter`. Для установки жирного начертания примените свойство `font-weight` со значением `bold`.

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

Результат

Сообщения

Выполнить

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

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

Трансформация текста первой строки

Для абзаца с классом 'formal-greeting' преобразуйте текст первой строки так, чтобы каждое слово начиналось с заглавной буквы. Используйте псевдоэлемент `::first-line` и соответствующее значение для свойства `text-transform`.

CSS

.formal-greeting {
  font-style: italic;
}

.formal-greeting::first-line {
  input1: capitalize;
}

                     .formal-greeting {
  font-style: italic;
}

.formal-greeting::first-line {
  input1: capitalize;
}

HTML

<p class="formal-greeting">уважаемые дамы и господа, позвольте приветствовать вас на нашем мероприятии. первая строка этого приветствия должна быть отформатирована так, чтобы каждое слово начиналось с большой буквы.</p>

Примените псевдоэлемент `::first-line` к селектору `.formal-greeting`. Чтобы каждое слово начиналось с заглавной буквы, используйте свойство `text-transform` со значением `capitalize`.

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

Результат

Сообщения

Выполнить

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

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

Сброс стилей ::first-letter для вложенных элементов

Внутри блока `div` с классом 'outer' есть абзац `p`. Мы хотим применить стиль буквицы к этому абзацу. Однако, если внутри абзаца есть `span`, его первая буква не должна наследовавать все стили буквицы (например, размер). Задача: применить стиль буквицы к `p.inner`, но для `span` внутри него вернуть нормальный размер шрифта. Допишите селектор для `::first-letter` абзаца.

CSS

.outer {
  border: 1px solid gray;
  padding: 10px;
}

input1 {
  font-size: 3em; /* Не меняем */
  color: green;
  float: left;
  margin-right: 5px; /* Не меняем */
}

/* Это правило показывает, как можно было бы сбросить стиль для span, но оно не является частью задания */
/* p.inner span::first-letter {
  font-size: inherit; 
  color: inherit;
  float: none;
  margin: 0;
} */

                     .outer {
  border: 1px solid gray;
  padding: 10px;
}

input1 {
  font-size: 3em; /* Не меняем */
  color: green;
  float: left;
  margin-right: 5px; /* Не меняем */
}

/* Это правило показывает, как можно было бы сбросить стиль для span, но оно не является частью задания */
/* p.inner span::first-letter {
  font-size: inherit; 
  color: inherit;
  float: none;
  margin: 0;
} */

HTML

<div class="outer">
  <p class="inner"><span>Начало</span> текста в абзаце. Первая буква 'Н' должна стать большой зеленой буквицей. Обратите внимание, как это влияет на слово внутри span.</p>
</div>

Сначала примените стили к `p.inner::first-letter`. Затем, чтобы сбросить размер шрифта для первой буквы `span` внутри `p`, можно добавить правило `p.inner span::first-letter { font-size: inherit; }`. Однако, в данном задании требуется только указать селектор для основной буквицы.

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

Результат

Сообщения

Выполнить

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

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