Dominando la selección de texto personalizada con CSS

Introducción

En este laboratorio, exploraremos el mundo de la programación CSS y aprenderemos cómo dar estilo a las páginas web utilizando diversas propiedades y selectores CSS. El objetivo de este laboratorio es brindar experiencia práctica a desarrolladores principiantes y de nivel intermedio para mejorar sus habilidades en la creación de páginas web visualmente atractivas. A través de este laboratorio, también aprenderá cómo solucionar problemas comunes de CSS y utilizar las mejores prácticas en su codificación.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35188{{"Selección de texto personalizada"}} css/text_styling -.-> lab-35188{{"Selección de texto personalizada"}} css/backgrounds -.-> lab-35188{{"Selección de texto personalizada"}} css/pseudo_elements -.-> lab-35188{{"Selección de texto personalizada"}} end

Selección de texto personalizada

index.html y style.css ya se han proporcionado en la VM.

Para modificar el estilo del texto seleccionado, utilice el pseudo-seleccionador ::selection. Aquí hay un fragmento de código de ejemplo para seleccionar y dar estilo al texto dentro de un elemento párrafo:

<p class="custom-text-selection">Selecciona un poco de este texto.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

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 Selección de texto personalizada. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.