Team-Masters.com
Que du Gratuit pour Webmasters
Regroupement des règles de style
Pitite parenthèse sur les commentaires
Vous pouvez insérer des commentaires dans vos feuilles de style, afin de vous aider à vous y retrouver, notamment si vous souhaitez faire évoluer vos pages ou votre site quelques mois ou quelques années plus tard. Les commentaires textuels dans les feuilles de style CSS sont les mêmes que ceux employés pour le langage de programmation C. Les commentaires seront, comme en HTML ignorés par le navigateur, ils n’apparaîtront pas dans la page que l’internaute consultera. Un commentaire commence par « /* » et se termine par « */ ». C’est simple non ?
/* Voici un commentaire */
p
{
text-align: center;
/* Et encore un qui blablate */
color: black;
font-family: arial
}Les commentaires ne peuvent pas être imbriqués (un commentaire à l’intérieur d’un autre commentaire). Voilà c’est tout pour les commentaires.
Nous disions donc précédemment, que l’on pouvait définir plusieurs propriétés pour un élément. Par exemple, je souhaite que mes paragraphes soient écrits en Verdana, avec une taille de 12 pts et que mon texte soit justifié. Cela me donnera donc :
p {font-family: verdana ; font-size: 12pts ; text-align : justify }
Donc, si on veut définir plusieurs propriétés pour un même élément HTML, on doit séparer chaque propriété par un point-virgule ( ;). Pour rendre la lecture du code encore plus claire, on peut écrire chaque propriété sur une ligne. L’exemple précédent devient alors :
p {
font-family: verdana ;
font-size: 12pts ;
text-align: justify ;
}Note : il ne faut surtout pas oublier d’ouvrir et refermer les accolades et placer les points-virgules, sinon les choses ne marcheront pas et vous vous tirerez les cheveux en disant que ça y est, vous n’êtes pas fait pour les feuilles de style et que vous êtes un nul. Comme ce n’est pas le cas, continuons donc.
Regroupement des règles de style
Supposons que nous ayons plusieurs sélecteurs qui ont les mêmes propriétés et valeurs, par exemple :
h1 {
font-family: arial;
color: red ;
}
h2 { font-family: arial ;
color: red ;
}
h3 { font-family: arial ;
color: red ;
}Pour réduire la taille des feuilles de style et rendre la lecture du code plus lisible, on peut grouper les sélecteurs dans une liste en les séparant par des virgules. Les trois lignes ci-dessus deviennent :
h1, h2, h3 {
font-family: Arial ;
color: red ;
} /* les sélecteurs h1, h2 et h3 auront la même police Arial et la même couleur rouge*/C’est simple non ? Là, vous commencez à ressentir les multiples possibilités que vous avez pour relooker votre site en tour de main ? C’est bien là toute la puissance des CSS. Mais voyons donc comment incorporer nos feuilles de style à notre page HTML.
Suite >>
22 décembre 2004
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
