Le CSS ne s'applique pas à certains blocs

**cedricleval** · 27/08/2021, 08h55

Bonjour à tous,

J'ai un comportement que je ne comprends pas de mon code CSS / HTML: je n'arrive )as à appliquer un style (font-family:Calibri dans mon exemple) à certains type de blocks tels que html,footer,header,p...
Par contre cela est bien pris en compte sur les balises h1,h2...

Pourriez vous m'eclairer ?

Merci
Cedric

Voici mon code CSS:

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
33
34
35
36
37
38
39
40
41
42
43
44
<style>
		html,footer,body {
/*			font-weight: normal;	
			font-family: Calibri;*/
		}
		p {
			color: blue;
			font-family: Calibri;/* <!...Voir POURQUOI FONT FAMIL MARCHE PAS DANS BODY,FOOTER,P...>*/
		}
		h1,h2 {
			background-color: lightblue;
			padding:red solid 20px;
			align-content: ;
			font-size: 1em;
			text-align: center;
			font-weight: normal;	
			font-family: Times New Roman;
		}
		.master {
			background-color: coral;
		}
		#logo {
			background-color: pink;
		}
		#logo {
			background-color: pink;
		}
		.conteneur-prof {
			display: table;
			background-color: yellow;
			width: 50%;
			text-align: center;
			height: 180px;
		}
		.contenu-prof {
			display: table-cell;
			vertical-align: middle;
/*			position: relative;
			top:50%;
			transform: translateY(-50%);*/
/* On met soit display tabel et table-cell, soit la position relative et le transform /*
 
		}
</style>

Et Voici mon

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr">
<head>
	<title> Club de Tae Kwon DO d'ici</title>
	<link rel="stylesheet" type="text/css" href="./css/revision1.css">
 
</head>
<body>
	<p>
		<h1>Bienvenue sur le site</h1>
		<audio autoplay controls="">
			<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\Van-Halen-Jump-Official-Music-Video.mp3" type="audio/mp3">
		</audio>
	</p>
 
	<p>
		<h2><a href ="https://fr.wikipedia.org/wiki/Taekwondo"; target = "-blank">Le TaeKwonDo, c'est quoi ?</a></h2>
	</p>
	<p>
		<h2>Les principales ceintures par ordre de progression :</h2>
	</p>
	<ol>
		<li>Blanche</li>
		<li>Jaune</li>
		<li>Orange</li>
		<li>Vert</li>
		<li>Bleu</li>
		<li>Marron</li>
		<li>Noire <i>(Dans...)</i> </li>
	</ol>
	<p>
		<h2>Voici les principaux professeurs :</h2>
	</p>
	<div class = "conteneur-prof">
		<div class = "contenu-prof">
			<ul>
				<li><a href ="#chang" target = "-blank">Maitre Chang</a></li>
				<li><a href ="#lee" target = "-blank">Maitre Lee</a></li>
				<li><a href ="#miyagi" target = "-blank">Maitre Miyagi</a></li>
			</ul>
		</div>
	</div>
 
	<p>
		<h3 class ="master" id="chang">En savoir plus sur <b>Maitre Chang</b></h3>
		<p>
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
		</p>
		<p>
			<h4>Video de presentation du maitre</h4>
			<video controls autoplay width="320" height="240">
				<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
			</video>
		</p>
	</p>
	<p>
		<h3 class ="master" id="lee">En savoir plus sur <b>Maitre Lee</b></h3>
		<p>
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
		</p>
		<p>
			<h4>Video de presentation du maitre</h4>
			<video controls autoplay width="320" height="240">
				<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
			</video>
		</p>
 
	</p>
	<p>
		<h3 class ="master" id="miyagi">En savoir plus sur <b>Maitre Miyagi</b></h3>
		<p>
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
		</p>
		<p>
			<h4>Video de presentation du maitre</h4>
			<video controls autoplay width="320" height="240">
				<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
			</video>
		</p>
 
	</p>
</body>
 
<footer>
	<p>
		<a href = "mailto:cedriclevalegant@gmail.com">Contactez nous</a></p>
	<p>
		<a href = "./voyageJapon.html"; target = "-blank">En savoir plus sur le Japon !</a>
	</p>
	<p>
		<h4 id ="logo" >Logo TKD</h4>
		<object
			type="application/pdf"
			data="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondoLogo.pdf"
			>
 
		</object>
	</p>
</footer>
</html>

**darkstar123456** · 27/08/2021, 10h26

Bonjour,

Ca fonctionne pourtant.

D'ailleurs, il suffit d'écrire :

Code css :

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

1
2
3
body {
   font-family: Calibri;
}

La seule raison pour la quelle ça pourrait ne pas fonctionner c'est si vous n'avez pas la font Calibri installée sur votre ordi.

Test visible ici : https://codepen.io/DarkStar123456/pen/xxrGJLq

**cedricleval** · 27/08/2021, 11h48

Sur un navigateur, chez moi, ca ne fonctionne pas.
j'ai même simplifié le code été ça marche toujours pas:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="fr">
	<head>
		<link rel="stylesheet" type="text/css" href="./css/revision2.css">
	</head>
	<body>
	texte du body
		<h2>
		texte du H2
		</h2>
	</body>
 
</html>

Code qui marche CSS mais que pour le h2:

Code :

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

1
2
3
4
5
6
7
8
<style>
		body {
			color: red;
  		}
		h2 {
			color: red;
		}
</style>

Et si je change mon CSS en mettant:

Code :

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

1
2
3
4
5
<style>
		h2,body {
			color: red;
  		}
</style>

Alors dans ce cas ca ne marche ni pour le h2 ni pour le body...

**darkstar123456** · 27/08/2021, 12h05

Bonjour,

Quel navigateur utilisez-vous ?
Est-ce un navigateur standard et mis à jour régulièrement ?

Je vois que vous mettez des balises <style></style> dans votre code.
On est d'accord que vous ne les mettez pas dans votre fichier revision2.css, n'est-ce pas ?
C'est juste pour la colorisation syntaxique sur le forum j'imagine ?

J'ai refait un exemple, et ça fonctionne parfaitement bien : https://codepen.io/DarkStar123456/pen/qBjdJEz

Par contre, si vous vous attendez à ce que votre titre "Le TaeKwonDo, c'est quoi ?" soit vert dans mon dernière exemple, bien sûr que non car la balise est <a></a> et non <h2></h2>

**cedricleval** · 27/08/2021, 14h39

Bonjour,

Problème résolu grâce à vous: en fait j'avais bien mis les balises <style> dans mon fichier css.
A cause de cela, le fichier était mal compris.

Si j'enlève les balises <style></style>, tout fonctionne parfaitement.

Merci
Cédric

Le CSS ne s'applique pas à certains blocs

CSS

Vue hybride

Discussions similaires

Partager

Partager