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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") subgraph Lab Skills css/selectors -.-> lab-35245{{"Comillas de cita con estilo"}} end

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.