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

CSS 2

  Indices et exposants

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

  Fonction
En HTML, pour faire des indices ou des exposants, on dispose de deux balises spécifiques, mais en feuilles de style, cela n'existe pas, comment faire ?
  Principe
La particularité des indices et des exposants est de ne pas se trouver sur la même ligne de base que le texte 'courant'.
Il suffit donc de définir un style, ou plutôt deux qui auront un placement relatif à la ligne de texte de base mais décallé vers le haut ou le bas.

L'avantage des feuilles de style par rapport aux balises HTML c'est que la ligne qui contient les indices et ou les exposants ne se retrouve pas écartée verticalement des lignes qui l'entoure, ce qui est le cas avec le HTML.
  La méthode
dans la partie <head>
<style>
.indice { position: relative; top: 5px; }
.exposant { position: relative; top: -5px; }
</style>

dans la partie <body>
L'eau (H<span class="indice">2</span>O) du bain est à 20<span class="exposant">o</span>.
  Démonstration
L'eau (H2O) du bain est à 20o, elle est bonne ;-).
  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 :
    txt_ind_exp.zip
    1 Ko
    telechargez le style telechargez le style
    Feuille de style :
    txt_ind_exp2.zip
    1 Ko
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

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