07-01-2008

DECRYPTAGE DE LA FEUILLE DE STYLE GENERALE

SOURIS

La feuille de style c'est quoi d'abord !?

Une feuille de style permet de spécifier des caractéristiques de mises en formes d'un document Htlm, qui sont rattachées à des balises.

Plus clairement, ça permet de définir pour chaque balise HTML, une mise en forme spécifique.


Exemple :

Prenons la balise <H2> qui permet sur Canalblog de définir la date dans les messages, On va pouvoir rattacher une police, une taille, un code couleur, centré, souligner, mettre en majuscule etc...
Chaque fois qu'on utilise la balise
<H2> dans un document, tout le texte situé entre cette balise <H2>Le texte</H2> recevra cette mise en forme.

C'est pas facile au début de savoir à quoi correspondent tous ces blocs de codes dans la feuille de style...
Ce que j'appelle un bloc c'est ça :

#content {
    float: left;
    width: 600px;
    background-color: #FDF7FB;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}

Tous les blocs commencent par un # ou un . (point) sauf le premier celui du body.
Ensuite c'est le nom du bloc(content dans cet exemple)
Suivi d'une parenthèse d'ouverture {
Puis au milieu les lignes ce code qui définissent les spécificités
le bloc se terminent par une parenthèse de fermeture }

Pour vous faciliter la tâche du décodage, j'ai noté au dessus de chaque bloc en rouge, à quoi il correspondent et en bleu le détails des lignes de code.

Feuille de style générale décryptée

Feuille de style générale décryptée (version Bloc-notes)

Posté par Demolite - Permalien [#]
Tags :