Tutoriaux

Les feuilles de style

Voici quelques conseils sur la création d'une feuille de style.
Préférez l'utilisation d'une feuille de style externe à une feuille de style interne.

ID, CLASS et balise

Dans une feuille de style on peut référencer 3 catégories, les ID qui sont identifiées par le symbole #, les CLASS par le symbole . et les balises HTML qui vont être redéfinies :

#entete {...} = ID
.textebleu {...} = CLASS
p {...} = Balise HTML

Pour information, une ID ne peut-être déclarée qu'une seule fois dans une page alors qu'une CLASS, peut l'être plusieurs fois.

Déclarer une CLASS existante différement si incluse dans une ID

Il est possible de modifier une CLASS existante en lui attribuant d'autres valeurs, si cette dernière est incluse dans une balise ayant une ID :

.textebleu {color: #00F;}
#entete .textebleu {color: #000080;}

Prenons le cas d'une CLASS ".textebleu" qui est présente dans une balise qui a une ID "#entete", la couleur du texte sera "#000080" et non "#00F" définissant la CLASS par défaut.

Cette méthode est idéale par exemple pour changer l'apect d'un texte, des liens...
Cela marche aussi avec les balises HTML (#entete p {font-size: 14px;}).

Déclaration unique

Pour éviter la répétition de certaines valeurs communes à plusieurs ID ou CLASS, il est possible de les associer pour ne faire qu'une seule déclaration, la séparation de chaque éléments se fait par une virgule :

#corps {width: 560px;}
#entete {width: 560px;}
.colonne {width: 560px;}
équivaut à : #corps, #entete, .colonne {width: 560px;}

Faites toujours cette déclaration en premier. Ensuite déclarez les exceptions.

#corps, #entete, .colonne {width: 500px; border: 1px solid red;}
.colonne {border: 0}
#entete {font: 12px arial; color: #03F;}

Dans ce cas, la classe ".colonne" utilisera la largeur de 500px mais, n'utilisera pas la bordure rouge de 1px.
La déclaration suivante est également correcte :

#corps, #entete, .colonne {width: 500px;}
#corps, #entete { border: 1px solid red;}

Analysez bien vos styles avant de savoir quelles classes regrouper et surtout où les regrouper.

Saisie abrégée des couleurs

Dans certain cas, la saisie des valeurs RVB héxadécimale des couleurs peut être simplifiée, vous ne pourrez saisir que trois valeurs au lieu de six (#AABBCC devient #ABC).

Cette règle ne s'applique qu'à un seul cas de figure.
Pour être valide, chaque groupe Rouge Vert et Bleu doit avoir une valeur double, c'est-à-dire un chiffre ou un lettre qui se répète (exemple : AA, 11, 55, FF...) :
- #000000 devient #000
- #00CCDD devient #0CD
Si l'une des valeurs n'est pas double (exemple : #00CCDE), la règle ne peut pas s'appliquer car #0CDE ne correspond pas à un couleur valide (la couleur par défaut sera noir).

Valeurs nulles

Dans le cas où l'une des valeurs d'un attribut serait égale à zéro, il devient inutile de saisir son unité de mesure : saisissez 0 plutôt que 0px, 0pt.

Syntaxe simplifiée de certains attributs

Certains attributs ont une syntaxe permettant de regrouper plusieurs déclarations sur une seule ligne.
L'objectif est de simplifier la saisie.
Par contre, il y a un ordre à respecter pour les différentes valeurs sous peine de voir la CLASS ne pas fonctionner correctement.

Syntaxe normale Syntaxe simplifiée
border-left-width : 2px;
border-left-style: solid;
border-left-color : #483D8B;
border-left: 2px solid #483D8B;

background-color: #4682B4;
background-url : url([URL]);
background-repear: repeat-y;
background-attachment : fixed;
background-position: top;

background: #4682B4 url([URL]) repeat-y fixed top;

Voici une liste des principales associations qui peuvent être faites :

Syntaxe normale Syntaxe simplifiée
border-width : A;
border-style: B;
border-color : C;
border: A B C;
Idem pour border-top, border-left, border-bottom et border-right.
border-top-color: A;
border-left-color: B;
border-bottom-color: C;
border-right-color: D;
border-color: A B C D;
Même principe pour border-style, border-width,
margin-top: A;
margin-left: B;
margin-bottom: C;
margin-reight: D;
margin: A B C D;
padding-top: A;
padding-left: B;
padding-bottom: C;
padding-reight: D;
padding: A B C D;
liste-style-type : A;
liste-style-position: B;
liste-style-image: C;
liste-style: A B C;

background-color: A;
background-url : url(B);
background-repear: C;
background-attachment : D;
background-position: E;

background: A url(B) C D E;

system-font: A;
font-style : B;
font-variant: C;
font-weight: D;
line-height: E;
font-family: F;

font: A B C D/E F;
Entre les valeurs de font-weight et line-height, c'est bien un slash (/) qui doit être saisi.

Si vous ne déclarez pas l'un des attributs, il est inutile de laisser un espace vide à sa place, omettez-le simplement de votre déclaration.

Associer plusieurs classes à une balise

Prenons l'exemple de deux classes, l'une pour la police, l'autre pour le contour, la solution la plus simple consiste à créer une classe est à l'appliquer à votre balise, mais il est possible de combiner des classes différentes pour obtenir le même résultat :

.commun {font: 12px arial; color: #fcc; border: 1px dotted red;}
.texte {font: 12px arial; color: #fcc;}
.bloc {border: 1px dotted red;}

dans le code HTML :
<p class="commun">votre texte</p>
<p class="texte bloc">votre texte</p>

Les deux solutions donnent exactement le même résultat à l'écran mais faites attention, si des déclarations communes sont présentes (taille de la police, couleur...) seule la dernière déclaration sera prise en compte.

 

Haut de page

Vérifier la validité de cette page xhtml1-transitional Vérifier la validité de la feuille de styles CCS 2