使用CSS控制打印样式是网页设计中重要的一部分。针对不同的媒介，样式的调整有助于提升用户体验。打印样式主要通过CSS @media查询来实现，便于指定某些样式仅在打印时应用。
在CSS中，常用的语法形式如下：
```css@media print { /* 打印样式 */}```
这段代码包含的样式将在页面打印时生效。通过这一机制，能够有效隐藏不需要的内容，如导航栏或互动元素。
隐藏元素的方式，可以利用 `display: none;` 或 `visibility: hidden;` 属性。例如：
```css@media print { nav, footer { display: none; }}```
这样的设置确保了在打印输出时，这些元素不会影响最终效果。
对于文本内容，控制字体大小、颜色和行距同样重要。通过设置不同于屏幕的样式，使文本更具可读性：
```css@media print { body { font-size: 12pt; /* 字体大小 */ color: black; /* 颜色 */ line-height: 1.5; /* 行距 */ }}```
背景颜色及图片在打印时通常是不必要的，利用`background`属性可以去除：
```css@media print { body { background: none; /* 清除背景 */ }}```
除了背景，还有可以控制页面的边距和网址信息。利用 `@page` 规则自定义页面大小和边距：
```css@page { margin: 20mm; /* 页面边距 */}```
在打印时，可以选择性显示页码和日期信息，这样有助于读者辨识内容的时间：
```css@media print { .footer { display: block; }}```
还可以通过设计有趣的布局，使用列布局或插图，以提高排版的美观度。利用CSS Grid或Flexbox可以创造出整个页面的结构，配合打印时使用的规则，使文档更有条理：
```css@media print { .container { display: grid; /* 使用网格布局 */ }}```
针对图片的处理也很重要，可以提供合适的打印版质量或尺寸，确保它们在打印时不出现模糊或过大：
```css@media print { img { max-width: 100%; /* 控制图片大小 */ }}```
通过巧妙运用这些CSS规则，可以确保打印样式符合需求，从而在打印输出时更具专业感和整洁度。