Bases du CSS et outil d'informations sur la structure DOM d'une page
Beaucoup de blogueurs se demandent comment modifier dans le CSS l'aspect de tel ou tel élément de leur blog. Pour cela, il faut normalement éplucher le code HTML afin d'en connaître la structure.
Vous maîtrisez le CSS ? Zappez les notions de bases et passez au vif du sujet !
Dans le CSS, on associe des styles à des sélecteurs. Les sélecteurs sont répartis en 3 grandes familles :
- les redéfinitions de balise HTML
Ce type de sélecteur est composé du nom de la balise et redéfini le style des toutes les balises concernées.
Par exemple, pour changer la couleur de tous les liens (balise <a>) en vert, on écrira :
a { color: #00CC00; }
- les sélecteurs sur identifiant
Les balises HTML peuvent avoir un identifiant unique afin de pouvoir les manipuler (par le CSS ou le javascript). Cet identifiant est spécifié dans le code HTML de la balise par un attribut id :
<a id="identifiantLien">
Dans le CSS, on peut utiliser cet identifiant pour désigner un élément en particulier en le faisant précéder d'un caractère dièse :
#identifiantLien { font-size: 12px; }
- les sélecteurs de classe
Le HTML permet aussi de définir un ensemble d'éléments qui pourront être ciblés en groupe. Ceci est spécifié dans l'attribut class de la balise HTML :
<a class="texteJaune">
Dans le CSS, on utilise cette classe en en faisant précéder le nom par un point :
.texteJaune { color: #FFFF00; }
Tous les éléments de la page dont la classe est texteJaune auront un texte de couleur jaune.
Noter que l'on peut combiner les différents types de sélecteurs en les accolant afin de parfaire le ciblage.
Ainsi la ligne suivante ne s'appliquera qu'aux balises HTML <a> de classe texteJaune :
a.texteJaune { color: #FFFF00; }
Inversement, si dans le code HTML il y a un lien d'identifiant identifiantLien et de classe texteJaune il correspondra aux 3 règles CSS données en exemple. On voit tout de suite qu'il y a un conflit entre la première et la troisième règle qui précisent toutes deux des couleurs de texte différentes. La règle qui s'applique alors est celle de l'écrasement : le selecteur définit en dernier prend le pas sur ceux qui entrent en conflit avec lui.
Il est souvent nécessaire de pouvoir définir des styles selon que l'élément est inclus autre ou non. Par exemple pour changer la couleur des liens dans les modules mais pas dans le reste du document. On parvient au résultat escompté en utilisant un sélecteur contextuel. Il consiste en une liste de selecteurs. Par exemple pour ne changer en vert la couleur de tous les liens qui sont dans un élément de classe box, on écrira :
.box a { color: #00FF00; }
Pour toutes les propriétés du CSS, leur compatibilité avec les navigateurs et des exemples, le tout en français, consultez Mediabox.
Bien maintenant que nous avons les bases, au boulot !!! Pas facile à lire le code HTML, hein !!
Allez je vous donne donc un petit coup de pouce avec mon script cssinfo.
Cliquez sur cette icône pour faire apparaître l'outil (en haut de la page). Déplacer la souris en pressant la touche Ctrl au dessus de l'élément à analyser. Vous pourrez alors visualiser en temps réél les attributs, les styles en ligne, les ascendants et le code HTML théorique de l'élément désigné.
Dans la barre de titre de la fenêtre, vous verrez le nom de la balise et si elle a un identifiant ou une classe.
Le panneau principal, liste
- les attributs définis, leur type et leur valeur
- les styles CSS en ligne (attribut Style) et ceux par défaut du navigateur
- la hiérarchie DOM liste tous les ascendants de l'élément dans le document
- la définition HTML donne le code HTML de la balise pour le navigateur en cours.
Avec ceci, vous pourrez cibler sans aucun problème les éléments de vos pages web et créer de superbes styles CSS !!
Alors comment faire pour l'utilisez dans vos pages ? Rien de plus simple, il suffit d'insérer cette ligne de code HTML dans un élément visible de votre page (pour over-blog, l'entête, le pied de page, un module ou un article en mode HTML) :
<script type="text/javascript" </script>
Le code vous ajoutera la petite icône, et vous profiterez constament de la dernière version de cssinfo !!
Note pour over-blog :
Ce script fonctionne pour les blog de niveau Privilège et Premium, si vous avez des difficultés pour le mettre en place, essayez de mettre la ligne de code ci-dessus dans un paragraphe : <p><script type="text/javascript" </script></p>
Comme toujours commentaires, suggestions, critiques et louanges sont les bienvenues ici !