HTML et CSS en pratique

Comment fait-on un bouton ?

Finalement, un bouton, c'est quoi ? C'est tout simplement un lien hypertexte qui a une forme particulière et qui peut changer d'état en fonction de l'action de la souris (survol, clic, ...).

1
<a href="#">Cliquez ici</a>

1
2
3
4
5
a {
    color:#FFFFFF; /*Texte blanc*/
    background-color : red; /*Fond rouge*/
    padding : 10px; /*Marge intérieure de 10px*/
}

Si l'on se contente du sélecteur a, tous les liens hypertextes de ma page web prendront ce style. C'est n'es pas forcément très judicieux car certains éléments <a> de mon site doivent rester des liens hypertextes classiques.

La bonne méthode est de créer une classe (appelons-la btn pour "bouton").

  • En HTML nous donnerons cette classe btn aux liens qui doivent être des boutons.
  • En CSS nous définirons les styles pour les élément a ayant la classe btn.

Comme ceci :

1
<a href="#" class="btn">Cliquez ici</a>

1
2
3
4
5
a.btn { /*Tous les liens (<a>) ayant la classe "btn"*/
    color:#FFFFFF; /*Texte blanc*/
    background-color : blue; /*Fond bleu*/
    padding : 10px; /*Marge intérieure de 10px*/
}

Allons plus loin. En CSS, nous allons pouvoir ajouter des pseudo-classes qui vont nous permettre de spécifier l'apparence d'un élément en fonction de l'action de la souris.

Ainsi, la pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer. La pseudo-class :active permet de spécifier l'apparence d'un élément au moment où l'utilisateur clique dessus.

Il existe d'autres pseudo-classes : :link, :visited, focus... Je laisse le loin à ceux qui souhaite aller plus loin de les découvrir par vous même.

En pratique, 

1
<a href="#" class="btn">Cliquez ici</a>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a.btn { /* Affichage par défaut */
    color:#FFFFFF; /*Texte blanc*/
    background-color : blue; /*Fond bleu*/
    padding : 10px; /*Marge intérieure de 10px*/
}
a.btn:hover { /* Au survol  */
    background-color : red; /*Fond bleu*/
}
a.btn:active { /* Au clic */
    color:red; /*Texte rouge */
    background-color : #FFFFFF; /*Fond blanc*/
}

À vous de jouer

  • Reprenez votre site.
  • Dans chaque page HTML, ajouter un bouton (élément <a>avec la classe btn) renvoyant vers Wikipédia.
  • Dans le fichier CSS définissez les styles pour la classe btn. Pensez à utiliser les pseudo-classes" pour modifier le style du bouton en fonction de l'action de la souris.

Comment fait-on un menu de navigation ?

La bonne pratique est de créer un liste non-ordonnées (<ul>) de liens hypertexte (<a>) en HTML puis de la stylisez en CSS pour "casser" notamment l'aspect par défaut d'un liste (sens vertical, puce pour chaque item, ...). N'oublions pas de dire qu'il s'agit du menu de navigation principal grace à la balise <nav>.

En pratique,

1
2
3
4
5
6
7
<nav>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
    </ul>
</nav>

D'abord, on redéfinit l'aspect de la liste (plus d'indentation, plus de puce) :

1
2
3
4
5
nav ul{ /* éléments <ul> qui sont dans un élément <nav> */
    padding:0; /* pas de marge intérieure */
    margin:0; /* pas de marge extérieure */
    list-style-type:none; /* pas de puce */
}

Pour un menu horizontal, on modifie le comportement par défaut des éléments li. Par défaut, ces éléments sont de type block, donc les uns en dessous des autres. On va modifier leur type en inline-block grâce à la propriété display. Il apparaîtront donc les uns à coté des autres.

1
2
3
nav li{ /* éléments <li> qui sont dans un élément <nav> */
    display:inline-block;
}

Ensuite, ce n'est qu'une question d’esthétisme. On modifie les couleurs la taille, les marges, l'alignement des items. On réutilise les pseudo-classes vues dans "Comment fait-on un bouton ?" pour modifier l'aspect des éléments au survol de la souris.

Le code entier :

1
2
3
4
5
6
7
<nav>
    <ul>
        <li><a href="#">Élément 1</a></li>
    <li><a href="#">Élément 2</a></li>
    <li><a href="#">Élément 3</a></li>
  </ul>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nav ul{ /* éléments <ul> qui sont dans un élément <nav> */
    padding:0; /* pas de marge intérieure */
    margin:0; /* pas de marge extérieure */
    list-style-type:none; /* pas de puce */
    background-color:#333333; /* fond gris foncé */
}
nav li{ /* éléments <li> qui sont dans un élément <nav> */
  display:inline-block; /* passage à l'horizontale */
  width :100px; /* chaque élément fait 100px;*/
  height:40px; /* hauteur 40px; */
  text-align:center; /* texte centré horizontalement */
  line-height:40px; /* texte centré verticalement (même nombre que la propriété height) */
  padding:0px; /* pas de marge interne */
  margin:0px; /* pas de marge externe */    
}
nav li a{ /*éléments <a> qui sont dans un élément <li> qui est lui-même dans un élément <nav> */
  display:block; /* pour que la zone cliquable prenne toute la taille de l'élément li */
  text-decoration:none; /* pas de soulignement */
  color:white; /* texte en blanc */
}
nav li:hover{ /* au survol d'un élément <li>*/
  background-color:#666666; /* fond gris clair */
}

À vous de jouer

  • Reprenez votre site.
  • Dans chaque page HTML, ajouter un menu permettant de naviguer entre les différentes pages de votre site ; si ce n'est déjà fait ;) .
  • Dans le fichier CSS définissez les styles pour ce menu. Pensez à utiliser les pseudo-classes" pour modifier le style des éléments du menu en fonction de l'action de la souris.

Entraînez-vous !

Vous pouvez télécharger la correction.