Exemple 14 : Insérer une feuille de style en spécifiant le type de média

Ce paragraphe va bénéficier de deux styles différents, le premier s'appliquant lors de l'affichage sur un écran d'ordinateur (media 'screen'), le second s'appliquant uniquement lorsque vous imprimerez le document (media 'print').

Explications :

La plupart des méthodes d'insertion du code CSS vus précédemment permettent de préciser le type de média auquel ils doivent s'appliquer. Seul l'attribut style qui sert à insérer du code CSS directement dans les balises (X)HTML ne permet pas de préciser un type de média.

Si vous utilisez la balise <style> ou la balise <link> insérée dans l'en-tête du document, il vous suffit de préciser l'attribut media et de lui donner la valeur voulue.

La feuille de style 'style-ex14.css' s'appliquera lors de l'affichage sur un écran d'ordinateur (média 'screen'). Le style déclaré entre les balises <style> ne s'appliquera que si vous imprimez la page, vu que type de média spécifié est 'print'.

Code XHTML et CSS :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 14 : Insérer une feuille de style en spécifiant le type de média</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style-ex14.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css" media="print">
p {
        width :            16cm;
        border :           2px solid #0ff;/* cyan */
}
</style>
</head>

<body>

<h1>
Exemple 14 : Insérer une feuille de style en spécifiant le type de média
</h1>

  <p>
Ce paragraphe va bénéficier de deux styles différents, le premier s'appliquant lors de l'affichage sur 
un écran d'ordinateur (media 'screen'), le second s'appliquant uniquement lorsque vous imprimerez le 
document (media 'print').
  </p>

</body>
</html>

Code CSS :


2
3
4
p {
        padding :          15px;
        background-color : #ffdead;/* navajowhite */
}

Valid XHTML 1.0 Strict CSS Valide !

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.