Accueil > Développement web > Les feuilles de style CSS > II) Structure d’un fichier CSS
486 visites

II) Structure d’un fichier CSS

dimanche 25 mars 2012

Version imprimable de cet article Version imprimable

Un fichier css contient les éléments, id, classes et évènements utilisés sur une page web, auxquels on associe des attributs de style et leur valeur.

  • un bloc d’attributs de style associés à un élément est situé entre deux accolades "{ }" après la déclaration dudit élément.
  • un attribut est séparé de sa valeur par deux points ":"
  • les attributs sont séparés entre eux par des points-virgule ";"

On peut mettre tous les attributs sur une même ligne, mais il est plus propre de déplier le bloc et d’indenter le code.

ce qui donne :

élément {
        attribut:valeur;
}

Un élément quelconque, en tant que tel, sera indiqué par le nom de sa balise html (<img src=.....> donnera img, <a href=.... ></a> donnera a, <div id=...></div> donnera div, etc).

Par exemple :

body {
        background-color:black;
}

mettra une couleur d’arrière-plan en noir pour l’élément body, qui correspond au corps de la page.
A noter, si le contenu ne descend pas jusqu’en bas de la fenêtre, il n’y aura qu’une partie de la fenêtre en arrière-plan noir. (Voir article sur la gestion de la taille des éléments web)

un identifiant d’élément (par exemple pour un bloc particulier <div id="contenu"></div>) sera indiqué par un #

Par exemple :

#contenu {
        position:absolute;
        left:237px;
        top:55px;
        bottom:30px;
        right:0px;
        overflow-y:auto;
        font-size:1.2em;
}

une classe (par exemple pour une classe "générique" <div class="table_page"></div>) sera indiquée par un point "."

.repondre {
        font-size:2em;
}

un élément possédant un identifiant et disposant en plus d’une classe sera indiqué comme ceci :

#contenu.cl_article {
        right: 51px;
}

ici, le bloc identifié par contenu, s’il est en plus de classe cl_article, sera à 51px du bord droite de son conteneur.

Un élément disposant de plusieurs "versions" en fonction des évènements sera indiqué par élément :évènement.

Par exemple, pour un bloc à identifiant unique <div id="zone_droite"></div> :

#zone_droite {
        width:50px;
}

#zone_droite:hover {
        width:300px;
}

Ce bloc fera 50px de large par défaut, mais lorsque la souris passera au-dessus du bloc, celui-ci s’élargira à 300px.
C’est le cas du bloc situé à droite de cette page.
Cela permet de déplier/replier ou de rendre visible/invisible un élément facilement, juste avec quelques attributs de style, sans script compliqué.

A noter, certains navigateurs (la série des Microsoft Internet Explorer) ne gèrent pas le hover ailleurs que sur les liens.

On peut aussi définir un style commun à plusieurs éléments/identifiants/classes/évènements. Ceux-ci seront séparés par des virgules.

Par exemple :

a.spip_out, a.spip_out:visited, a.spip_out:hover {
color: #42ADFB;
}

#entete, #pied {
        width: 100%;
        padding: 0px;
        border: 0px;
}

Enfin, on peut aussi imbriquer des éléments/identifiants/classes/évènements.

.menu h2 {
        font-weight: bold;
        text-align: center;
        color:darkorange;
        font-size:2.5em;
}

ici, on applique un style particulier aux éléments h2 situés dans un bloc de classe menu

#navigation a, #navigation a:hover, #navigation a:visited {
        color: #999999;
}

un style particulier aux liens situés dans le bloc d’identifiant navigation, quel que soit leur état (normal, survol, déjà visité)

#zone_droite:hover #zone_droite_contenu h2 {
        font-size:2em;
        line-height:2em;
}

et là un style aux éléments h2 situés dans le bloc zone_droite_contenu lui-même situé dans le bloc zone_droite, lorsque celui-ci est survolé par la souris.

Répondre à cet article

Total 190894 visites depuis 2730 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail