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

CSS 2
Le texte

  Gérer la taille du texte

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

  Fonction
La taille du texte peut être déclarée de façon absolue (en point, pixels) mais aussi avec des valeurs prédéterminées propres au navigateur, ou encore relativement au contexte (héritage) ou en pourcentage de la taille du contexte (héritage toujours).
  Principe
Les tailles prédéterminées sont définies en fonction du navigateur mais les noms de ces tailles sont connues et assez explicites :
  • 'font-size: xx-small' : tout petit petit,
  • 'font-size: x-small' : tout petit,
  • 'font-size: small' : petit (la base pour Internet Explorer),
  • 'font-size: medium' : moyen (la base pour Netscape),
  • 'font-size: large' : grand,
  • 'font-size: x-large' : très grand,
  • 'font-size: xx-large' : très très grand ;-))
Pour changer la taille de la police par rapport au contexte, c'est à dire 'rétrécir' ou 'aggrandir' la taille, on utilise respectivement les valeurs 'smaller' et 'larger' (ce dernier n'est pas reconnu par Internet Explorer).
  La méthode
dans la partie <head>
<style>
.xxs { font-size: xx-small; }
.xs { font-size: x-small; }
.s { font-size: small; }
.m { font-size: medium; }
.l { font-size: large; }
.xl { font-size: x-large; }
.xxl { font-size: xx-large; }

.smaller { font-size: smaller; }
.larger { font-size: larger; }
</style>

dans la partie <body>
Tailles façon 'Vêtements' ;-)
<div><span class="xxs">XX-Small</span>, <span class="xs">X-Small</span>, <span class="s">Small</span>, <span class="m">Medium</span>, <span class="l">Large</span>, <span class="xl">X-Large</span>, <span class="xxl">XX-Large</span></div>

Tailles relatives
<div><span class="smaller">Samller</span>, base de comparaison, <span class="larger">Larger</span></div>
  Démonstration

Voir la démonstration
  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_size.zip
    1 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    txt_size2.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