LabEx
EntrarÚnete

Técnica de Drop Cap Elegante

Beginner

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

Introducción

En este laboratorio, aprenderemos sobre la técnica de Drop Cap en CSS. Drop Cap es una técnica tipográfica utilizada para agregar atractivo visual a la primera letra del primer párrafo. A través de este laboratorio, entenderás cómo utilizar el selector :first-child y el pseudo-elemento ::first-letter para dar estilo a la primera letra de un párrafo de manera única y llamativa.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 92% por parte de los estudiantes.

Drop Cap

Puedes escribir el código en index.html y style.css.

Hace que la primera letra del primer párrafo sea más grande que el resto del texto.

  • Utiliza el selector :first-child para seleccionar solo el primer párrafo.
  • Utiliza el pseudo-elemento ::first-letter para dar estilo al primer elemento del párrafo.
<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;
}

Resumen

¡Felicitaciones! Has completado el laboratorio de Drop Cap. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.