Tutorial CSS

Le titre de mon Journal

Mardi 6 Mars 2007 à 11h51

Comment configurer le titre de mon Journal :

Tout ce qui concerne les paramètres du titre ce trouve :

/* On place le titre du journal */

h1 {

  font-size: 1.2em;
  padding: 1.8em;
  margin-left: 1.2em;
  margin-top: 1.5em;
  background: url(rond.png) no-repeat;
  }h1 a { font-size: 2.5em; color: #000; text-decoration: none; }

Etudions la première partie :

h1 {

  font-size: 1.2em;
  padding: 1.8em;
  margin-left: 1.2em;
  margin-top: 1.5em;
  background: url(rond.png) no-repeat;
  }

h1 définit le titre. Comme nous l'avons vu précédement font-size permet d'ajuster la taille de la police. Mais comme nous allons définir la taille dans la deuxième partie, afin de simplifier un peu la feuille je supprime cette ligne.

background: url(rond.png) no-repeat; place le petit rond orange dans le titre, en modifiant l'url on peut y mettre une autre image, mais nous verrons ça un peu plus tard. Pour le moment je le supprime.

Maintenant il ne reste plus que:

h1 {

   padding: 1.8em;
   margin-left: 1.2em;
   margin-top: 1.5em;
    }

Nous allons pouvoir placer le titre. Pour cela on utilise les fonctions margin et padding. Pour comprendre leur utilisation, rien de mieux qu'une image :

Le titre réagit comme une boite, dont le contenu est le texte, et avec une marge interne : padding ; et une marge externe : margin

padding: 1.8em; Ce qui appliquera une marge interne sur les 4 cotés.

margin-left: 1.2em; margin-top: 1.5em; Qui appliquera ici une marge externe sur la gauche de 1.2em et sur le haut de 1.5em.

Pour placer le titre il ne reste plus qu'a faire varier les valeurs des margin left et top.

Etudions la deuxième partie :

h1 a { font-size: 2.5em; color: #000; text-decoration: none; } Que l'on pourrait aussi présenter de cette façon :

h1 a{

  font-size: 1.5em;
  color: #000;
  text-decoration: none;
  }

font-size permet d'ajuster la taille de la police.

L'unité utilisé ici est em qui comme px est une unité de taille ou de longueur. Je trouve que mon titre n'est pas assez gros, je passe alors à 2.0em. Je trouve que mon titre est trop gros, je passe à 1.0em.

color permet d'ajuster la couleur de la police. Je veux une police Rouge pourpre pour mon titre, ce qui correspond a la notation : #660000

text-decoration permet de souligner le titre si on le désire.

text-decoration: none; pas de soulignement

text-decoration: underline; texte souligné.

Ce qui me donnera pour la deuxième partie:

h1 a{

  font-size: 2.0em;
  color: #660000;
  text-decoration: none;
  }

Je veux donner une police particulière à mon titre : Aucun probleme !

Je rajoute dans la deuxieme partie la police que je désire (Comic Sans MS) , ce qui donne :

h1 a {

     font-size: 2.0em;
     color: #660000;
     text-decoration: none;
     font-family: "Comic Sans MS", Helvetica, sans-serif;
     }

Ce qui donnera avec la première partie :

/* On place le titre du journal */

h1 {
   padding: 1.0em;
   margin-left: 1.2em;
   margin-top: 1.2em;
    } h1 a { 
     font-size: 2.0em;
     color: #660000;
     text-decoration: none;
     font-family: "Comic Sans MS", Helvetica, sans-serif;
     }

Et voilà mon titre configuré!

• Forum