Personnaliser les guillemets avec CSS

Introduction

Dans ce laboratoire, nous allons explorer la propriété quotes en CSS, qui nous permet de personnaliser les guillemets utilisés pour les citations en ligne. Nous allons apprendre à utiliser cette propriété pour définir nos propres caractères de guillemets d'ouverture et de fermeture, et les appliquer à des éléments <q> dans notre HTML. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'ajouter une touche personnelle à la mise en forme de vos pages web.

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 100% de la part des apprenants.

Guillemets stylisés

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour personnaliser les guillemets d'inline, modifiez la propriété quotes à l'intérieur d'un élément <q>.

Par exemple :

<p><q>Do or do not, there is no try.</q> – Yoda</p>

peut être stylisé avec des guillemets droits en utilisant le CSS :

q {
  quotes: "“" "”";
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Guillemets stylisés. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.