Tél.: 05 32 92 09 16 Email: contact@sagexa.com

Tutoriel


Taux global de satisfaction Client : 4.8 sur 5 pour 457 formations

Accueil / Tutoriels / Web / Client

C.S.S.::Tutoriel CSS Accéléré - 3 ème partie

Cascading Style Sheets

Par • • programmation client

Tutoriel CSS Accéléré - 3 ème partie

Dans cette leçon vous apprendrez...
  1. à comprendre la notion de média
  2. à spécifier le média cible pour les styles externes ou embarqués
  3. à créer deux versions d'une même page (écran / imprimante).

Media

Le média est le support qui matérialisera l'information. Il s'agira en général de l'écran ou de l'imprimante. Des types sont également prévus pour les supports audio ou tactiles, mais l'implémentation n'est pas généralisée.

Spécification du Type de Media

Les styles peuvent être définis pour différents types de média.
Typiquement, le style sera différent pour l'affichage écran et pour l'impression.
Le type de média sera défini dans la balise <link> pour les css externes et <style> pour les feuilles de style embarquées..

Exemple de Code: /Demos/MediaType01.html

<link href="style01.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css" media="all">
/* règles */  
</style>
Explication du Code

Si le média n'est pas défini, le style s'applique à tous les médias.

Les principaux médias sont :

  • all
  • handheld
  • print
  • projection
  • screen
  • tv

Voici un exemple d'implémentation pluri-media (écran + imprimante):

Exemple de Code: /Demos/media01.html

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Types de Media</title>
<style type="text/css" media="screen">
 .attention {color:#ff0000}
 h1.attention {text-decoration:underline}
 p.attention {font-weight:bold}
 .printDisplay {display:none}
</style>
<!-- pour l'impression, on laisse en noir -->
<style type="text/css" media="print">
 .attention {color:#000000;}
 h1.attention {text-decoration:underline; font-size:1in;}
 p.attention {font-weight:bold; font-size:.4in;}
 .screenDisplay {display:none}
</style>
</head>
<body>
<h1 class="attention">WARNING</h1>
<p class="attention">Don't go there!</p>
<p class="printDisplay">Version impression.</p>
<p class="screenDisplay">Version écran</p>
</body>
</html>
Explication du Code

Cette page en version écran :

Et en version impression (fichier/aperçu avant impression) :

SAGEXA

La bienveillance numérique à vos côtés,

en Nouvelle-Aquitaine et partout ailleurs.

information actualisée le 21/11/2024

Nous contacter

Adresse: St Georges des Agoûts

Téléphone: Tél.: 05 32 92 09 16

Fax: 00 71 50 20 17

Email: contact@sagexa.com

Clients & Témoignages

avatar
"Le stage s'est très bien déroulé, dans une bonne ambiance, et bien mené par le formateur."
E.P., DRASS Caen
avatar
"Excellente formation sur la découverte de PHP/MySql"
R.A., Cetelem
avatar
"Bon prof, bonne formation"
C.P., Crédit Agricole
avatar
"Formation très efficace"
M.D., Dassault Systèmes
avatar
"Très condensé avec des exercices pertinents"
I.B., Orange
avatar
"Une très bonne approche pour évaluer la potentialité de PHP."
S.C., La Documentation Française
avatar
"Bonnes bases pour retravailler seul et approfondir."
Y.C., DRASS Caen
avatar
"Formation très complète, et de nombreux exercices à difficultés dosées ce qui permet de bien assimiler."
H.S., DRASS Caen
avatar
"Très bien !"
B.A., ALCATEL
avatar
"Un peu court pour tout voir, mais la doc permet de compléter."
C.C., Philips
avatar
"Très bien. Correspond exactement à ce que je suis venu chercher."
B.R., Etat-Major des Armées
avatar
"Il y a beaucoup de manipulations. Bon cours."
L.H., Etat-Major des Armées
avatar
"Rythme intense. Méthode efficace."
F.C., France Télécom
avatar
"Formateur très disponible à toutes les questions et difficultés rencontrées au cours des exercices."
C.J-P., Préfecture de Police
avatar
"Très dense et très riche, mais trop court !"
C.P., Ministère de l'Intérieur
avatar
"Cours très complet qui permet de voir énormément de points.Les exercices sont pertinents et permettent de voir des cas concrets.Beaucoup d’infos à absorber en 4 jours qui nécessitent de beaucoup pratiquer pour bien assimiler.La doc fournie est complète et sera très utile."
L.S., Camaieu
avatar
"Contenu approprié à mes besoins"
V.M., Normand Info
avatar
"Le contenu de la formation est à la hauteur de mes attentes, très bon sur la pédagogie."
D.M., IHEDN
avatar
"Très bonne formation, assez approfondie pour de la "prise en main"."
P.J., Safran Aircraft Engines
avatar
"Cette formation est très bien conçue avec une très bonne pédagogie du formateur."
M.L.J., RATP
avatar
"Formation correspondant à mes attentes"
G.L.G., CRAMIF
avatar
"Très satisfait - Formateur maitrisant parfaitement le sujet."
B.A., EDF
avatar
"Très satisfait - Le formateur était pédagogue, patient et expérimenté. De plus, le groupe comprenait peu de personnes. Je suis donc très satisfait de cette formation."
B.F., Alten SIR
avatar
"Très satisfait - Je suis particulièrement satisfait de la formation surtout par la disponibilité du formateur et par le contenu du programme."
E.Y.Z., CGI
avatar
"Très satisfait - Super formation avec un super formateur !"
J.B., Devoteam
avatar
"Très satisfaite - vraiment ravie de cette formation, j’ai pu mieux appréhender l’orientation objet. Xavier a toujours su répondre à mes questions et remarques!"
C.A., BRED Banque Populaire
avatar
"Très satisfaite - Approche pas à pas avec une alternance pratique et théorie fortement appréciée"
F.M., Invensense Movea France
avatar
"Très satisfait - Explications toujours pertinentes et très claires. Formateur ayant une approche très pédagogique et très compétent sur le sujet"
L.S., Collins Aerospace
avatar
"Très satisfait - Très bon formateur, très compétent et expliquant de manière graduelle les concepts mis en jeu."
V.N., SNAO

© Sagexa.com