Teoría
Teoría

Los pseudoelementos ::first-line y ::first-letter

Dejemos las cartas un momento y pasemos al texto.

El pseudoelemento first-line aplica estilos a la primera línea del texto. La longitud de esa línea depende de varios factores, como la fuente, el tamaño de la ventana del navegador, el ancho del bloque o el idioma. Admite un conjunto limitado de propiedades, como las relacionadas con la fuente y los colores del texto y del fondo.

Por ejemplo:

p::first-line { }

Del mismo modo, el pseudoelemento first-letter aplica estilos a la primera letra del texto de un elemento. Admite propiedades relacionadas con la fuente, los márgenes, el espacio interior, los bordes, el color y el fondo.

Por ejemplo:

p::first-letter { }

En este ejemplo, float: left sitúa la inicial a la izquierda y permite que el resto del texto fluya a su lado.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Los pseudoelementos ::first-line y ::first-letter</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="paper paper-detailed"> <p>El Texas Hold’em es la variante de póker más popular en la actualidad. Los principales torneos de póker se juegan con esta modalidad. El Texas Hold’em es un juego de póker con cartas comunitarias: todos los jugadores pueden usar esas cartas para formar sus combinaciones.</p> <p>En el Texas Hold’em pueden jugar hasta 10 personas en una mesa. Junto a una de ellas hay una ficha con la letra «D»: es el botón del repartidor. Antes de cada ronda, el botón pasa al siguiente jugador hacia la izquierda.</p> </div> </body> </html>

CSS

/* En Safari y en versiones antiguas de Firefox, el resultado de los pseudoelementos puede no mostrarse, aunque las comprobaciones seguirán funcionando. En Chrome se muestra el resultado y funcionan las comprobaciones. */

ObjetivosRealizado

Pon en cursiva la primera línea de los párrafos.
Asigna a la primera letra de los párrafos un tamaño de fuente y una altura de línea de 30px, la propiedad float: left, el color de texto red, un margen derecho de 5px y la fuente "Times New Roman", serif.