为什么我的 html 没有链接到我的打印 CSS 样式表？答案

【问题标题】：Why isn't my html linking to my print CSS stylesheet?为什么我的 html 没有链接到我的打印 CSS 样式表？
【发布时间】：2013-04-16 17:23:22
【问题描述】：

css我正在尝试使用 css 创建一个打印样式表以连接到我的 html 网页。我在下面添加了样式表行，我的样式表是一个名为 print.css 的 css 文件，与我的 html 文件位于同一目录中。这是我第一次这样做，就程序而言，我做错了什么吗？

感谢您的建议

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

<style>
   .
   .
   .
</style>

</head>

CSS

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body{
 width: 8000px;
 background-color: #FFFFFF;
  }
  .section{
  width: 2000px;
  float: left;
  height: 100%;
  z-index: 1;
  font-size:20px;
  page-break-after: always;
  page-break-inside: avoid;



  p a:after {
  content: " (" attr(href) ")";
  font-size: 50%;
   }
 </style>
 </head>
 </body>
 </html>

【问题讨论】：

URI 指向href="print.html"，尝试将其更改为href="print.css"。您还将媒体类型定义为打印，仅适用于打印，使用media="screen"
我修复了它......并在我的代码中再次尝试了它。我尝试了 .html 和 .css 以防万一，但都不接受我对样式表的更改。不过谢谢
您的网站有链接吗？它可能是文件路径或类似的东西
你在尝试什么改变？您是否要进入打印预览以检查更改？您知道打印时会忽略背景颜色...？
是的，我应该把它放在描述中。我正在尝试创建一个打印页面。我在单独的 div 中有文本，因此每个 div 中的文本占用大约 800 像素。我需要它来扩展页面的宽度。我还想添加一个标题。

标签： html css printing stylesheet

【解决方案1】：

CSS 文件不能包含 HTML。这是您的 print.css 文件应包含的所有内容：

body{
    width: 8000px;
    background-color: #FFFFFF;
}

.section{
    width: 2000px;
    float: left;
    height: 100%;
    z-index: 1;
    font-size:20px;
    page-break-after: always;
    page-break-inside: avoid;
}

p a:after {
    content: " (" attr(href) ")";
    font-size: 50%;
}

【讨论】：

谢谢，我试过了，还是不行。可能是编辑器或者HTML的版本（我用的是html5）。

【解决方案2】：

您的 CSS 文件中包含了 HTML，这将不起作用。您需要删除 <!DOCTYPE html> <html> <head> and <style> 标签。

您还忘记用右括号关闭您的.section css，所以它看起来像这样：

.section{
width: 2000px;
float: left;
height: 100%;
z-index: 1;
font-size:20px;
page-break-after: always;
page-break-inside: avoid; }

除此之外，请检查您的 CSS 文件是否与 link 标记中指定的名称相同 - 您可能在某处出现拼写错误。

【讨论】：

【解决方案3】：

您对 css 文件的调用中的 href 错误：

您正在调用一个可能不存在的 HTML 文件

<link href="print.html" type="text/css" rel="stylesheet" media="print" />

如果确实存在，则从该 HTML 文件中提取您的 css 并将其放入 CSS 文档中，然后像这样链接到该文件：

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

在该文件中，将您的样式包装在此标签中：

@媒体打印{ 你的CSS在这里 }

这应该完全符合您的需要。

【讨论】：