Paragraph Dropcap avec les éléments CSS de première ligne et de première lettre
Je pense que certains sélecteurs ou propriétés CSS sont rarement utilisés dans la nature, mais ils existent depuis l’époque de CSS1; certains d'entre eux incluent le :Première ligne et :première lettre éléments pesudo.
Comment utiliser?
Ces pseudo-éléments fonctionnent fondamentalement de la même manière que leurs frères et soeurs -: before et: after - et je pense qu’ils sont également assez simples. le :première lettre ciblera la première lettre ou le caractère d'un élément sélectionné, cette pseudo-élément est couramment utilisé pour créer un effet typographique tel qu'une lettrine. Voici comment c'est fait.
p: première lettre font-size: 50px;
Ce code a pour résultat la présentation suivante.
Il convient de noter quelques éléments. Cependant, cet effet ne s'appliquera que si le premier caractère n'est pas précédé d'un autre élément, par exemple une image. De plus, lorsque nous avons quelques-uns des mêmes éléments ciblés dans une rangée, ils seront tous également affectés..
En outre, en termes de :Première ligne, ce pseudo-élément ciblera la première ligne de l'élément ciblé, cet exemple ci-dessous montre comment nous mettons en gras la première ligne du paragraphe.
p: première ligne font-weight: bold;
Comme le code précédent de :première lettre, cela affectera également toutes les premières lignes des éléments de paragraphe présents dans la page.
Donc, dans les cas réels, quand on veut généralement ajouter des lettrines ou modifier la première ligne seulement sur le premier paragraphe, nous devons être plus précis - soit en ajoutant un attribut de classe supplémentaire, soit en appliquant ces pseudo-éléments avec :premier enfant ou : premier du type sélecteur, comme si.
p: premier enfant: première lettre font-size: 50px; p: premier-enfant: première ligne font-weight: bold;
Voilà, le paragraphe concerné n'est plus que le premier.
Les pseudo-éléments au travail
Très bien, essayons maintenant de donner une meilleure apparence à un paragraphe en utilisant des pseudo-éléments. Mais avant de commencer, nous avons besoin d’une police spéciale pour notre lettrine et voici mon choix: Hominis de Paul Lloyd. Ensuite, nous définissons une nouvelle famille de polices dans la feuille de style, comme suit:.
@ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') format ('woff'), url ('fonts / HOMINIS-webfont.ttf ') format (' TrueType '), url (' polices / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); poids de la police: normal; style de police: normal; Ensuite, nous définissons la famille de polices par défaut pour les paragraphes.
p couleur: # 555; famille de polices: 'Georgia', Times, serif; hauteur de ligne: 24px;
Dans cet exemple, nous utiliserons le :premier enfant sélecteur pour cibler le premier paragraphe et appliquer des styles décoratifs pour qu'il soit plus visible:
p: premier enfant padding: 30px; bordure gauche: solide 5px # 7f7664; couleur de fond: # f5f4f2; hauteur de ligne: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); position: relative;
Ensuite, nous ajoutons une lettrine en utilisant :première lettre, agrandissez la taille de la police et affectez-lui une nouvelle famille de polices;
p: premier enfant: première lettre taille de la police: 72px; float: gauche; rembourrage: 10px; hauteur: 64px; famille de polices: 'HominisNormal'; couleur de fond: # 7F7664; marge droite: 10px; Couleur blanche; border-radius: 5px; hauteur de ligne: 70px;
Nous soulignerons également la première ligne avec :Première ligne, ainsi.
p: premier enfant: première ligne font-weight: gras; taille de police: 24px; couleur: # 7f7664;
Enfin, nous voulons ajouter un attribut décoratif au premier paragraphe avec un trombone utilisant :après pseudo-élément.
p: premier-enfant: après background: url ("… /images/paper-clip.png") no-repeat scroll 0 0 transparent; contenu: " "; affichage: inline-block; hauteur: 100px; position: absolue; à droite: -5px; en haut: -35px; largeur: 100px; C'est tout le code dont nous avons besoin, notre paragraphe devrait maintenant être beaucoup plus beau;
Vous pouvez également voir la démonstration en direct à partir des liens ci-dessous:
- Voir la démo
- Source de téléchargement
Pensée finale
Comme nous l’avons mentionné précédemment dans ce billet, ces pseudo-éléments, en particulier le :première lettre et :Première ligne été inclus depuis CSS1, ils sont donc également pris en charge dans Internet Explorer 8 antérieur.
Pourtant, à ma connaissance, elles ne sont pas aussi largement mises en œuvre dans la nature. Nous espérons donc que ce tutoriel pourrait vous inciter à essayer ces fonctionnalités CSS sur votre site Web..
