03- Mémento

3.Mémento

 

01- Appliquer un style à plusieurs balises

Il suffit de séparer les noms des balises par des virgules

h1, h2
{
 font-size: 16px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
}

 

 

02- Insérer des commentaires en CSS

/*commentaires */

Les commentaires ne seront pas affichés, ils servent à insérer des informations dans votre fichier.

/* commentaire css */

 

03- Imbrications de balises en CSS

Il suffit de séparer les noms des balises par un espace.

p strong
{
 font-size: 16px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
}

Ici, nous définissons un style uniquement pour les balises <strong> qui se trouvent à l’intérieur d’une balise <p>.

04- Représentation graphique du modèle de boîte selon le W3C :

Le modèle de boîte du W3C  définit par le calcul de la largeur et de la hauteur des éléments. Depuis la spécification CSS1 du consortium W3 datant de 1996, la largeur totale d’un élément est calculée à l’aide de l’addition :

1- de la  largeur de son contenu ( width ),
2- de sa  marge intérieure ( padding ),
3- de l’ épaisseur de son cadre ( border-width ),
4- de sa  marge extérieure ( margin ).

 

Exemple:

Si un élément se voit affecter une largeur de 200 pixels,
une hauteur de 100 pixels,
un cadre et un espace intérieur de 20 pixels chacun sur tous les côtés,
la largeur de l’élément mesure finalement en fait 280 pixels:

20 pour border-left,
20 pour padding-left,
200 pour width,
20 pour padding-right et
20 pour border-right

et sa hauteur atteint 180 pixels :

20 pour border-top,
20 pour padding-top,
100 pour height,
20 pour padding-bottom et
20 pour border-bottom. Une marge extérieure devra s’ajouter encore à ses valeurs.