LabEx
ВходРегистрация

Стильная техника Drop Cap

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы узнаем о технике Drop Cap в CSS. Drop Cap - это типографическая техника, используемая для придания визуального привлекательности первому символу первого абзаца. В ходе этого практического занятия вы поймете, как использовать селектор :first-child и псевдо-элемент ::first-letter для стилизации первого символа абзаца в уникальном и захватывающем стиле.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 92% положительных отзывов от учащихся.

Drop Cap

Вы можете писать код в index.html и style.css.

Делает первый символ первого абзаца крупнее остального текста.

  • Используйте селектор :first-child, чтобы выбрать только первый абзац.
  • Используйте псевдо-элемент ::first-letter, чтобы стилизовать первый элемент абзаца.
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>

p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

Резюме

Поздравляем! Вы завершили практическое занятие по Drop Cap. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.