CSS3 et HTML5 sélecteur par classe / font-size / Paragraphes hiérachisés..

**friendofweb** · 11/06/2015, 18h02

Bonjour,

J'ai acheté un bouquin pour apprendre le CSS et donc pour bien faire, le CSS3. Il s'agit de "HTML5 et CSS3".
Le but étant d'utiliser des tailles de police différentes...
L'exemple proposé est le suivant :

Code :

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

p.normal { font-size: 1 em; }

Code :

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

p.important { font-size: 1.2 em; }

Code :

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

p.fondamental { font-size: 1.5 em; color: green; }

Voici le contenu de la page (à l'extension htm conseillé par l'auteur) :

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
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>Paragraphes</title>
		<link rel="stylesheet" type="text/css" href="paragraphes.css" />
	</head>
	<body>
	<h1>"Programmation objet"</h1>
	<p>
	blabla
	</p>
	<h2>Paragraphe de classe "normal" (Lorem ipsum - texte aléatoire...)</h2>
	<p class="normal">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin velit odio, posuere sed erat sit amet, fermentum imperdiet ante.
	Nunc interdum neque sit amet metus vestibulum, sed sollicitudin erat vulputate. In luctus justo at nunc dignissim condimentum.
	Phasellus eleifend enim sit amet pharetra dignissim. Aenean eu tempor massa. Curabitur et lacus tincidunt, bibendum enim nec, lacinia orci.
	Maecenas dui urna, efficitur et ex non, pretium auctor nisi. 
	</p>
	<h2>Paragraphe "important"</h2>
	<p class="important">
	Aliquam sed quam lobortis, ullamcorper ligula sit amet, ultricies lectus.
	Etiam placerat mauris id dictum ornare. Duis efficitur leo lacinia, consectetur leo fermentum, malesuada enim. Vestibulum tellus tellus, faucibus in fermentum id, pharetra at quam.
	Cras convallis, mi fermentum dignissim tempus, nulla odio sodales velit, non pellentesque arcu sem in velit.
	Aenean sollicitudin tellus vitae augue pulvinar, vel tempor urna feugiat.
	Morbi auctor hendrerit ultricies. Pellentesque sit amet efficitur massa. 
	</p>
	<h2>Paragraphe "fondamental"</h2>
	<p class="fondamental">
	Quisque nec lacus sed odio dapibus suscipit. Phasellus ac quam eros.
	Mauris eget elementum mauris. Integer ut suscipit nunc, ut malesuada metus.
	Proin a erat vel mauris molestie porttitor. Nam efficitur eros ut feugiat blandit. Sed a feugiat odio. 
	</p>
	<a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-size">css - font-size</a>
	</body>
</html>

Voici le contenu de la page css (répertoire courant) :

Code :

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

1
2
3
p.normal { font-size: 10 em; }
p.important { font-size: 20 em; }
p.fondamental { font-size: 25 em; color : green; }

J'utilise firerfox 38.0.5, IE 11xx, les dernières version de : google chrome, safari
Avec firebug, je me rends compte que seul le code CSS suivant est reconnu : (font-size... est ignoré)

Code :

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

1
2
3
4
5
6
7
p.normal {
}
p.important {
}
p.fondamental {
    color: green;
}

J'ai fait quelques recherches sur votre site pour voir s'il y avait erreur de syntaxe :

http://designshack.developpez.com/tu...oduction-css3/
http://debray-jerome.developpez.com/...teurs-en-css3/

et donc je ne comprends pas pourquoi "font-size" semble être ignoré.
J'imagine que maintenant c'est le HTML5 et non le 4 qui est utilisé, comme pour le CSS3 au lieu du 2...

Merci, pour votre intérêt !

**friendofweb** · 11/06/2015, 19h23

L'unité "em" doit être attachée..
exemple :

Code :

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

p.normal { font-size: 1em;}

pour:

Code html :

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

<p class="normal">Police dont la taille est de 10px</p>

source intéressante :

https://developer.mozilla.org/fr/docs/Web/CSS/font-size

**NoSmoking** · 14/06/2015, 11h43

Bonjour,

L'unité "em" doit être attachée..

TOUTES les unités doivent être attachées.

● 4 Syntax and basic data types

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

CSS3 et HTML5 sélecteur par classe / font-size / Paragraphes hiérachisés..

CSS

Discussions similaires

Partager

Partager