Bases du CSS et outil d'informations sur la structure DOM d'une page

Publié le par Francisek

Niveaux: Privilege Premium

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 !

Petits rappels de base du CSS

 

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.

 

Encore un peu de ciblage

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.

Obtenir des informations sur la page

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 !

Publié dans CSS et Design

Commenter cet article

sugi 15/08/2006 13:54

Super :-)
Merci, ça fonctionne!^_=

Bon dimanche

Francisek 15/08/2006 17:12

 Mais on est mardi !

sugi 14/08/2006 15:25

Bon finalement ça marche pas sur mon blog!
Quand je clic sur l'icone la fênêtre s'ouvre bien mais rien ne s'affiche à part le texte explicatif, j'ai beau faire Ctrl...rien, nada!!^o^""
J'ai fini par le mettre dans l'entête du blog et j'ai entouré les script par la balise "P" Rien n'y fait...:-(

sugi la fourmiz

Francisek 14/08/2006 16:59

 Le script était en conflit avec un autre, je l'ai réctifié, il fonctionne maintenant.

sugi 14/08/2006 15:12

J'avais loupé cette article ^o^
Je l'ai mis dans mon bas de page et la petite icone est visible dans mon module déroulant "en vrac" Je comprend pas trop ce qu'il fou la mais bon ça marche c'est le principal héhé ;-)

biz
sugi lafourmiz

Tchopi 21/12/2005 12:42

Bonjour francisek,
Souhaitant changer les couleurs d'un over blog, j'ai été tres attentif à votre site. Cependant, meme en inserant les lignes script,je n'arrive pas à avoir acces au css de la page. Peut etre est ce parce que je suis en mode "confiance" ? Merci de m'aider.

Francisek 21/12/2005 16:13

 Effectivement, en mode Confiance, ce script n'est pas utilisable, comme l'indique l'absence de l'icône Confiance dans les niveaux requis.

iso 07/12/2005 22:51

Bonjour
Je n'arrive pas à trouver cet icone pour faire apparaitre l'outil.
Je ne le vois pas non plus sur votre site.

Cordialement

Francisek 08/12/2005 00:51

 Effectivement, pas d'icône puisque le script n'a pas suivi les changements d'URL (qui datent de dèjà loin). Et hop, un script à jour qui fonctionne !