CSS-Stile, die speziell für die Drucksteuerung entwickelt wurden

Die meisten Webdesigner sind mit Drucksteuerelementen noch nicht vertraut und haben oft mehr Interesse an Pixeln als an Druckern. In der realen Welt verlassen sich viele Menschen darauf, Webseiten als Referenz auszudrucken: Im digitalen Zeitalter haben viele Menschen zu besonderen Anlässen immer noch Papier in der Hand. Es gibt einige Dinge, die Webentwickler tun können, um die Lücke zwischen Druckern und LCD-Bildschirmen zu schließen.

Stile, die eher für Drucker als für Bildschirme konzipiert sind

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


}

Hinweis* Sie können auch das media="print"-Attribut des Links in einer separaten CSS-Datei festlegen, um anzugeben, dass dieser Stil für das Drucken vorgesehen ist

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

Es ist nicht notwendig, das gesamte CSS für Ihre Website umzugestalten; der Standardstil wird von print nur für unterschiedliche Anforderungen übernommen. Um beim Drucken Toner zu sparen, invertieren die meisten Browser die Farben automatisch. Für optimale Ergebnisse sollten Farbveränderungen erkennbar sein:

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

Wir erstellen keine Screenshots der gesamten Webseite, sondern nur, um eine gut gestaltete, lesbare Website zu zeigen:

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

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


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


   nav, aside {
      display: none;
   }
}

Um den Drucker effizienter zu machen, sollte nur der Hauptinhalt angezeigt werden und die Kopf- und Fußnavigationsleisten sollten entfernt werden

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


   nav, aside {
      display: none;
   }


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


   @page {
      margin: 2cm;
   }
}

Linkverarbeitung

Der Link ist auf dem Drucker nicht zu sehen. Der Hyperlink sollte erweitert werden

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


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

Der Anzeigeeffekt kann wie folgt aussehen

​Druckeinstellungsoptionen steuern

Mit der @page-Regel können Sie verschiedene Aspekte der Seite angeben. Beispielsweise möchten Sie die Abmessungen der Seite angeben. Seitenränder, Kopf- und Fußzeilen sind alle sehr wichtig. [Wird bereits von vielen Browsern unterstützt]

@PAGE-Regel-Papiergrößeneinstellung

​ Über das folgende CSS können Sie die Papiergröße einstellen, 5,5 Zoll breit und 8,5 Zoll hoch

@page {
  size: 5.5in 8.5in;
}

Sie können das Papierformat auch über Aliase wie „A4“ oder „Legal“ steuern Sie können auch die Druckrichtung steuern, Hochformat: Hochformatdruck, Querformat: Querformat

@page {
  size: A4;
}

　　PAGE-Modell　Das Seitenmodell

@page {
  size: A4 landscape;
}

Beim paginierten Medienformatmodell wird das Dokument in einen oder mehrere Seitenrahmen verschoben. Der Seitenrahmen wird einer rechteckigen Ebene zugeordnet. Dies ähnelt in etwa dem CSS-Box-Modell.

Hinweis* Es werden nur wenige Browser unterstützt

PAGE-Margin-Modell Page-Margin Boxes

@page { width: 50em; }

Bevor wir fortfahren, sollten wir das Box-Modell von Seiten verstehen, da sich sein Verhalten etwas von der Funktionsweise auf dem Bildschirm unterscheidet.

Das Seitenmodell definiert den Seitenbereich und unterteilt ihn dann in 16 Randrahmen. Sie können die Größe des Seitenbereichs und die Größe des Randes zwischen dem Rand des Seitenbereichs und dem Ende der Seite selbst steuern.

Linker und rechter Rand

Das folgende CSS zeigt den Titel unten links, den Seitenzähler unten rechts und den Kapiteltitel oben rechts an.

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


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

Der Anzeigeeffekt ist wie folgt:

@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;
  }
}

Hinweis* Dieser Artikel wurde zusammengestellt aus: Tipps und Tricks für Druck-Stylesheets und Druckdesign mit CSS- und CSS3-Seitenspezifikationen

Das obige ist der detaillierte Inhalt vonCSS-Stile, die speziell für die Drucksteuerung entwickelt wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!