Question

我已经创建了一个打印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;
}

Answer 1

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

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

  html {
    font-family: Courier New;
  }

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

打印CSS文件未更改网页

1 个答案: