Exemple 02 : Décomposition d'une règle CSS : les déclarations

Explications :

Un bloc de déclaration est composé d'une ou plusieurs déclarations. Chaque déclaration est constituée de deux éléments : une propriété et une valeur.

La propriété est un mot clé CSS permettant de modifier un point précis au niveau du rendu des éléments (X)HTML ciblés par le sélecteur. Tandis que la valeur permet de spécifier une valeur différente que celle appliquée par défaut à la propriété en question.

Toutes les déclarations sont fondées sur le même modèle : une propriété suivie de deux-point, lui-même suivi d'une valeur (composée d'un ou plusieurs éléments) et se terminant par un point-virgule.

Dans cet exemple concret nous avons un certain nombre de propriétés agissant sur les points suivants :

la propriété position permet de déterminer le type de positionnement de l'élément ;
les propriétés top et left permettent de spécifier la position verticale et horizontale de l'élément ;
la propriété width permet de déterminer la largeur de l'élément ;
la propriété border permet de déterminer la taille, le type et la couleur de la bordure ;
la propriété padding permet de déterminer des marges internes ;
les propriétés font-size et font-weight permettent de déterminer la taille et la graisse du texte ;
la propriété background permet de déterminer l'image à afficher en arrière-plan ainsi que sa répétition, sa position et une couleur unie ;
la propriété color permet de déterminer la couleur du texte.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 02 : Décomposition d'une règle CSS : les déclarations</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
#contenu {
        position :         relative;
        top :              10px;
        left :             100px;
        width :            70%;
        border :           2px dashed #000000;
        padding :          12px;
        font-size :        1.2em;
        font-weight :      bold;
        background :       url('../images/logo.gif') no-repeat center;
        color :            rgb(125,200,100);
}
</style>
</head>

<body>

<h1>
Exemple 02 : Décomposition d'une règle CSS : les déclarations
</h1>

  <div id="contenu">
    <p>
Un exemple de diverses déclarations...
    </p>
    <p>
avec notamment une image, une couleur de police, une bordure...
    </p>
  </div>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.