C'est très intéressant. Et quand on a un id combiné avec des classes, c'est l'id qui a le plus grand poids sur la meme propriété? (si j'ai bien compris).
Pas tout à fait, tout ce qui touche au HTML et au CSS est régi par l'ordre de lecture ou d'écriture du code. Pour le HTML c'est les premières lignes les plus importantes, soit :
Ouverture <html>
Règles, balises d'encodage et autres codes script <head>
Corps de la page <body>
Pour les CSS c'est l'ordre d'écriture des règles, soit :
Une classe
id sera la parente en général puisque qu'attribuée à un contenant, elle peut donc donner des règles aux classes multiples qu'elle contient, n'oublie pas que l'écriture d'une classe peut être ciblée, par exemple :
#menu .final a:link {} ou encore pour une image
#menu .final img {}, l'écriture des styles est primordiale, tu obtiens des choses très spécifiques si tu définis correctement et/ou précisément une règle.
Ainsi tu vas donner des attributs génériques à un contenu (dimensions et comportement en général) et souvent laisser les styles enfant au contenu s'occuper du reste mais ça peut s'appliquer au contenu (la typographie par exemple).
Tu peux trouver des choses comme cela par exemple :
#menu {} <- attributs du conteneur unique
#menu ul {} <- attributs de la liste à points (comportement et dimensions du menu)
#menu ul li {} <- attributs des lignes de la liste (qui servent au menu)
#menu ul li a {} <- attributs des liens du menu (styles des "boutons")
#menu ul li a:hover {} <- attributs du survol des liens du menu (effet rollover)
On reste dans le contenant #menu, je peux toujours écrire une règle pour ul générique (ul {}) mais si je l'écris dans la feuille de styles après celle du #menu elle ne prendra pas le pas sur cette dernière
sauf si j'ai oublié un attribut donné à la générique et pas défini à celle du #menu.
Par contre si j'indique une couleur de texte rouge à #menu {} et que en dessous j'indique une couleur de texte bleue à #menu li {}, le texte hors contexte de liste à points sera rouge et celui dans les listes à points sera bleu. Rien de mieux que la pratique et surtout découvrir les astuces CSS qui sont sous ton nez dans chaque page que tu visites…
De manière naturelle on écrit les styles dans l'ordre de création soit :
Reset si besoin
Body/html
Structure (du plus grand au plus petit : container, header, menu, contenu, colonne, etc…
Le reste par poste (menu, titrage, liens, tableaux, formulaire, etc).
D'où l'importance des termes utilisés pour les styles et les commentaires qui aident la lecture des styles.
Avec Firebug les styles sont affichés dans l'ordre hiérarchique de leur application à l'élément inspecté et tu as le n° de ligne dans la feuille de styles.
Attention à ne pas oublier les standards qui agissent par défaut sur l'affichage si tu n'indiques pas de règles dans tes styles (les marges et interligne notamment), j'utilise souvent un "reset" CSS pour partir sur des bases saines (important avec Explorer et Opéra sur certains points).
=> donc après avoir vu les grandes lignes, il faut arrêter la pratique, et se mettre en pratique. Et quand on a des problèmes on retourne à la théorie?
Tout à fait… au boulot.
Ah oui, ca a l'air très pratique pour les débutants comme outils. Merci bcp. Si j'ai bien compris, on peut comprendre notamment plus facilement l'arborescence du document?
L'arborescence je la vois plutôt en affichant le code source (pom + Alt + U en général), Firebug c'est l'étude des styles et leur action, tu verras que l'on peut saisir des styles temporairement et voir leur action, de même tu peux désactiver temporairement un style, c'est vraiment le truc indispensable pour comprendre les CSS.
tu entends quoi par "pousser très en amont l'intégration des styles?
Une certaine école pousse à structurer les styles comme on le ferrait pour le code HTML, on part du principe des poupées Russes et j'ai réalisé des sites avec une dizaine de feuilles différentes (structure, textes et typo, menus, blocs génériques, etc), après tu peux les combiner selon les pages. Aujourd'hui je travaille pratiquement que sur des sites dynamiques et hors système de gestion des styles en Php (fusion de feuilles dans un appel de head) je n'utilise pas cette façon de faire. Bon ça c'est plus technique.
