28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Il y a vraiment quelque chose qui m'échappe au niveau de la syntaxe des CSS.
J'ai beau lire les tutoriaux, acheter des bouquins, quand je regarde les feuilles CSS de certains sites, tout s'embrouille (ils ont souvent des habitudes d'écriture différente" et je n'arrive pas faire la synthèse.
Surtout je voudrais que mon code soit propre et conforme à la syntaxe préconisée.

Dites moi si je me trompe mais : en prenant comme exemple de nom "bar"
1/ si je tape dans la CSS: .bar ("point" bar) suivi des paramètres de style, je dois appeller ce style dans la page Html par un
class="bar". ou un DIV class="bar" 
?
Oui ?

2/ si je tape dans la CSS:
#bar
, je dois l'appeller par un
DIV id="bar" 

oui ?
C'est identique si je met ds la CSS:
DIV.bar 
(appellée par
DIV id="bar"
.)
Qulle différence entre les deux ?
Peux t'on utiliser l'une ou l'autre , est-ce une autre syntaxe ?

3/Si dans une DIV, je veux utiliser plusieurs styles (ici 3 styles différents), quelle est la meilleure méthode ?
Si j'écris ds l'HTML:
<DIV id="bar" ....>
<span class="bar1"> ....
<h1>......


je mets ds la CSS:
#bar {...}
.bar1 {...}
#bar.h1{....}


Merci de votre aide
Modifié par furet92 (03 Jul 2006 - 13:00)
Quand je vous dis que je m'embrouille, je viens de me rendre compte en relisant le post, justement une erreur sur le paragraphe 2.
je voulais dire:
#bar{...} ou DIV.bar{...} dans une CSS, c'est bien appelée en Html par :
<Div id="bar"....>
oui?

les 2 formulations sont correctes ?

MErci et désolé pour l'erreur
Bonjour furet 92 Smiley smile

En premier lieu, est-ce que tu pourrais baliser ton code proprement en utilisant le BBCode [ code][ /code] (sans les espaces) ?

Puis, as-tu lu l'excellent tutoriel : Quelle est la différence entre une classe et un id ?

Enfin, tu peux utiliser les classes multiples.

Suffit de séparer chaque classe par une espace :

.bleu {color: blue;}
.gras {font-weight: bold;}
.italique {font-style: italic;}

<p class="bleu gras italique">Je suis un paragraphe de couleur bleu, gras et en italique.</p>
mmm, alors moi je suis un débutant mais j'ai cette impression :

1/ le .bar fait référence, normalement, à un élément de CLASS="bar"
le #bar sera plutôt utilisé pour un élément d' ID="bar"

la différence est qu'un id est utilisé pour un élément unique.
Il ne devrait pas y avoir plusieurs id="bar" dans un même fichier html.
Par contre, tu peux avoir autant d'éléments que tu veux appartenant à la même class="bar" (ça fait penser aux classes de la conception objet, c'est un moule en sorte), et ils seront gérés par ton .bar dans ton CSS.

2/ oui pour ton #bar du css qui s'appliquera a l'élément d'id="bar" dans ton html.
Par contre je ne connais pas la syntaxe DIV.bar (à essayer donc).

3/ Tu dois pouvoir appeler ta class 'bar' sans souci mais bon, c'est peut-être un coup à s'emmêler les pinceaux.
Mais bon, tu as plusieurs possibilités dans ton cas, si ta span est unique tu peux lui appliquer un id au lieu d'une class par exemple.
et pour ton h1, si il est encapsulé dans ta div alors ça me paraît bien comme syntaxe.
MErci Stephan et RaGe pour vos réponses.

Et désolé Stephan, car en effet, j'ai complètement oublié d'utiliser le BB Code.

LE tutoriel cité dans ton post est en effet excellent, et je crois qu'il répond à mes questions. Celui-ci avait donc du m'échapper.

Merci pour vos éclaircissements.
furet92 a écrit :
j'ai complètement oublié d'utiliser le BB Code


Bonjour furet 92,

Pas grave puisque tu as toujours la possibilité d'éditer ton message pour corriger cela. Ainsi tu pourras en profiter pour ajouter un petit [résolu] dans le titre du sujet Smiley cligne

Bonne continuation