Labs - Essai du CSS dans la partie Contenu du DizPerso

Cet article pour tester les nouvelles possibilités, du paramétrage de style, dans la partie "Contenu".

Les DIVs des blocs de la partie "Contenu" avec leurs IDs et leur Class.

Très intéressant dans cette partie, pouvoir paramétrer de façon différente :
- le bloc article
- le bloc article_commentaires
- le formulaire de saisie (j'y reviendrai en détail)
- le bloc article_liens
Tous ces blocs sont dans la partie "Contenu", donc dans le bloc(ID) #contenu , qui est géré dans le DizPerso.

La structure HTML de la partie "Contenu"

<div id="contenu">
    <div id="article">
        <h3></h3>
    </div>
    <div id="article_commentaires" class="contenu_commentaires">
        <h3>Commentaires</h3>
        <form action="" method="post">
        <fieldset id="commentaire">
        </fieldset></form>
    </div>
    <div id="article_liens">
        <h3>Liens</h3>
    </div>
</div>

Dans l'onglet "Modification directe du DizPerso", vous pouvez créer les règles pourchaque identifiant (ID) ou classe (CLASS) et ajouter les attributs qui modifieront la présentation de cettepartie. Cependant je vous conseille de lire le descriptif de la catégorie , pour voir comment employer ce CSS complémentaire.

Petit rappel, dans le CSS les règles peuvent être appliquées sur :

- sur des identifiants (id) la règle commence par lesigne dièse #

- sur des classes (class)la règle commence par unpoint .

- les sélecteurs HTML peuvent être également paramétrés, mais ils seront précédés par l'identifiant.

Exemples :

#article a
#article a:hover
#article p
#article ul
#article li

Le code CSS créé pour les éléments de la partie "Contenu", de cette page :

/* --------------------------  Article */
#article
{
background:#FFFFCC;
color:#663300;
border:3px inset #FFCC00;
}

/* --------------------------  Commentaires  */
#article_commentaires
{
background:#FFFF00;
color:#009900;
border:3px ridge #FFCC00;
}

/* --------------------------  Liens  */
#article_liens
{
background:#CC9900;
color:#FFFF00;
}

#article_liens a
{

background:#FFFF00;
color:#CC9900;
}

#article_liens a:hover
{
color:#FFFFFF;
}