css 样式编写_为打印样式表编写CSS

css 样式编写

The focus of most web developers is designing web content for screen, a category that includes desktops, laptops and mobile devices.

大多数Web开发人员的重点是为屏幕设计Web内容，该内容包括台式机，笔记本电脑和移动设备。

As you progress in web development, it becomes easier to think of styles as modes, a way of viewing a site in different contexts and on different devices. The content of your site is HTML: static, unchanging data. CSS acts as a filter, emphasizing, reducing, eliminating or moving content in a way appropriate to each client. (“Client” in this case meaning the device or software that is interacting with the web page, which may be a television, a printer, or an entertainment unit such as a Wii).

随着Web开发的进行，将样式视为模式变得更加容易，这是一种在不同上下文和不同设备上查看网站的方式。 您网站的内容是HTML ：静态不变数据。 CSS充当过滤器，以适合每个客户端的方式强调，减少，消除或移动内容。 (在这种情况下，“客户端”是指与网页交互的设备或软件，可以是电视，打印机或娱乐单元，例如Wii)。

Web developers typically create one stylesheet that is broadly applicable for everything in a site, containing the bulk of the CSS:

Web开发人员通常创建一个样式表，该样式表广泛适用于网站中的所有内容，其中包含大部分CSS：

<link rel="stylesheet" href="styles.css">

Within the linked stylesheet we create CSS for other devices and clients that are exceptions to the primary rules. Note that we do not have to entirely recreate all the style rules for each new form of media: the primary rules of styles.css will be used in conjunction with any styles that we add, so there is no need to repeat declarations for fonts, etc, unless we choose for them to be different.

在链接的样式表中，我们为主要规则例外的其他设备和客户端创建CSS。 请注意，我们不必为每种新的媒体形式完全重新创建所有样式规则： styles.css的主要规则将与我们添加的任何样式结合使用，因此无需重复字体声明，等等，除非我们选择让它们不同。

The first set of “alternative” rules we are going to create is for the most common device that will interact with our web page, other than screens; it is also the most neglected by web developers. At the bottom of your styles.css page, add this:

我们将要创建的第一组“替代”规则是针对将与我们的网页进行交互的最常见设备，而不是屏幕。 它也是Web开发人员最忽视的事情。 在styles.css页面的底部，添加以下内容：

@media print {
}

Between the opening and closing curly braces you will be writing the style rules for your pages when they are printed. Again, there is no need to duplicate your earlier rules, only to indicate what is different when a page is printed. There are many possibilities: you could make the printed page appear completely different from the web version, if you wished. Due to the range of options, all I can provide is a list of general suggestions and examples.

在打开和关闭大括号之间，您将在打印页面时编写样式规则。 同样，无需重复您以前的规则，只需指出打印页面时的区别 。 有很多可能性：如果需要，您可以使打印的页面看起来与Web版本完全不同。 由于选择范围广，我所能提供的只是一般建议和示例列表。

Eliminate site features that are irrelevant to the printed page 消除与打印页面无关的网站功能

color or clever accordion menus. If they truly wanted that, they’d use screen capture software to take a snapshot of your page. 颜色或巧妙的手风琴菜单感到惊讶。 如果他们确实希望这样做，则可以使用屏幕捕获软件为您的页面拍摄快照。

When someone prints your site, they are interested in content, and everything else becomes superfluous. Therefore, in the print @media query, we turn off the visibility of menu bars, headers, and footers: everything that can’t be used on a printed page, or isn’t relevant to the content.

当某人打印您的网站时，他们对content感兴趣，而其他一切都变得多余了。 因此，在print @media查询中，我们关闭了菜单栏，页眉和页脚的可见性：不能在打印页面上使用或与内容无关的所有内容。

For example, between the curly braces add:

例如，在花括号之间添加：

header, footer, nav, aside {
	display: none;
}

This “knocks out” the content within the matching tags when you print the page: the printer acts as if the elements do not exist, while the browser continues to show the website on-screen as the primary CSS rules tells it to.

当您打印页面时，这会“剔除”匹配标签中的内容：打印机的行为就像元素不存在一样，而浏览器按照CSS的主要规则继续在网站上显示该网站。

Eliminate background images, if used; change colors to high-contrast 消除背景图片(如果使用)； 将颜色更改为高对比度

While modern browsers will eliminate background images when printing web pages to improve legibility, older browsers may not. Make sure they do so by setting background-image: none in your @media print rules for elements that have a background image set in styles.css. Similarly, most browsers will change inappropriate color combinations for the purposes of print (white text on a black background converted to black text on white, for example), but older browsers may fail to do so. Assume that your web page is being printed out on a black and white printer, and specify colors appropriately, or use filters to change them.

