1. IronPDF
2. Anleitungen
3. CSS (Bildschirm und Druck)

Wie man CSS mit HTML verwendet

Der CSS-Medientyp "screen" ist in erster Linie für die Anzeige auf Computerbildschirmen und ähnlichen Geräten gedacht. Wenn Stile für den Medientyp "Bildschirm" definiert werden, wirken sie sich darauf aus, wie Webinhalte auf Bildschirmen dargestellt werden, wobei die visuelle Gestaltung und Interaktivität im Vordergrund stehen.

Im Gegensatz dazu ist der CSS-Medientyp "print" für den Druck bestimmt. Sie legt fest, wie die Webseite im Druck erscheinen wird, wobei der Schwerpunkt auf der Optimierung des Inhalts für die gedruckte Seite liegt. Diese Optimierung kann die Anpassung von Schriftgrößen und Rändern sowie das Entfernen oder Ausblenden von Elementen umfassen, die beim Druck nicht relevant oder notwendig sind.

Erste Schritte mit IronPDF

Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.

Erster Schritt:

Kostenloser Start

CSS-Typen für Bildschirm und Druck (CSS3)

IronPDF generiert PDFs aus HTML in C# und kann standardmäßig mühelos ein Bildschirm-Stylesheet in ein PDF rendern. Dies ist praktisch, da Stylesheets für den Druck im Vergleich zu ihren Pendants für den Bildschirm oft weniger gut dokumentiert, verwendet oder entwickelt werden.

Mit CSS3 können bestimmte CSS-Stile ausschließlich in gedruckten Dokumenten wiedergegeben werden, während andere für Webbrowser bestimmt sind. IronPDF kann so programmiert werden, dass es entweder mit.

Erstellen Sie ein Druck-Stylesheet und wenden Sie es auf Ihr HTML an:Lernen Sie, wie man ein perfektes Druck-Stylesheet erstellt und anwendet..

Es ist sehr schwer zu sagen, welcher CSS-Medientyp besser ist, da jeder Typ auf unterschiedliche Anwendungsfälle abzielt. Es lohnt sich, durch Ausprobieren herauszufinden, welche für Ihren Bedarf geeignet ist.

Wiederholung der Tabellenüberschriften

Wenn Sie mit HTML-Tabellen arbeiten, die sich über mehrere Seiten erstrecken, setzen Sie die Eigenschaft CssMediaType auf PdfCssMediaType.Print. Dadurch wird sichergestellt, dass die Tabellenüberschrift am Anfang jeder erweiterten Seite wiederholt wird. Im Gegensatz dazu weist PdfCssMediaType.Screen Chrome an, die Kopfzeilen nur einmal zu drucken.

Um sicherzustellen, dass Chrome die Tabellenüberschrift erkennt, sollte sie von einem <thead> Tag. Lassen Sie uns die 'tableHeader.html Beispiel für die Wiederholung von TabellenüberschriftenhTML-Datei in PDF umwandeln, um den Effekt zu sehen.

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")