Introduction
Dans ce laboratoire, nous allons apprendre à connaître la technique de la majuscule initiale en CSS. La majuscule initiale est une technique typographique utilisée pour ajouter un charme visuel à la première lettre du premier paragraphe. Grâce à ce laboratoire, vous allez comprendre comment utiliser le sélecteur :first-child et le pseudo-élément ::first-letter pour styliser la première lettre d'un paragraphe d'une manière unique et captivante.
Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 92% de la part des apprenants.
Majuscule initiale
Vous pouvez écrire le code dans
index.htmletstyle.css.
Rend la première lettre du premier paragraphe plus grande que le reste du texte.
- Utilisez le sélecteur
:first-childpour sélectionner uniquement le premier paragraphe. - Utilisez le pseudo-élément
::first-letterpour styliser le premier élément du paragraphe.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
amet congue erat sodales commodo.
</p>
<p>
Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>
p:first-child::first-letter {
color: #5f79ff;
float: left;
margin: 0 8px 0 4px;
font-size: 3rem;
font-weight: bold;
line-height: 1;
}
Sommaire
Félicitations ! Vous avez terminé le laboratoire de la majuscule initiale. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.