LabEx
EntrarJunte-se

Técnica Drop Cap Elegante

Beginner

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

Introdução

Neste laboratório, aprenderemos sobre a técnica Drop Cap em CSS. Drop Cap é uma técnica tipográfica utilizada para adicionar apelo visual à primeira letra do primeiro parágrafo. Através deste laboratório, você entenderá como usar o seletor :first-child e o pseudo-elemento ::first-letter para estilizar a primeira letra de um parágrafo de uma maneira única e atraente.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 92% dos estudantes.

Drop Cap

Você pode escrever o código em index.html e style.css.

Torna a primeira letra do primeiro parágrafo maior que o restante do texto.

  • Use o seletor :first-child para selecionar apenas o primeiro parágrafo.
  • Use o pseudo-elemento ::first-letter para estilizar o primeiro elemento do parágrafo.
<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;
}

Resumo

Parabéns! Você concluiu o laboratório Drop Cap. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.