Ma sémantique est mauvaise :(

Vano · 17 Février 2006

Salut à tous !

Encore recemment, je faisais de grandes feuilles de style CSS ou chaque type de police, tableau etait défini. Sous la forme d'un .arial_12_blanc_gras, etc.. ce qui me faisait des feuilles de style très lourdes. Ma méthode est apparemment mauvaise, il faut utiliser "p" "h1" et compagnie !

Je trouve en effet que ce système est plus logique, mais comment faire pour définir certaines polices spécifiques ? Pour un texte que je voudrais en vert au lieu du bleu de la couleur de police par défaut, j'aurais donc 2 CSS : "p" avec les infos type de font, taille et ".vert" avec la couleur ?

Merci !

Oncle Tom · 17 Février 2006

Il est fortement déconseillé de nommer les classes et les ID de style avec des "contenus". Une classe '.vert' c'est très mauvais car le jour où tu voudras changer de couleur, avec une classe .vert{ color:red; } t'auras pas l'air malin.

Les #id permettent de découper "géographiquement" une page pour y appliquer des styles différents. Les classes elles sont utilisées pour altérer certaines balises seulement.

Tu peux très bien avoir plusieurs classes par balise:

Code:

/* style par défaut des paragraphes */
p{
text-align:justify;
margin:10px 0;
}

p.important{
border:1px solid #000;
padding:10px;
}

Photoshop user · 17 Février 2006

Oui, je pense comme The Jedi
Pense à la structure de ta page dans le (x)html et rajoute juste les conséquences en terme de police, bold, etc dans le css

HawkEye · 17 Février 2006

plus simplement,

dans ton css:

Code:

body { font-family: Arial; color: #000000; }

.rouge { color: #FF0000; }

.vert_gras { color: #00FF00; font-weight: bold; }

.bleu_souligne { color: #0000FF; text-decoration: underline }

et dans ton code html:

Code:

<body>

texte à mettre en noir, parfois en <span class="red">rouge</span>, parfois en <span class="vert_gras">vert et en gras</span> voire même dans les cas extrèmes en <span class="bleu_souligne">bleu, souligné !</span>

</body>

Résultat:

texte à mettre en noir, parfois en rouge, parfois en vert et en gras voire même dans les cas extrèmes en bleu, souligné !

...et si comme le souligne The Jedi, ces classes sont rattachées à certains types de textes, tu ne les nomme pas par leur contenu, mais par leur fonction:

.accroche {}
.discret {}
.evidence {}
.sketuveux {}

ce qui te permet de faire des modifications plus saines

@+

oberon · 17 Février 2006

Je soulignerais en plus que la "classite aigue" est une erreur classique de débutants qu'on a tous faite. Je me souviens encore de mes premières feuilles de styles et de mon html avec des classes de partout...

Le mieux est de très bien structurer son sdocument, parceque dans les faits on veut toujours styler différemment des zones de la page ou des types d'éléments.

Il faut donc avoir des trucs comme :

<div id="menu">
<ul><li><a>item1</a></li>...</ul>
</div>

et styler par rapport à la cascade plutôt que de mettre des classes:

#menu li {}

Ca te permettra d'avoir un code html plus léger et une fds organisée selon la structure du document.