如何为要被打印的内容设置CSS样式属性

快乐打工仔 分类:实例代码

有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍。

一.使用link引入外部样式表:

<link rel="stylesheet" href="css/style.css" media="screen" />

以上代码的CSS样式用于屏幕显示效果,对于打印无效。关键在于media属性值。

<link rel="stylesheet" href="css/style.css" media="print" />

以上代码的样式代码可以用于打印内容。

二.import方式引入样式表:

<style type="text/css">
@import url("css/printstylesheet.css") print;
</style>

以上代码引入的样式可以用于打印样式。

三.屏幕显示和打印在同一个文件中:

@media print{
  h1{
    color:black;
  }
  h2{
    color: gray;
  }
}
div{color:red}

回复

我来回复
  • 暂无回复内容