[css] cascade des fois oui des fois non

**luta** · 04/01/2006, 16h38

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

Code :

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

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 :

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

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

**denisC** · 04/01/2006, 17h20

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....

**luta** · 04/01/2006, 17h27

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

**dhjapan** · 04/01/2006, 17h28

Ah ouai exacte... pourquoi ?

Code :

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

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.

**luta** · 04/01/2006, 17h29

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

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...

**denisC** · 05/01/2006, 11h54

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....

C'était le soir, j'étais fatigué, trop de café, etc....

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 :

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

**luta** · 05/01/2006, 11h57

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

**denisC** · 05/01/2006, 13h17

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.

[css] cascade des fois oui des fois non

CSS

Vue hybride

Discussions similaires

Partager

Partager