html使用CSS来控制打印样式

99次阅读
没有评论

在CSS中,我们可以使用@media print媒体查询来控制打印样式。这个媒体查询可以在打印页面上应用指定的样式,而不是在屏幕上应用。

下面是一个示例,演示如何在CSS中设置打印样式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Print Style Example</title>
    <style>
        /* 设置在屏幕上不可见 */
        @media screen {
            .hide-on-screen {
                display: none;
            }
        }

        /* 打印样式 */
        @media print {
            .hide-on-print {
                display: none;
            }
            h1 {
                color: red;
            }
            p {
                font-size: 20px;
            }
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid black;
                padding: 10px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<h1>Print Style Example</h1>
<p>This is an example of how to set a print style using CSS.</p>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
        <td>Female</td>
    </tr>
</table>
<p class="hide-on-screen">This text will not be printed.</p>
</body>
</html>

在上面的示例中,我们定义了两个@media查询,一个用于屏幕显示,另一个用于打印。

在打印样式中,我们设置了标题为红色,段落字体大小为20px,表格样式为带有边框的居中表格。我们还使用了.hide-on-print类来隐藏打印时不需要显示的元素。

正文完
 
评论(没有评论)