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

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

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


Les propriétés CSS

Le pseudo-élément :first-line produit un style particulier sur la première ligne d'un paragraphe

Le pseudo-élément :first-line

Le pseudo-élément :first-line produit un style particulier sur la première ligne formatée d'un paragraphe. Par exemple :
P:first-line { text-transform: uppercase }
La règle précédente signifie "mettre les lettres de la première ligne de chaque paragraphe en majuscule". Cependant, le sélecteur "P:first-line" 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.
Noter que la longueur de la première ligne dépend de plusieurs facteurs, dont la largeur de la page, la taille de la police, etc. Ainsi un paragraphe quelconque en HTML tel que :
<P>Voici un paragraphe HTML plutôt
long qui va être découpé en plusieurs
lignes. La première ligne sera identifiée
à l'aide d'une séquence de balises fictives.
Les autres lignes 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-line { text-transform: uppercase }
	  </STYLE>
	 </HEAD>
	 <BODY>
		<P>Voici un paragraphe HTML plutôt 
		long qui va être découpé en plusieurs 
		lignes. La première ligne sera identifiée
		à l'aide d'une séquence de balises fictives. 
		Les autres lignes vont rester ordinaires 
		dans la suite du paragraphe.</P>
	 </BODY>
	</HTML>

	






Par carabde 10 mars 2014
  • 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 :

    fonction ord, ord

    Retourne le code ASCII d'un caractère

    Balise addresse

    Définit les coordonnées de l'auteur / propriétaire d'un document

    list-style-position

    Indique si les marqueurs list-item doit apparaitre à l'intérieur ou en dehors du flux du contenu