CSS
Structure et mise en forme d'une règle CSS
Recherche…
Remarques
Pour faciliter la lecture, conservez toutes les déclarations en retrait d'un niveau par rapport à leur sélecteur et les accolades fermantes sur leur propre ligne. Ajoutez un seul espace après les sélecteurs et les deux-points, et placez toujours un point-virgule après la déclaration finale.
Bien
p {
color: maroon;
font-size: 16px;
}
Mal
p{
color: maroon;
font-size:16px }
Bon mot
S'il n'y a qu'une ou deux déclarations, vous pourriez vous en sortir avec celle-ci. Non recommandé pour la plupart des cas. Toujours être cohérent lorsque cela est possible.
p { color: maroon; font-size: 16px; }
Règles, sélecteurs et blocs de déclaration
Une règle CSS consiste en un sélecteur (par exemple, h1 ) et un bloc de déclaration ( {} ).
h1 {}
Listes de propriété
Certaines propriétés peuvent prendre plusieurs valeurs, appelées collectivement une liste de propriétés .
/* Two values in this property list */
span {
text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}
/* Alternate Formatting */
span {
text-shadow:
yellow 0 0 3px,
green 4px 4px 10px;
}
Sélecteurs multiples
Lorsque vous groupez des sélecteurs CSS, vous appliquez les mêmes styles à plusieurs éléments différents sans répéter les styles de votre feuille de style. Utilisez une virgule pour séparer plusieurs sélecteurs groupés.
div, p { color: blue }
La couleur bleue s'applique donc à tous les éléments <div> et à tous les éléments <p> . Sans la virgule, seuls les éléments <p> enfants d'un <div> seraient rouges.
Cela s'applique également à tous les types de sélecteurs.
p, .blue, #first, div span{ color : blue }
Cette règle s'applique à:
-
<p> - éléments de la classe
blue - élément avec l'ID d'
first - chaque
<span>intérieur d'un<div>