怎么优化优化css动画_使用CSS优化网站内容以进行打印

怎么优化优化css动画

Now that you've optimized your website structure for print and you've isolated the content worth part of your page, you can move forward with optimizing your page content for print. Remember that we included our "main" style sheet with the media "all," meaning that those properties will carry over into print. Essentially, we are readjusting our settings for print. Readability is our central goal.

现在，您已经优化了用于打印的网站结构，并且隔离了部分页面内容，接下来就可以优化页面内容以进行打印了。 请记住，我们在“主要”样式表中添加了“所有”媒体，这意味着这些属性将保留到打印中。 本质上，我们正在重新调整打印设置。 可读性是我们的主要目标。

调整标题标签属性 (Adjust Your Heading Tag Properties)

If you've optimized your website for search engine optimization you're probably using your "h" tags to the fullest. Realize that you wont have color options when your site is in printed mode -- few people print in color. I recommend limiting your heading to <h1> through <h3>. After three headings, the printed result will lose some organization. Padding, margin, border, and font-size will be important. Make sure your <h1> tag is large enough to make it known that it is the subject of the printed piece. For the <h2> tag, I recommend using a bottom-border property to establish the tag as the second heading. The <h3> will be the same size or slightly larger than the paragraph text. All tags will be in bold. To make things easier, I recommend using margin and setting the padding to 0; the two properties control the same function for printing and it will be easier to just use one. I recommend very little margin below the heading with exception to the <h1> tag. I use the following:

如果您已经针对搜索引擎优化对网站进行了优化，则可能会充分利用“ h”标记。 请注意，当您的网站处于打印模式时，您将没有颜色选项-很少有人用彩色打印。 我建议将标题限制为<h1>至<h3>。 在三个标题之后，打印结果将失去一定的组织性。 填充，边距，边框和字体大小将很重要。 确保您的<h1>标签足够大，以使其成为印刷品的主题。 对于<h2>标记，我建议使用bottom-border属性将标记建立为第二个标题。 <h3>的大小将与段落文本相同或略大。 所有标签将以粗体显示。 为了简化操作，我建议使用margin并将padding设置为0； 这两个属性控制着相同的打印功能，只使用其中一个会更容易。 除<h1>标记外，我建议标题下的边距应很小。 我使用以下内容：

h1,h2,h3	{ font-weight:bold; }
h1		{ font-size:24px; }
h2		{ font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; }
h3		{ font-size:13px; margin:0 0 2px 0; }

调整您的段落标签属性 (Adjust Your Paragraph Tag Properties)

Most people don't do anything too drastic with their paragraph tags but there are some properties you can optimize. The line-height, padding, and margin will be the most important properties to address. I also recommend setting the bottom margin of the paragraph to a value more than the line-height. Lastly, adjust the font-size to a reasonable ratio to your headers and use a standard font-family if you aren't already. I use the following:

大多数人对段落标签没有太大的兴趣，但是有些属性可以优化。 线条高度，填充和边距将是最重要的属性。 我还建议将段落的底部边距设置为大于行高的值。 最后，将字体大小调整到与标题合适的比例，如果还没有，请使用标准字体系列。 我使用以下内容：

p		{ font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; }

设置链接格式 (Format Your Links)

Print doesn't allow for fancy formatting of links like we've come to enjoy on the screen, so we can keep these simple by simply adding the necessary text-decoration declaration:

像我们在屏幕上喜欢的那样，打印不允许对链接进行奇特的格式化，因此我们可以通过简单地添加必要的文本装饰声明来使这些保持简单：

a		{ text-decoration:underline; }

高级链接格式 (Advanced Link Formatting)

I call this advanced for a couple of reasons. First, you're relying on CSS not currently supported by all browsers -- Internet Explorer 6 is your adversary here. The following will be completely ignored by IE6 and lower. Second, some programmers don't like the idea of CSS-generated content. Purists, please skip this section.

我将此称为高级，有几个原因。 首先，您要依赖所有浏览器当前不支持CSS － Internet Explorer 6是您的对手。 IE6和更低版本将完全忽略以下内容。 其次，一些程序员不喜欢CSS生成的内容的想法。 纯粹主义者，请跳过本节。

Showing the user a link may not be good enough. What if you'd like them to know the URL of the link? Simply add the following to your print stylesheet:

向用户显示链接可能不够好。 如果您希望他们知道链接的网址怎么办？ 只需将以下内容添加到您的打印样式表：

a:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }

调整任何自定义类别 (Adjust Any Custom Classes)

Look through your custom CSS classes to make sure none of your other settings will cause your page to look unorganized.

查看您的自定义CSS类，以确保其他任何设置都不会导致您的页面看起来杂乱无章。

Your web site is now ready to go to print! Be sure to abuse the "Print Preview" option of each browser to ensure maximum readability.

您的网站现在可以打印了！ 确保滥用每个浏览器的“打印预览”选项，以确保最大的可读性。

翻译自: https://davidwalsh.name/optimizing-content-print-css

怎么优化优化css动画