Les Lettrines
Ou comment commencer son article par une grande lettre, pour se la jouer "Mon blog est un incunable et j'y fais des enluminures"...
Il s'agit de définir la première lettre de chaque paragraphe dans les articles, ce qui permettra de lui donner un style propre.
Comme en Allemand, la syntaxe d'un mot nouveau se construit à reculons...
Reprenons donc:
"dans les articles" et seulement dans les articles -> donc on commence par la classe .article .
"chaque paragraphe" -> on désigne un paragraphe par le sélecteur p donc on en est à .article p .
"la première lettre" -> là, ça s'invente pas, mais ça se trouve sur le net, il faut utiliser une pseudo-classe (= qui commence par : ) et elle s'appelle, fort logiquement :first-letter.
Finalement, la fonction qu'on va utiliser s'appelle : .article p:first-letter .
Il n'y a plus qu'à choisir à quoi va ressembler cette lettrine ...
Une petite précision cependant : on peut également avoir envie que la lettrine soit visible quand on consulte un seul article à la fois, cas décrit par la classe ,.articleSeul .
Il convient donc de rajouter à notre fonction .article p:first-letter, la fonction complémentaire .articleSeul p:first-letter.
Ainsi donc, le code CSS suivant définit, pour la lettrine utilisé dans ce blog :
un fond, une bordure qui donne un effet relief (outset), la couleur de la lettre elle-même, la valeur de la marge intérieure (padding), une marge extérieure au "carré" de fond à droite non nulle (margin-right), la hauteur de l'interligne (line-height), la taille et la position par rapport au texte...
.article p:first-letter,.articleSeul p:first-letter{
background-color: #CC6699;
border: 2px outset #FF3E96;
color: #C1FFC1;
padding: 0.1em;
margin-right: 3px;
line-height: 1em;
font-size: 3em;
/*--Lettrine vers le bas--*/
float: left;
/*--- OU lettrine vers le haut:
float: none;
vertical-align:bottom;*/
}
Attention, il faut choisir entre deux valeurs de float (la deuxième est ici en commentaire), sinon, c'est la dernière valeur énoncée qui fait loi.
Avec le CSS, c'est toujours le dernier qui a parlé qui a raison.
C'était la pensée du jour.
Bonne nuit, les gens.
EDIT : Une petite précision tout de même: pour que ça marche, il faut absolument que le code source de l'article commence par la lettre elle-même et non par < div ... > ou < br /> , ... etc .
Il s'agit de définir la première lettre de chaque paragraphe dans les articles, ce qui permettra de lui donner un style propre.
Comme en Allemand, la syntaxe d'un mot nouveau se construit à reculons...
Reprenons donc:
"dans les articles" et seulement dans les articles -> donc on commence par la classe .article .
"chaque paragraphe" -> on désigne un paragraphe par le sélecteur p donc on en est à .article p .
"la première lettre" -> là, ça s'invente pas, mais ça se trouve sur le net, il faut utiliser une pseudo-classe (= qui commence par : ) et elle s'appelle, fort logiquement :first-letter.
Finalement, la fonction qu'on va utiliser s'appelle : .article p:first-letter .
Il n'y a plus qu'à choisir à quoi va ressembler cette lettrine ...
Une petite précision cependant : on peut également avoir envie que la lettrine soit visible quand on consulte un seul article à la fois, cas décrit par la classe ,.articleSeul .
Il convient donc de rajouter à notre fonction .article p:first-letter, la fonction complémentaire .articleSeul p:first-letter.
Ainsi donc, le code CSS suivant définit, pour la lettrine utilisé dans ce blog :
un fond, une bordure qui donne un effet relief (outset), la couleur de la lettre elle-même, la valeur de la marge intérieure (padding), une marge extérieure au "carré" de fond à droite non nulle (margin-right), la hauteur de l'interligne (line-height), la taille et la position par rapport au texte...
.article p:first-letter,.articleSeul p:first-letter{
background-color: #CC6699;
border: 2px outset #FF3E96;
color: #C1FFC1;
padding: 0.1em;
margin-right: 3px;
line-height: 1em;
font-size: 3em;
/*--Lettrine vers le bas--*/
float: left;
/*--- OU lettrine vers le haut:
float: none;
vertical-align:bottom;*/
}
Attention, il faut choisir entre deux valeurs de float (la deuxième est ici en commentaire), sinon, c'est la dernière valeur énoncée qui fait loi.
Avec le CSS, c'est toujours le dernier qui a parlé qui a raison.
C'était la pensée du jour.
Bonne nuit, les gens.
EDIT : Une petite précision tout de même: pour que ça marche, il faut absolument que le code source de l'article commence par la lettre elle-même et non par < div ... > ou < br /> , ... etc .