如何在HTML中使用CSS

查克尼特·宾

2023年一月25日

更新 2025年二月19日

Translated

View the article in English

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

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

如何在 HTML 中使用响应式 CSS

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

开始使用IronPDF

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

第一步：

屏幕和打印 CSS 类型（CSS3）

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

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

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

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

重复表头

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

为了确保 Chrome 检测到表头，它应该包含在 thead 标签中。让我们将 '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")

$vbLabelText $csharpLabel

查克尼特·宾

立即与工程团队聊天

软件工程师

Chaknith 负责 IronXL 和 IronBarcode 的工作。他在 C# 和 .NET 方面拥有深厚的专业知识，帮助改进软件并支持客户。他从用户互动中获得的洞察力，有助于提升产品、文档和整体体验。