Pour réaliser un bon template il ne suffit pas de faire un beau design, il faut savoir également adapter proprement sa maquette en HTML et surtout bien la mettre en page avec les styles CSS. Nous allons donc faire un survol des différentes déclarations de balises et des possiblités offertes par le CSS.
Les classes universelles
Comme leurs noms l'indiquent ce sont les plus couramment utilisées. La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point. Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise.
.nom-de-la-classe {propriété de style: valeur; propriété de style: valeur;
}
Classe définie avec une balise, de ce fait elle ne s'appliquera que sur les éléments div.
div.nom-de-la-classe {propriété de style: valeur; propriété de style: valeur;
}
Exemple avec la classe « validate » :
.validate {font-type: verdana; color: green; font-weight: bold}
L'appel de cette classe peut être fait à partir de n'importe quel élément HTML :
<h1 class="validate">Enregistrement effectué avec succès !</h1>
<span class="validate">Données mises à jour</span>
Les sélecteurs contextuels
La définition des sélecteurs contextuels fonctionne dans le même principe que les classes universelles à part qu'ils ne s'appliquent qu'aux éléments HTML prédéfinis, il n'est donc pas possible de créer ses propres classes.
selecteur {propriété de style: valeur; propriété de style: valeur;
}
Les sélecteurs d'ID
Le sélecteur d'ID permet de faire référence à un élément unique d'une page repéré par son identifiant. Les ID servent notamment à localiser des éléments HTML grâce au JavaScript.
Il ne peut exister qu'un seul ID portant le même nom dans la page.
#selecteur-id { propriété de style: valeur; propriété de style: valeur;
}
Les sélecteurs multiples
Les sélecteurs multiples permettent d'appliquer un style identique ou une partie du style pour plusieurs balises.
.nom-de-la-classeA, .nom-de-la-classeB, .nom-de-la-classeC { font-size: 12px; border-style: solid;
border-color: black; padding: 5px;
}
.nom-de-la-classeA { color: red; }
.nom-de-la-classeB { color: black; }
.nom-de-la-classeC { color: green; border-color: grey;
}
Dans cet exemple les 3 classes auront la même taille de caractère, le même espacement et la même couleur de bordure à l'exception de la classeC qui aura une bordure grise et un texte vert. La classe A et B auront des couleurs de texte différentes.
Sélecteur d'éléments imbriqués
Il est possible d'appliquer une style à une balise dans un contexte donné, c'est-à-dire en fonction des éléments qui l'entourent, grâce aux sélécteurs contextuels.
Il devient donc facile de multiplier les apparences sans forcement avoir une multitude de classes de définies dans le HTML.
a { color: black; }
.urgent a { color: red; text-decoration: underline;
}
Par défaut toutes les balises a sont définies avec une couleur noir. Si une balise a se trouvent placée dans la classe urgent la couleur du lien sera rouge. |