Discussion :

[frmars]

Bonjour,

Je suis en plein apprentissage et je commence à avoir une bonne vision d'ensemble des CSS.
Je bute cependant toujours sur le même sujet pour lequel je ne trouve pas de "leçon" claire : les déclarations "assemblées".

Exemple :

• Quelle est la différence entre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.monstyle img {margin: 3px}
.marègle h1 {font-size:20px}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
img.monstyle {margin: 3px}
h1.marègle {font-size:20px}

• Je vois parfois des règles "enchainées" (sans virgule) et j'ignore leur siginification :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.montstyle .marègle {width: 25%}

• ou des déclarations à rallonge que j'ai bien du mal à saisir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ol.règle li div.style {border:1px}

etc.

-----------------

Où puis je trouver une synthèse complète la dessus ?

[thelvin]

[...] et je commence à avoir une bonne vision d'ensemble des CSS.

Hum. C'est bien d'être optimiste, mais là j'en doute un peu. Il y a encore à apprendre.

Où puis je trouver une synthèse complète la dessus ?

J'avoue, j'ai eu du mal à trouver.
On appelle ça les sélecteurs CSS. J'ai trouvé un tutoriel ici : http://css.developpez.com/tutoriels/...lecteur-css-3/. Je recommande de se limiter aux sélecteurs CSS 2.1 pour l'instant.

[12monkeys]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.montstyle .maregle {width: 25%}

Cette règle signifie que le style va s'appliquer à tout élément disposant d'une classe nommée "maregle", sachant que cet élément doit être le descendant (peu importe le niveau : enfant, petit-enfant...) d'un autre élément disposant lui même d'une classe nommée "monstyle".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="monstyle">
le style ne s'applique pas à cet élément
</div>
 
<div class="maregle">
le style ne s'applique pas à cet élément
</div>
 
<div class="monstyle">
le style ne s'applique pas à cet élément
  <div class="maregle">
le style s'applique à cet élément
  </div>
</div>

Ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ol.règle li div.style

Le style s'applique à tout élément div pour lequel a été déclaré une classe de nom "style" étant l'enfant d'un élément li, lui même enfant d'un élément ol pour lequel a été déclaré une classe de nom "règle"...

C'est ce qu'on appel les sélecteurs de descendance...

[frmars]

Merci pour vos deux réponses