Personaliza las comillas de cita con CSS

Introducción

En este laboratorio, exploraremos la propiedad quotes en CSS, que nos permite personalizar las comillas usadas para las citas en línea. Aprenderemos a usar esta propiedad para definir nuestros propios caracteres de apertura y cierre de comillas y aplicarlas a los elementos <q> en nuestro HTML. Al final de este laboratorio, tendrás una mejor comprensión de cómo agregar un toque personal al estilo de tus páginas web.

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 100% por parte de los estudiantes.

Comillas de cita con estilo

index.html y style.css ya se han proporcionado en la máquina virtual.

Para personalizar las comillas de cita en línea, modifica la propiedad quotes dentro de un elemento <q>.

Por ejemplo:

<p><q>Do or do not, there is no try.</q> – Yoda</p>

se puede dar estilo con comillas en forma de curva usando CSS:

q {
  quotes: "“" "”";
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Comillas de cita con estilo. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.