CSS rappel des styles

**deglingo592003** · 30/04/2009, 11h18

Bonjour à tous, j'ai du reprendre un site internet pour le mettre à jour mais voila mes connaissance étant très faible dans ce domaine je viens vous posez quelque question pour voir si j'ai vraiment bien compris :p

alors petit rapel : je vous met entre balise code, ce qui se trouve dans mon fichier .css

application à tout ce qui est entre balise <body> et </body>

Code :

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

1
2
3
 
body{
}

application a l'aide d'un class="maclass"

Code :

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

1
2
3
 
.maclass{
}

application avec un id="monid"

Code :

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

1
2
3
 
#monid{
}

application a une sous balise, exemple : affectation au p du body

Code :

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

1
2
3
 
body p {
}

application a une sous balise bis, exemple : affectation au p pour id monid

Code :

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

1
2
3
 
#monid p {
}

application sous balise3

Code :

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

1
2
3
4
5
 
#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}

cela s'appliquera uniquement dans les li situé dans les ul situé dans les ul situé dans un id="sidebar" ?

seconde partie

maintenant passons à ce que je ne connait pas du tout

je vous donne des exemples, je pense que ce sera le mieux :p

Code :

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

1
2
3
4
5
6
 
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

est ce que cela sigifie que si je fait un class="centered" sur un div, par exemple, est ce que ce type de css ne s'appliquera que sur les balise img ?

un peu à la manière d'un

Code :

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

1
2
3
4
 
.centerd img{
code
}

après second code que je ne comprend pas

Code :

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

1
2
3
4
 
html>body .entry li {
	margin: 7px 0 8px 10px;
	}

la je sait pas du tout :p

troisième code

Code :

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

1
2
3
4
5
 
#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

cela s'appliquera que sur les a situé dans un id="prev" qui lui même est dabns un id="wp-calendar" ? car par contre dans le reste du css il n'éxiste pas de #prev seul il ne se trouve que dans cette ligne :/

voila je pense avoir tout dit ou presque, merci d'avance pour votre aide car là je suis un peu perdu !

**bengrum** · 30/04/2009, 12h43

Code :

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

1
2
3
img.centered {
 
}

Ce code ne s'appliquera qu'aux images qui ont la classe "centered"
code html :

Code :

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

<img src='' class='centered' />

Code :

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

1
2
3
.centerd img {
 
}

Celui-ci ne s'applique qu'aux images contenu dans un bloc de classe "centered" par exemple :

Code :

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

1
2
3
4
 
<div class="centered">
<img src='' />
</div>

Code :

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

1
2
3
4
#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

pour celui-ci : le css s'applique aux liens contenu dans un bloc d'id "prev" lui même contenu dans un bloc d'id wp-calendar. en html ça donne :

Code :

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

1
2
3
4
5
<div id="wp-calendar">
<div id="#prev">
<a href="">blabla</a>
</div>
</div>

j'en ai oublié un.

en css, le chevron permet de montrer la "filiation directe". donc pour que ça fonctionne, il ne faut pas qu'il y ai de balises entre ton <html> et ton <body>.

et IE6 ne comprend pas cette instruction donc je ne la conseille pas

en espérant t'avoir aidé, bon courage !

**deglingo592003** · 30/04/2009, 14h04

oki ca m'éclaire un peu

mais j'ai une toute dernière question

pour avoir un

Code :

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

1
2
 
<img src='' class='centered' />

il faut que le css soit déclaré comme cela :

Code :

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

1
2
3
4
 
img.centered {
 
}

est ce que si je défini juste un css comme cela

Code :

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

1
2
3
 
.centered {
}

est ce que le premier code marchera toujours ? ou faut-il obligatoirement le définir de cette maniere.

Code :

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

1
2
 
<img src='' class='centered' />

merci d'avance pour toute l'aide apporter qui éclaire mon ignorance

**Poulpynette** · 30/04/2009, 14h27

Les deux déclarations CSS sont bonnes.

La seule nuance c'est qu'avec celle-là :

Code :

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

1
2
img.centered {
}

Tu ne pourras utiliser ta classe que sur des <img />.

**deglingo592003** · 30/04/2009, 14h48

oki oki

je viens de trouver une nouvelle chose qui me parait bizarre a un endroit j'ai ce css là :

Code :

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

1
2
3
4
5
6
7
8
 
#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}
 
#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}

le premier signifie j'applique ce css pour les ul des ul où il y a un id="sidebar" et aussi pour les ol des ul où il y a un id="sidebar"

or le deuxieme reviens au "même" a part que on dit, tel style pour les ul des ul des ul dans sidebar et pour les ol des ul d'un sidebar

enfin je parle reviend au même pour le #sidebar ul ol

j'ai pas mal de doublon, triple quadruple ... :p de ce genre dans la feuille de style, c'est pas un peu des répétition inutile car au final il n'y aura que un style qui affectera les ol des ul ?

fiou j'arrive au bout de la compréhension mais c'est dur dur quand même de ce mettre dans ce genre de css :p

**12monkeys** · 01/05/2009, 14h36

Envoyé par deglingo592003

le premier signifie j'applique ce css pour les ul des ul où il y a un id="sidebar" et aussi pour les ol des ul où il y a un id="sidebar"

Pas tout à fait, sauf à ne pas t'avoir compris...

cela signifie que la déclaration va s'appliquer aux balises ul contenues dans une balise ul, elle même contenue dans une autre balise quelconque disposant d'un attribut id "sidebar".

Envoyé par deglingo592003

or le deuxieme reviens au "même" a part que on dit, tel style pour les ul des ul des ul dans sidebar et pour les ol des ul d'un sidebar

enfin je parle reviend au même pour le #sidebar ul ol

j'ai pas mal de doublon, triple quadruple ... :p de ce genre dans la feuille de style, c'est pas un peu des répétition inutile car au final il n'y aura que un style qui affectera les ol des ul ?

fiou j'arrive au bout de la compréhension mais c'est dur dur quand même de ce mettre dans ce genre de css :p

Tu as deux déclarations pour #sidebar ul ol, ce sera alors la dernière qui s'appliquera, la première sera écrasée par la seconde... Donc elle ne sert pas trop...

CSS rappel des styles

CSS

Vue hybride

Discussions similaires

Partager

Partager