Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

CSS 2
Les paragraphes

  Indentation de paragraphes

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
L'indentation de paragraphes consiste tout simplement à créer un décallage de marge entre la première ligne d'un paragraphe et les lignes suivantes. La plupart du temps, cette indentation est dite 'positive', la première ligne commence plus à droite que les autres, mais cela peut aussi être l'inverse...
  Principe
l'attribut 'text-indent' permet d'agir sur la première ligne d'un paragraphe et de la décaller de la valeur qu'on donnera à l'indentation, par exemple 20 pixels.
Pour réaliser une indentation négative, que l'ensemble du paragraphe, sauf la première ligne commence plus à droite que la normale, il faut en fait faire appel à une petite astuce qui consiste à donner une marge générale au paragraphe puis à donner une indentation négative à la première ligne !!
  La méthode
dans la partie <head>
<style>
.positif { text-indent: 20px; }
.negatif { margin-left: 20px; text-indent: -20px; }
</style>

dans la partie <body>
<p class="positif">Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'positif'. Ce qui lui donne un air plus 'fini' ;-). Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'positif'. Ce qui lui donne un air plus 'fini' ;-)</p>

<p class="negatif">Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'negatif'. Ce qui lui donne un air plus 'étrange' ;-). Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'negatif'. Ce qui lui donne un air plus 'étrange' ;-)</p>
  Démonstration

Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'positif'. Ce qui lui donne un air plus 'fini' ;-). Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'positif'. Ce qui lui donne un air plus 'fini' ;-)


Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'negatif'. Ce qui lui donne un air plus 'étrange' ;-). Ceci est un paragraphe classique, il subit cependant une indentation par la feuille de style 'negatif'. Ce qui lui donne un air plus 'étrange' ;-)
  Téléchargement
Cette feuille de style est disponible en deux versions :
  • le style est appliqué localement, dans la balise style de la page),
  • le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

    L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.
    		•
    Style local :
    para_indent.zip
    1 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    para_indent2.zip
    1 Ko
    Recherche
    		aide sur la recherche
    DHTML
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter