recherche

Maison >interface Web >tutoriel CSS >Comment utiliser la première lettre en CSS

Comment utiliser la première lettre en CSS

不言
不言original
2018-12-08 15:28:324115parcourir

L'utilisation de First-letter peut appliquer le style au premier caractère de l'élément de bloc, qui peut être utilisé pour sélectionner la première lettre du sélecteur spécifié. Alors, comment pouvons-nous utiliser la première lettre dans. CSS ? Examinons de plus près l'utilisation de la première lettre.

L'image suivante a l'effet "première lettre" appliqué

Comment utiliser la première lettre en CSS

Seul le premier caractère est coloré et la taille de la police est définie sur 300 %.

Jetons ensuite un coup d'œil à l'utilisation spécifique de première lettre

la première lettre s'écrit comme suit

p：Comment utiliser la première lettre en CSS{
   / *描述你想要应用的CSS样式* / 
 }

C'est fait by L'élément de bloc spécifié par p.

Il pointe vers le p de la balise

, vous pouvez le changer en h1 si vous souhaitez appliquer la balise

.

Regardons un exemple spécifique

Le code est le suivant

Code HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>Comment utiliser la première lettre en CSS</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <p>
    </p>
  </body>
</html>

CSS code

sample.css

p:Comment utiliser la première lettre en CSS{
  color:#5bc0de;
  font-size:300%;
}

Le résultat d'exécution

affiche l'effet suivant sur le navigateur

Comment utiliser la première lettre en CSS

p est suivi de ":" (deux-points), et non de "."

Cela ne s'appliquera pas du tout si vous faites simplement une erreur, alors soyez prudent.

Et, comme mentionné précédemment, p est un élément bloc. L'élément block fait référence au p de la balise

. Si vous souhaitez l'appliquer à

, remplacez-le simplement par h1.

Le style CSS que nous avons écrit dans {}. Autrement dit, écrivez simplement le style que vous souhaitez le plus appliquer au premier caractère.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser box-shadow pour créer un effet de bordureArticle suivant：Comment utiliser box-shadow pour créer un effet de bordure

Articles Liés

Voir plus