Discussion :

[el_debutanti]

Bonjour,
Je tente par tous les moyens de changer la couleur d'une lettrine, soit par des styles, soit par des class.
Je vous donne le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h2 class "test">L’explosion de nouveaux mouvements musicaux...</h2>

et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.test {::first-letter: color: red;}

Cela semble court, mais j'ai vraiment tenté beaucoup de choses.
Merci pour votre aide,
E.

[el_debutanti]

Bonjour,

Je n'ai trouvé comme solution que de dupliquer tous les styles du texte original (je ne voulais que changer la lettrine de couleur).

Bonne journée,

[NoSmoking]

Bonjour,
tu là sors d'où cette syntaxe, il faudrait penser à revoir l'écriture des règles CSS !?!

Ressource :

• ::first-letter

[el_debutanti]

Je tente ASAP et vous tiens au courant. A la vue du lien, je pense que c'est bon

[el_debutanti]

Bonjour NoSmoking,
La couleur ne s'applique pas à la lettrine
Voic le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
p::first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: blue;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><h2>L’explosion de nouveaux mouvements musicaux, de genres inédits, en un si court laps de temps, est dû à la multiplicatio</h2></p>

Merci et bonne journée

[NoSmoking]

Pour commencer, ta capture d'écran ne correspond en rien au problème que tu rencontres

Pour continuer, pour que le CSS s'applique correctement il faut que le HTML soit conforme ce qui n'est pas le cas dans ton exemple.

Un élément <h2> ne peut pas être enfant d'un élément <p>, le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><h2>L’explosion de nouveaux mouvements musicaux ...</h2></p>

... sera corrigé par le navigateur comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p></p>
<h2>L’explosion de nouveaux mouvements musicaux ...</h2>

... donc pas de <h2> dans un <p>, ta règle ne s'applique donc pas.

Pour éviter les bizarreries il est bon de tester son code HTML :

• Validateur HTML.

Pour finir on n'utilise pas les éléments <h2> pour ajouter un style gras, c'est un élément sémantique, pour ce faire il existe des éléments comme les éléments <b> ou <strong> dans une autre mesure.

[el_debutanti]

Bonjour NoSmoking,
Je n'ai pas trouvé comment supprimer la capture qui, effectivement, est hors sujet
Pour le <h2> enfant de <p>, cela me semblait évident mais comment appliquer les styles de h2 au paragraphe (en sachant qu'il y a plusieurs paragraphes dans la page) ?

Je n'ai trouvé comme solution que de dupliquer tous les styles du texte original (je ne voulais que changer la lettrine de couleur).

ce n'est pas je pense fait dans les règles de l'art, mais n'est-pas plus simple ?
Je vais corriger les <strong>.Merci beaucoup NoSmoking;,
bonne soirée

[NoSmoking]

mais comment appliquer les styles de h2 au paragraphe (en sachant qu'il y a plusieurs paragraphes dans la page) ?

l'utilisation des classes est faite pour cela
Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p class="with-lettrine">Paragraphe avec lettrine</p>
<p>Paragraphe sans lettrine</p>

avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
p.with-lettrine:first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: red;
}

[el_debutanti]

Of couse

Merci NoSmoking, bonne journée

[el_debutanti]

Par contre, cela ne s'applique pas si je mets la class à un <h> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
h2.lettrine:first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: red;
	}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h2 class ="lettrine">L’explosion de nouveaux mouveme</h2>

[el_debutanti]

Bonjour tout le monde, bonjour NoSmoking,
Pour être plus explicite, j'ai sur ma page pas mal de <p>. Beaucoup sont animés (verticalement, horizontalement et même en diagonale).
Si j'applique uniquement le style lettrine, le paragraphe part dans tous les sens, de couleurs différentes etc
Si je ne me trompe pas, il faudrait tout "restyliser" sur ce <p>, et il y a énormément de choses. D'où ma question sur un <h> et un style qui lui est propre !??!
Cela ne serait-il pas moins lourd en code ?
Merci et bonne journée

[NoSmoking]

Par contre, cela ne s'applique pas si je mets la class à un <h> :

Aucune raison sauf si éventuellement tu as déclaré un display comme flex, par exemple, sur celui-ci, dans ce cas le ::first-letter n'a aucun effet.

Pour être plus explicite, j'ai sur ma page pas mal de <p>. Beaucoup sont animés (verticalement, horizontalement et même en diagonale).

Bonjour le tournis

Si j'applique uniquement le style lettrine, le paragraphe part dans tous les sens, de couleurs différentes etc

Je ne vois pas le rapport !

Si je ne me trompe pas, il faudrait tout "restyliser" sur ce <p>, et il y a énormément de choses.

On peut appliquer plusieurs classes aux éléments et bien d'autres chose ...

	FAQ CSS Comment créer une lettrine en début de paragraphe ? Comment appliquer plusieurs styles à un élément ?

[el_debutanti]

Merci beaucoup NoSmoking, je retourne aux fourneaux
Bonne soirée !

[el_debutanti]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="texte contour"><h1 style="color: red;">Titre</h1>
<h4>Texte<a href="lien" target="_blank"><img class="banana" src="images/banana.png" alt="logo banana"></a></h4><h2 class ="lettrine">L’explosion ...</h4>

Avec en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.texte .lettrine:first-letter {
	color: red;
	float: left;
	font-size:6em;
	font-weight:bold;
	line-height:0.7em;
	font-family: 'chunkfive', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	margin-left: -10px;
	padding-left: 8px;
}

Ça fonctionne !!!!!
Merci beaucoup, bonne soirée !