Exemple 15 : Insérer une feuille de style en spécifiant plusieurs types de média

Explications :

Vous n'êtes pas limité à indiquer un seul type de média, vous pouvez en indiquer plusieurs, il suffit de séparer la liste des médias avec des virgules.

Dans cet exemple nous avons affichés deux images au dessus du texte, grâce aux types de média nous allons désactiver leur affichage pour l'impression (média 'print') et pour les appareils portatifs (média 'handheld'). De même le texte du paragraphe a un style précis qui ne sera effectif que pour l'affichage sur un écran d'ordinateur (média 'screen') et sur les appareils portatifs (média 'handheld').

Pour activer le média 'print' accédez au mode "Aperçu avant impression" que vous trouverez dans le menu "Fichier", puis sélectionnez "Aperçu avant impression". Pour voir les effets du média 'handheld' il vous faudra tester avec Opera en sélectionnant le menu 'Afficher' puis 'Petit écran'.

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
30
31
32
33
34

<!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 15 : Insérer une feuille de style en spécifiant plusieurs types 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-ex15.css" type="text/css" rel="stylesheet" media="print, handheld" />
<style type="text/css" media="screen, handheld">
p.txt {
        background-color : #ffc0cb;/* pink */
        font-size :        1.2em;
        padding :          10px;
}
</style>
</head>

<body>

<h1>
Exemple 15 : Insérer une feuille de style en spécifiant plusieurs types de média
</h1>

  <p>
    <img src="../images/logo.gif" alt="Texte alternatif" />
    <img src="../images/logo_css.gif" alt="Texte alternatif" />
  </p>

  <p class="txt">
Au dessus de ce texte devraient s'afficher deux images. Pour des raisons pratiques nous allons les 
désactiver pour l'impression et pour les appareils portatifs.
  </p>

</body>
</html>

Code CSS :

1
2
3
4
5
6

img {
        display :          none;
}
p {
        width :            10cm;
}

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.