CSS Le pseudo-élément :first-letter

.......................

CSS Le pseudo-élément : prmière lettre


Les propriétés CSS

Le pseudo-élément :first-letter produit un style particulier sur la prmière lettre d'un paragraphe

Le pseudo-élément :first-letter

Le pseudo-élément :first-letter produit un style particulier sur la prmière lettre formatée d'un paragraphe. Par exemple :
P:first-letter { text-transform: uppercase }
La règle précédente signifie "mettre la prmière lettre de chaque paragraphe en majuscule couleur rouge". Cependant, le sélecteur "P:first-letter" ne correspond à aucun élément HTML réel. Celui-ci correspond en fait à un pseudo-élément que l'explorateur va insérer au début de chaque paragraphe.

<P>voici un paragraphe HTML plutôt
long qui va être découpé en plusieurs
lignes. La prmière lettre sera identifiée
à l'aide d'une séquence de balises fictives
et sera mise en majuscule couleur rouge.
Les autres lettres vont rester ordinaires
dans la suite du paragraphe.</P>

Code : Sélectionner le code
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	<HTML>
	 <HEAD>
	  <TITLE>Lettrine</TITLE>
	  <STYLE type="text/css">
	   P:first-letter { text-transform: uppercase ; color:#FF0000;}
	  </STYLE>
	 </HEAD>
	 <BODY>
		<P>voici un paragraphe HTML plutôt 
		long qui va être découpé en plusieurs 
		lignes. La prmière lettre sera identifiée
		à l'aide d'une séquence de balises fictives
		et sera mise en majuscule couleur rouge. 
		Les autres lignes vont rester ordinaires 
		dans la suite du paragraphe.</P>
	 </BODY>
	</HTML>

	






Par carabde 10 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Balise link

    Définit la relation entre un document et une ressource externe (la plus utilisée pour lier les feuilles de style)

    Objet array js

    Objet array js L'objet Array (tableau) : définition et utilisation

    border-width

    Définit la largeur des quatre frontières



    Rentabilisez efficacement votre site