Styles CSS spécialement conçus pour contrôler l'impression

La plupart des concepteurs de sites Web sont nouveaux dans les contrôles d'impression et sont souvent plus amoureux des pixels que des imprimantes. Dans le monde réel, de nombreuses personnes ont recours à l'impression de pages Web à partir de sites Web pour référence : à l'ère du numérique, de nombreuses personnes ont encore du papier entre les mains lors d'occasions spéciales. Les développeurs Web peuvent faire certaines choses pour combler le fossé entre les imprimantes et les écrans LCD.

Des styles conçus pour les imprimantes plutôt que pour les écrans

/* 样式将只应用于打印 */
@media print {


}

Remarque* Vous pouvez également définir l'attribut media="print" du lien dans un fichier CSS séparé pour préciser que ce style est dédié à l'impression

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

Il n'est pas nécessaire de remodeler l'intégralité du CSS de votre site ; dans l'ensemble, le style par défaut est hérité uniquement pour répondre à des besoins différents ; Pour économiser du toner lors de l'impression, la plupart des navigateurs inversent automatiquement les couleurs. Pour de meilleurs résultats, les changements de couleur doivent être visibles :

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

Nous ne créons pas de captures d'écran de la page Web entière, juste pour montrer un site Web bien conçu et lisible :

/*去除背景图片, 节约笔黑 */

h1 {
   color: #fff;
   background: url(banner.jpg);
}


@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }
}

Afin de rendre l'imprimante plus efficace, seul le contenu principal doit être affiché et les barres de navigation d'en-tête et de pied de page doivent être supprimées

@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }


   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }


   @page {
      margin: 2cm;
   }
}

Traitement des liens

Le lien n'est pas visible sur l'imprimante. Le lien hypertexte doit être développé

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }


   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

. L'effet d'affichage peut être comme ça

​Contrôler les options de paramètres d'impression

La règle @page vous permet de spécifier différents aspects de la page. Par exemple, vous souhaiterez spécifier les dimensions de la page. Les marges de page, les en-têtes et les pieds de page sont tous très importants. [Déjà pris en charge par de nombreux navigateurs]

Paramètre de taille de papier de la règle @PAGE

​ Grâce au CSS suivant, vous pouvez définir la taille du papier, 5,5 pouces de largeur et 8,5 pouces de hauteur

@page {
  size: 5.5in 8.5in;
}

. Vous pouvez également contrôler le format du papier via des alias, tels que « A4 » ou « légal »

@page {
  size: A4;
}

. Vous pouvez également contrôler le sens d'impression, portrait : impression portrait, paysage : paysage

@page {
  size: A4 landscape;
}

　　Modèle PAGE　Le modèle de page

Dans le modèle de format multimédia paginé, le document est déplacé dans une ou plusieurs zones de page. Le cadre de la page est mappé sur un plan rectangulaire. Ceci est à peu près similaire au modèle de boîte CSS.

Remarque* Peu de navigateurs sont pris en charge

@page { width: 50em; }

Modèle de marge PAGE Boîtes de marge de page

Avant d'aller plus loin, nous devons comprendre le modèle de boîte des pages, car son comportement est quelque peu différent de son fonctionnement à l'écran.

Le modèle de page définit la zone de page puis la divise en 16 cases périphériques. Vous pouvez contrôler la taille de la zone de page et la taille de la marge entre le bord de la zone de page et la fin de la page elle-même.

Marges gauche et droite

@page :left {
  margin-left: 30cm;
}


@page :right {
  margin-left: 4cm;
}

Le CSS suivant affichera le titre en bas à gauche, le compteur de pages en bas à droite et le titre du chapitre en haut à droite.

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }


  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }


  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

L'effet d'affichage est le suivant :

Remarque* Cet article est compilé à partir de : Trucs et astuces pour les feuilles de style d'impression et la conception pour l'impression avec les spécifications de page CSS et CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!