时间戳

首页 > 解决方案 > 打印 CSS 文件不更改网页

html - 打印 CSS 文件不更改网页

问题描述

我创建了一个打印 css 文件来处理我打印网页时对屏幕的更改。现在我已经编写了我的 Print Css 文件，因此不显示标题和导航，将所有字体更改为 Courier New，但由于某种原因，我的更改正在显示。我在我的代码中做错了什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="cpt330_styles.css" rel="stylesheet" type="text/css">
<link href="print.css" type="text/css" rel="stylesheet" media="print">
</head>
<body>
<header>
<img src="newark.jpg" alt="picture of Newark">
</header>
<nav>
<ul><a href="homework.html">Home</a></ul>
<ul><a href="websites.html">Favorite Websites</a></ul>
<ul><a href="meals.html">Favorite Meals</a></ul>
</nav>
<footer>
</footer>
</body>
</html>



Print.CSS File
header, nav 
{
display: none;
}

html 
{
font-family: Courier New;
}

ul 
{
list-style-type: none;
}

标签： htmlcss

解决方案

您可以使用打印样式表中的at 规则仅@media在打印时应用您的 CSS 。

@media print {
  header, nav {
    display: none;
  }

  html {
    font-family: Courier New;
  }

  ul {
    list-style-type: none;
  }
}

推荐阅读