[css] cascade des fois oui des fois non

Version imprimable

Bonjour qq chose que je ne comprend pas...
par exemple ce fichier css
Code:

1 2 3 4 5 6 7 8 9 .class1{ background: Red; text-align: right; color: black; } .class2{ text-align: left; color: Lime; }
et ce fichier html appelant ce css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <head> <title>CSS Exercise for eAIP</title> <link rel="stylesheet" href="mystyle.css" type="text/css"/> </head> <body> <p class="class1"> p with class1 <p class="class2">class2, child of the p class=class1</p> </p> </body> </html>
à priori le text p class="class2" devrait hériter des propriétés de class1 en mettant le background en rouge or ce n est pas le cas...
quelqu un aurait il une explication à fournir car ce n est pas évident

04/01/2006, 17h20
denisC

Pourquoi veux-tu que le style de l'élement externe s'applique à l'élement interne. Le cascading du CSS n'a rien à voir avec l'enboitement HTML des élements....
04/01/2006, 17h27
luta

alors je n ai rien compris...
pourtant ma class1 s applique bien à tout l ensemble... peut on m expliquer?

Ah ouai exacte... pourquoi ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en">
 
  <head>
    <title></title>
    <style type="text/css">
    p{
 
    }
    .class1{
       background: Red;
       text-align: right;
       color: black;
    }
    .class2{
       text-align: left;
       color: black;
    }
    </style>
  </head>
 
  <body>
 
  <p class="class1">
      p with class1
      <p class="class2">class2, child of the p class=class1</p>
  </p> 
 
  </body>
</html>

.. pourtant là je n'ai défini aucunstyle par defaut aux balise "p".. par contre si je remplace mes "p" par des "span" là j'aurai bien un background rouge dans mon "span" child.

04/01/2006, 17h29
luta

exactement...
en plus voila ce que j ai trouvé sur un site

Citation:

I said above that style sheets made it important to understand this. Why? Well, with cascading style sheets, elements often (and with CSS2 can always be forced to) inherit properties from the elements which contain them (otherwise known as their parent elements). This means that if you give the body of the page certain properties (for example font and color) then every element within the page will inherit these properties- there is no need to set the font and color again for each element, such as list items or paragraphs.

..en ce qui me concerne ça veut dire ce que ça veut dire...
05/01/2006, 11h54
denisC

Citation:

Envoyé par tiscars

alors je n ai rien compris...
pourtant ma class1 s applique bien à tout l ensemble... peut on m expliquer?

Effectivement, j'ai dit des c.... :oops:
C'était le soir, j'étais fatigué, trop de café, etc.... :wink:

Bon, allons, essayons une explication un peu plus sérieuse.

Je pense que ça vient du fait qu'il est interdit par la norme HTML :

Citation:

Envoyé par W3C

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

A partir de là, les navigateurs ont apparement décidé de ne pas propager les propriétés des p aux blocs enfants (comme il ne doit pas y en avoir).

Ca me parait plus convaincant comme explication :D
05/01/2006, 11h57
luta

oui tout a fait... merci
petite question, y a t il un site qui référence (en anglais si possible):
- les éléments pouvant être contenant pour chaque élément (typiquement ce que tu vient d annoncer.
- les styles qui peuvent être définis pour ceux ci
:lol:
05/01/2006, 13h17
denisC

En francais:
http://giminik.developpez.com/xhtml/index.php

Ou en anglais:
http://zvon.org/xxl/xhtmlReference/Output/index.html

Ca te donne les elements parents/enfants ainsi que les proporiétés applicables.