Mettre première lettre ou ligne en capitale, en couleur
first-line, first-letter : gestion du texte en CSS facilement
A découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)Pseudo Elements en CSS
Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML.
D'accord mais donne des exemples ! : prenons first-line qui permet de mettre la premiàre ligne en majuscule. Ou first-letter pour mettre une capitale à la première lettre.
Vous apprendrez aussi à définir un fond pour le texte avec CSS, mettre un espacement entre les lettres ou les mots.
La syntaxe du CSS
selecteur:pseudo-element
Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML.
Par exemple le pseudo-élément :First-Letter désigne la première lettre d'un paragraphe. Le nom des pseudo-éléments est précédé de deux-points ( : ).
Mettre la première ligne en rouge:
p: first-line { color: red;} (on pourrait gérer la taille en ajoutant font-size: medium;)
First Line
- first-line
Au lieu de :
- background
- clear
- color
- font
- letter-spacing
- line-height
- text-decoration
- text-transform
- vertical-align
- word-spacing
Comme vous pouvez le voir dans l'exemple en cliquant sur "Voir un exemple", les paragraphes sont exposées à une petite taille de police, mais le p: premiére ligne est définie comme une taille moyenne et une couleur rouge.
Voir un exemple :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce fermentum neque eget nisl. Quisque tincidunt. Proin dictum laoreet dui. Nulla justo. Quisque tortor sapien, gravida nec, sollicitudin non, placerat eu, lectus. Morbi placerat. Quisque ipsum turpis, placerat eu, pretium vitae, mattis vitae, nunc. Maecenas at turpis a magna hendrerit luctus.
Voir le code CSS :p.special:first-line {font-size: medium; color: #ff0000;} Voir le code dans l'élément
<p class="special">the content</p>
First Letter
- first-letter
Un grand avantage, c'est que ce style permet de ne pas toucher au code html et uniquement agir et modifier le texte via la feuille de style.
Voir un exemple pour mettre la :
This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.
Voir le code CSS :p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;} Voir le code dans l'élément
<p class="special_letter">the content</p>
Les propriétés suivantes peuvent etre affectés à la première lettre pseudo- élément:
- background (changer le fond)
- border (changer les bordures)
- clear (Permet de spécifier l'affichage de l'élément flottant par rapport à l'élément précédent)
- color (changer la couleur)
- float (Permet de spécifier la position de l'élément flottant par rapport à l'élément précédent)
- font (Gestion du type de couleur)
- line-height (Permet de spécifier la hauteur d'une ligne d'un bloc de texte)
- margin (Gestion de marges)
- padding (Gestion du padding)
- text-decoration (Permet de souligner ou pas le texte)
- text-transform (Permet de mettre en majuscule ou pas le texte)
- word-spacing (Espacement entre les mots)
On obtient ainsi des effets qui sont agréables mais dont il ne faut pas abuser du point de vue design de votre page.
Voici un exemple de code pour mettre le bloc de texte en capitale (capitalize), majuscule (uppercase), minuscule (lowercase) ou rien : none.
p#no{ text-transform: none; } p#cap{ text-transform: capitalize; }p#up{ text-transform: uppercase; } p#low{ text-transform: lowercase; }
Attention : Notez un " tous les navigateurs ne supportent pas encore ce style. On l'appelle aussi "pseudo-style" ou "pseudo-élément".
Liens vers d'autres sujets sur le CSS : [Bordure en CSS] - [css button] -
Le CSS en 3 questions/réponses - en bref