尽管现代浏览器在打印网页时会消除 背景图像以提高可读性，但较旧的浏览器可能不会。 通过设置 background-image: none确保它们这样做 background-image: none @media print规则中没有对 styles.css中设置了背景图像的元素进行设置。 同样，大多数浏览器会出于打印目的而更改不适当的颜色组合(例如，将黑色背景上的白色文本转换为白色上的黑色文本)，但是较旧的浏览器可能会这样做。 假定您的网页正在黑白打印机上打印出来，并指定适当的颜色，或 使用过滤器进行更改。

If measurements are required, use inches, centimeters, points or percentages 如果需要测量，请使用英寸，厘米，点或百分比

Responsive design principles – measuring most elements in percentages or other scalable units – usually works best. 响应式设计原则-以百分比或其他可伸缩单位衡量大多数元素-通常效果最佳。

Expand external hyperlinks to include URL information on the printed page 展开外部超链接以在打印页面上包括URL信息

@media print section: @media print部分中使用了一些高级CSS：

a:after {
	content:" <" attr(href) ">";
}

I’ve shown generated content before; this is simply a variation on the technique. Essentially, the rule says: “immediately after each link, show the value of the link’s href attribute when the page is printed.”

我已经展示了生成 的内容 之前 ; 这只是技术上的一种变化。 本质上，该规则说：“在每个链接之后，立即在打印页面时显示链接的href属性的值。”

This works well, but has the drawback of showing URLs for all links, no matter what their destination: internal/local URLs (for navigation within the site) are treated the same as external/remote links. So long as your links are written correctly, we can filter this to show only external links by modifying the declaration to include an attribute selector:

这很好用，但是具有显示所有链接的URL的缺点，无论它们的目的地是什么： 内部/本地URL (用于站点内导航)与外部/远程链接相同。 只要您的链接编写正确，我们就可以通过修改声明以包括一个属性选择器来对其进行过滤以仅显示外部链接：

a[href^=http]:after {
	content:" <" attr(href) ">";
}

Alternatively, if you have used HTML shortcuts for external links:

或者，如果您对外部链接使用了HTML快捷方式 ：

a[href^=//]:after {
	content:" <" attr(href) ">";
}

In English, the declaration translates to “so long as the href value of the link begins with http or //, print out the URL”. As internal links should be of the format <a href="destination.html"> they will not be printed out, while external links to other sites will be.

在英语中，声明翻译为“只要链接的href值以http或//开头，则打印出URL”。 由于内部链接的格式应为<a href="destination.html">因此不会将其打印出来，而指向其他网站的外部链接将被打印出来。

Force page breaks where appropriate 在适当的地方强制分页符

h3 element exclusively for each new item, you could write the following within your h3元素(出于参数考虑)，则可以在 @media query: @media查询中编写以下内容：

h3 {
	page-break-before: always;
}

This works to ensure that when the printer encounters an h3 element, it always starts a new page: for all intents and purposes, h3 elements become page headings when printed.

这样可以确保打印机在遇到h3元素时始终启动新页面：出于所有目的和目的， h3元素在打印时成为页面标题。

The one downside to this approach is that your first page may be essentially blank, or very short, with an h3 starting the page that follows. One example would be a series of blog articles presented on the same web page, each inside a article element):

这种方法的一个缺点是您的第一页可能基本上是空白或很短， h3是h3 。 一个示例是在同一网页上呈现的一系列博客文章，每个博客文章都包含在article元素中)：

article + article {
	page-break-before: always;
}

Now the rule states: “start a new page when an article follows another article.” This way the very first article is on the front page, and subsequent articles are on new pages.

现在，规则指出：“当一篇文章跟随另一篇文章时，开始一个新页面。” 这样，第一篇文章就在首页上，后续文章就在新页面上。

Avoid image breaks across pages 避免页面间出现图像中断

images, 图像 ， tables, and other elements. To do so, use 表格和其他元素出现这种情况。 为此，请使用 page-break-inside: page-break-inside ：

img, table {
	page-break-inside: avoid;
}

结论 (Conclusion)

Print stylesheets can be taken much, much further, to the point of making a printed book from a web page. However, even the smallest attempt to make a dedicated print stylesheet will yield pages with greater legibility and usefulness, and appreciation from your audience.

从网页制作印刷书籍的角度来看，印刷样式表可以走得更远。 但是，即使是最小的尝试来制作专用的打印样式表，其页面的可读性和实用性也将得到提高，并得到听众的赞赏。

翻译自: https://thenewcode.com/119/Writing-CSS-For-Print-Stylesheets

css 样式编写