CSS3 et HTML5 sélecteur par classe / font-size / Paragraphes hiérachisés..
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:
p.normal { font-size: 1 em; }
Code:
p.important { font-size: 1.2 em; }
Code:
p.fondamental { font-size: 1.5 em; color: green; }
Voici le contenu de la page (à l'extension htm conseillé par l'auteur) :
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
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:
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:
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 !
L'unité "em" doit être attachée..
L'unité "em" doit être attachée..
exemple :
Code:
p.normal { font-size: 1em;}
pour:
Code:
<p class="normal">Police dont la taille est de 10px</p>
source intéressante :
https://developer.mozilla.org/fr/docs/Web/CSS/font-size
