Utilisation des Sélecteurs CSS : Première Lettre et Première Ligne

sélecteurs de première ligne et de première lettre
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 2
Revoir le teaser Je m'abonne
1,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
1,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Apprendre à utiliser et à appliquer les sélecteurs CSS first-letter et first-line pour améliorer la mise en forme des paragraphes.

Découvrez comment utiliser les sélecteurs first-letter et first-line en CSS pour styliser la première lettre et la première ligne de vos paragraphes.

Nous allons à présent étudier les sélecteurs CSS permettant de cibler spécifiquement la première lettre ou la première ligne d'un paragraphe. Ces sélecteurs sont simples et faciles à utiliser. Ce sont des pseudo-classes que nous avons déjà aperçues lors de l'étude des sélecteurs de liens. Pour sélectionner la première lettre, nous utilisons le sélecteur p::first-letter. Nous pouvons ensuite appliquer des styles tels que la couleur ou la taille de la police. Par exemple, pour changer la couleur de la première lettre en rouge et augmenter sa taille à 35 pixels, nous écrivons : p::first-letter { color: red; font-size: 35px; }. Cela permet de créer une jolie lettrine pour nos textes.

En ce qui concerne la première ligne, nous utilisons le sélecteur p::first-line. Comme pour first-letter, nous pouvons appliquer différents styles. Ce sélecteur est particulièrement adapté lorsque la taille de la fenêtre du navigateur change, car il adapte automatiquement la sélection de la première ligne en fonction de l'espace disponible. Par exemple, pour définir la première ligne en vert, nous utilisons : p::first-line { color: green; }.

Ces sélecteurs sont très utiles pour améliorer la lisibilité et l'esthétique de vos pages web. Bien que ces syntaxes soient compatibles avec la plupart des navigateurs modernes, il est recommandé d'utiliser la notation la plus universelle pour garantir la meilleure compatibilité.

Voir plus
Questions réponses
Quel sélecteur CSS permet de sélectionner la première lettre d'un paragraphe ?
Le sélecteur first-letter permet de sélectionner la première lettre d'un paragraphe.
Quel sélecteur CSS permet de sélectionner la première ligne d'un paragraphe ?
Le sélecteur p::first-line permet de sélectionner la première ligne d'un paragraphe.
Comment ces sélecteurs s'adaptent-ils lorsque la taille de la fenêtre du navigateur change ?
Les sélecteurs first-line adaptent la sélection en fonction de l'espace disponible, garantissant que la première ligne reste stylisée correctement malgré les changements de taille de la fenêtre.
1 commentaire
1,0
1 vote
5
4
3
2
1
eve.bertieaux
Il y a 2 years
Commentaire
C'est vraiment dommage que lors de la démonstration HTML et CSS soient mélangés, je ne sais plus à un moment donné si c'est dans l'un ou l'autre, du coup je n'ai pas le résultat attendu