如何在HTML中使用CSS

Translated

View the article in English

CSS 'screen' 媒体类型主要用于计算机屏幕和类似设备上的显示。当为“screen”媒体类型定义样式时，它们会影响网页内容在屏幕上的展示方式，强调视觉设计和交互性。

相比之下，CSS的'print'媒体类型是为打印设计的。它决定了网页打印出来的外观，重点是优化打印页面的内容。此优化可能包括调整字体大小、页边距以及移除或隐藏在打印时不相关或不必要的元素。

如何在 HTML 中使用响应式 CSS

下载用于集成 CSS 和 HTML 的 IronPdf C# 库
准备将 HTML 文件转换为 PDF
指定 CSS 媒体类型以优化 PDF 格式
为 PDF 中重复的表头设置 CSS 媒体类型 "打印
为响应式设计配置视口尺寸

开始使用IronPDF

立即在您的项目中开始使用IronPDF，并享受免费试用。

第一步：

屏幕和打印 CSS 类型（CSS3）

IronPDF 可以在 C# 中从 HTML 生成 PDF，并且默认情况下可以轻松地将屏幕样式表渲染为 PDF。由于打印样式表通常不如屏幕样式表那样有良好的文档记录、使用或开发，这一点很方便。

CSS3允许某些CSS样式专门用于打印文档，而其他样式则专为网页浏览器设计。 IronPDF可以编程以适用于任何一种。

为您的 HTML 创建并应用打印样式表：了解如何创建和应用完美的打印样式表。.

确定哪种CSS媒体类型更好是非常困难的，因为每种类型针对的是不同的使用场景。值得通过反复试验来测试每一个，看看哪一个适合您的需求。

重复表头

在处理跨多个页面的 HTML 表格时，请将CssMediaType属性设置为PdfCssMediaType.Print。这确保表格标题在每个延伸页面的顶部重复显示。相比之下，PdfCssMediaType.Screen 指示 Chrome 只打印一次头部。

为了确保 Chrome 检测到表格标题，它应该被包含在一个 <牧场> 标签。内容不完整，无法进行翻译。tableHeader.html 重复表头示例'HTML 文件转换为 PDF，以查看效果。

: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")

VB C#