Moi je dis bravo pour TopStyle un outil très intéressant pour coder des classes proprement avoir un petit aperçue de ce qu'il se passe et des tas de petits avantages.
"Ceux qui touchent" au contraire utilise notpad2 ou n'importe quel bloc note, ils ne s'embarrassent plus d'autres programmes.
Le problème avec les cms c'est que le coeur est codé de l'an 40, les nouveaux modules sont vaguement xhtml, la css est codé "en fonction", elle fait souvent 10 km de long avec une class par balise et parfois plus...
Le plus propre pour apprendre xhtml et css, c'est comme tout : la ligne droite.
Tu prends une page blanche, une feuille de style css vierge et tu commences pas à pas.
une div avec bordure, dedans un h1 puis un p puis un ul.
Tu joues avec les styles pour placer, habiller ces éléments en cherchant a faire le moins de code possible pour le plus de flexibilité grace aux propriétés d'héritage du css.
Info gratuite : en disant
<div class="ma_div">
<h1>....</h1>
<p>...</p>
<ul><li>...</li></ul>
</div>
Il est possible de "viser" tous les éléments dans la css, un par un sans autre class.
Comment ?
Grace à une certaine façon d'appeler les class:
DIV.ma_div{....} ceci concerne la div
DIV.ma_div H1{...} concernera le H1, seulement celui présent dans une div de class "ma_div"
DIV.ma_div P....
DIV.ma_div UL...
DIV.ma_div UL LI... cette façon de coder pointe vers des éléments hérité, "contenu dans", c'est très précis et ça permet aussi de ne pas surcharger le code html.
Les débutants se heurtent souvent aux différentes façons de coder une class ou id qui peuvent paraître superflues.
Mais :
.bleu{...}
n'a rien à voir avec
DIV P.bleu{...}
ni
DIV.header P.bleu{...}
Le premier cas est une class volante pouvant s'appliquer plusieurs fois dans le code html et à n'importe quoi.
Le deuxième cas s'applique a tout P de class "bleu" contenu dans une div.
Le troisième cas ne s'applique qu'au P de class "bleu" contenu dans la les div de class "header".
Mais ça se complique quand on définit ses class en plusieurs étapes.
Exemple :
.bleu{color: blue;}
3 lignes après
.bleu{font-weight:bold;}
Donne : {color:blue; font-weight:bold}
Par contre
DIV.header P.bleu{color:blue}
3 lignes après
P.bleu{font-weight:bold;}
Donne : {color:blue;}
Le fait de définir un P.bleu avec la méthode de ciblage bloque toute modification ultérieure. Ceci est souvent cause d'incompréhensions.
En règle général, le fait de s'épandre en trop de class finissant par agirent les une contre les autres, ruines tous les efforts des apprentis codeurs.
Le CSS c'est simple, si on l'applique avec une méthode stricte et un code html simple simple simple. (un site complexe pouvant être codé de façon simple justement grâce à la puissance de la css qui fait le sale boulot des positionnements acrobatiques.)
Message édité par Lactique le 29-11-2007 à 22:29:45
---------------
Studio CréeAll