一、简介
CSS打印样式用于设计打印文档的布局和样式。在打印网页、PDF文件以及其他类型的文档之前，修饰打印样式可以设置文本、背景、颜色、字体和页面布局等配置，为最终打印效果提供精准的控制。
设置打印样式可以使得打印后的文档更整齐、易读、美观。例如：在打印简历时，你需要让相应的内容合理分配在每一页上，这时候打印样式就派上用场了。
二、CSS打印样式的使用
你可以将样式表放在一个单独的CSS文件中，然后在HTML文档中使用媒体查询关键字“print”将其导入。
@media print {
/* print specific styles go here */
}
你还可以在HTML文档的head标签中添加一个link元素来链接到你的CSS文件。
<link rel="stylesheet" type="text/css" href="print.css" media="print">
注意：如果你选择在HTML文档中的style标签中编写打印样式，你必须将其放到@media print中。
三、选择器
选择器是你打印样式中最重要的部分。如果你只是选择器没有搞懂，那么你将很难创建出你期望的样式。在打印样式中，很多选择器都可以被用来改变文本的样式。
1、元素选择器
元素选择器是在CSS中最常见的选择器之一，它能够对文档树中匹配到的所有元素进行样式的选择。在CSS打印样式中，我们可以使用元素选择器来选择要改变样式的打印元素。
@media print {
/* 为所有h2元素绘制红色的下划线 */
h2 {
text-decoration: underline;
color: red;
}
}
2、类选择器
类选择器是指通过指定被绑定到元素的class属性来选择元素。在CSS打印样式中，一个class可以作用于多个元素，可以使用类选择器来样式化一组元素。
/* 为class为.example的元素着色 */
@media print {
.example {
color: blue;
}
}
3、ID选择器
ID选择器是用于在CSS中为指定ID的HTML元素进行样式设置。在CSS打印样式中，ID选择器是唯一的，所以它只能应用到一个元素上。
/* 为ID为example的元素设置字体 */
@media print {
#example {
font-family: Arial, sans-serif;
}
}
4、层次选择器
层次选择器是指对一个或多个特定元素和它们的后代元素进行样式设置。在CSS打印样式中，层次选择器可以被用来改变整个打印文档的样式，不论是它在DOM树中的位置。
/* 为所有p元素和下面的元素设置颜色 */
@media print {
p *,
span * {
color: #000;
}
}
四、定位与页面布局
设置文档的布局和样式对于控制它在页面上的位置以及在纸质文件中的呈现非常重要。在CSS打印样式中，你可以使用多个属性来控制页面的排版方式，以及一个元素在页面中的位置。
1、@page属性
@page是CSS打印的一个内置属性，可以用来设置页面大小和方向、页眉和页脚、分页行为等。下面的例子表示每一页都有相同的页眉和页脚，每页含三行文本：
@media print {
@page {
size: letter portrait;
margin: 1in;
footer: example-footer;
header: example-header;
}
}
2、页面媒体类型属性
页面媒体类型属性定义了文档的媒体类型。@media print声明的打印样式会仅对paper类型的媒体生效。你可以添加hearing和projection，以便为其他媒体类型修改样式。
<link rel="stylesheet" type="text/css" href="styles.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
3、定位
CSS定位属性常用来设置在文档中的元素的排版和在页面中的位置，可以在打印处使用。相对定位和绝对定位都需要一个坐标来满足元素在文档中的边距约束。对于绝对定位元素，坐标的参考点是它的最近的相对定位或绝对定位元素。
@media print {
/* 将第一个段落元素相对于其原本位置向下移动 */
p:first-of-type {
position: relative;
top: 1in;
}
}
五、总结
CSS打印样式提供了一种控制打印文档的方式，使其更加整齐、易读、美观。我们可以使用CSS选择器、页面媒体类型属性、定位等属性来设置打印样式。最后，我们为你提供一个完整的样例代码：
@media print {
@page {
size: letter portrait;
margin: 1in;
footer: example-footer;
header: example-header;
}
/* 所有h2元素绘制红色的下划线 */
h2 {
text-decoration: underline;
color: red;
}
/* 为class为.example的元素着色 */
.example {
color: blue;
}
/* 为ID为example的元素设置字体 */
#example {
font-family: Arial, sans-serif;
}
/* 为所有p元素和下面的元素设置颜色 */
p *,
span * {
color: #000;
}
/* 将第一个段落元素相对于其原本位置向下移动 */
p:first-of-type {
position: relative;
top: 1in;
}
}
