Admin

Menu

/ Accueil / HTML/CSS / Astuces

< Définir un style pour l'impression />
// Ecrit le 08/12/2010 à 07:47:09 par Arthezius

Article Commentaires

Grace au CSS, il est possible de mettre en forme ses pages spécialement pour l'impression.

Pour ça, il faut définir un second fichier .css

<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />



Exemple de code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>

<body>
<div id="entete">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.</p>
</div>
</body>
</html>



Fichier style.css:

div#entete{
border: 1px solid #f00;
background: #ffd4aa;
width: 800px;
}
div#entete h1{
font-size: 22px;
color: #f00;
margin: 10px 20px;
}
div#entete p{
font-size: 12px;
color: #000;
margin: 2px 20px;
text-align: justify;
}


Fichier print.css:

div#entete{
border: none;
background: none;
}
div#entete h1{
font-size: 18px;
color: #000;
margin: 5px 0px;
text-indent: 15px;
border-bottom: 1px solid #000;
}


Tester le code

Bookmark and Share

Retour / - Haut de page

Site créé par Arthezius © 2008-2017