CSS embellit le texte du paragraphe avec Drop Cap_Experience Exchange

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

Si vous pensez que ce n'est pas encore clair, voici une explication détaillée :

Tout d'abord, vous devez disposer de votre propre texte en HTML, que ce soit dans

ou dans d'autres balises de bloc. Vous pouvez lui donner un identifiant, une classe ou une balise directe. Recherchez d'abord le sélecteur. Supposons que l'ID d'un morceau de texte soit un article. Ensuite, le CSS de ce paragraphe doit être écrit depuis le début :

#article:first-letter {……}

:first-letter est une pseudo-classe, utilisée pour définir les propriétés de la feuille de style du premier caractère de l'objet. Cette syntaxe entre dans le cadre de CSS2. Pour plus de détails, voir "Manuel CSS2 chinois"

Parlons de chaque attribut de la phrase en détail. Tout d'abord, nous devons rendre ce mot plus grand que les mots du texte, de sorte que la taille de police qui lui est donnée soit 2,5 fois celle du contenu du texte. Bien entendu, vous pouvez également choisir 3 ou 4 fois, et modifier cela selon vos propres besoins.

#article:first-letter { font-size:2.5em }

Pourquoi utiliser la balise em ? Parce que parfois nos lecteurs devront modifier la taille du texte via la fonction de zoom du navigateur. Si elle est définie sur une taille spécifique, elle sera naturellement disproportionnée. Vous pouvez essayer de changer cela pour voir ce que vous ressentez. La taille est là, mais la police est fausse, alors la police doit être augmentée et la police en gras doit être ajoutée ici.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

D'accord, jusqu'à présent, le premier mot ne semble pas avoir l'intention de couler, donc le point clé ici est float:left; oui, il reste flottant. Nous devons savoir que lorsqu'un objet est défini sur un attribut flottant, il aura les caractéristiques d'un élément de niveau bloc, qu'il s'agisse ou non à l'origine d'un élément de niveau bloc. Le côté du flux de texte environnant qui n'est pas défini entourera cet objet. L'habillage des images dans le texte possède également cette propriété.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

Essayez, avez-vous vu la lettrine ? Bien sûr, vous remarquerez peut-être que c'est un peu désordonné. Y a-t-il un peu plus sur le dessus ? Ne vous inquiétez pas, utilisez le remplissage pour le configurer de manière à ce qu'il y ait plus d'espace en haut du mot, afin que le premier mot affleure la première ligne.

Que puis-je dire d'autre au final ? J'y ai pensé. Une fois, j'ai essayé de faire en sorte que le P dans le résultat a échoué. La conclusion est la suivante : nous ne pouvons pas contrôler le premier caractère du sous-objet à travers une couche d'étiquettes.

Bien entendu, si cette pseudo-classe vous intéresse, il est recommandé de continuer à étudier :

Sélecteur : première ligne { sRules }
Sélecteur 1 Sélecteur 2 : premier-enfant { sRules >