WordPress: Styling for Print:修订间差异
无编辑摘要 |
无编辑摘要 |
||
第32行: | 第32行: | ||
可以在样式表内设置打印样式。必须"指示"浏览器在样式表中找到打印样式,而且它们必须在它们自己的部分。 | 可以在样式表内设置打印样式。必须"指示"浏览器在样式表中找到打印样式,而且它们必须在它们自己的部分。 | ||
指示你的浏览器在样式表内找到打印样式,在你的<tt>header.php</tt>模板文件中的<tt>head</tt> 部分改变你的样式表链接,将这个: | 指示你的浏览器在样式表内找到打印样式,在你的<tt>header.php</tt>模板文件中的<tt>head</tt> 部分改变你的样式表链接,将这个: | ||
第39行: | 第37行: | ||
<pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" | <pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" | ||
type="text/css" media="screen" /></pre> | type="text/css" media="screen" /></pre> | ||
改为这个,指示浏览器在样式表中找到打印样式: | 改为这个,指示浏览器在样式表中找到打印样式: | ||
第52行: | 第42行: | ||
<pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" | <pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" | ||
type="text/css" media="screen, print" /></pre> | type="text/css" media="screen, print" /></pre> | ||
在你的样式表中,通常在最底部,添加以下的内容来开始你的打印样式: | |||
<pre>/* Print Styles */ | <pre>/* Print Styles */ | ||
第71行: | 第48行: | ||
body { background:white; color:black; margin:0 } | body { background:white; color:black; margin:0 } | ||
}</pre> | }</pre> | ||
===创建一个打印样式表=== | ===创建一个打印样式表=== | ||
创建一个单独的样式表,包含所有的打印样式: | 创建一个单独的样式表,包含所有的打印样式: | ||
#创建一个文本文件,叫做<tt>print.css</tt>。 | #创建一个文本文件,叫做<tt>print.css</tt>。 | ||
#将它保存到你的WordPress主题文件夹。 | #将它保存到你的WordPress主题文件夹。 | ||
#输入(或者)粘贴以下的内容,来开始打印样式,并且保存文件: | #输入(或者)粘贴以下的内容,来开始打印样式,并且保存文件: | ||
<pre>/* | <pre>/* 打印样式表 */ | ||
@media print { | @media print { | ||
body { background:white; color:black; margin:0 } | body { background:white; color:black; margin:0 } | ||
}</pre> | }</pre> | ||
:4.在你的<tt>header.php</tt>模板文件中<tt>head</tt>部分创建一个像以下的链接: | :4.在你的<tt>header.php</tt>模板文件中<tt>head</tt>部分创建一个像以下的链接: | ||
第107行: | 第64行: | ||
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" /></pre> | href="<?php bloginfo('stylesheet_directory'); ?>/print.css" /></pre> | ||
=定义打印样式= | =定义打印样式= | ||
在你的样式表或者你的打印样式表中的'''打印样式'''部分,像这个一样,添加你的站点的结构选择器(名)(你的可能有所不同): | |||
在你的样式表或者你的打印样式表中的'''打印样式''' | |||
<pre>/* 打印样式表 */ | <pre>/* 打印样式表 */ | ||
@media print { | @media print { | ||
第137行: | 第76行: | ||
#页脚 { } | #页脚 { } | ||
}</pre> | }</pre> | ||
要包含每个部分,只要给选择器的''声明'' 或者属性,添加<tt>display:block</tt>。 | 要包含每个部分,只要给选择器的''声明'' 或者属性,添加<tt>display:block</tt>。 | ||
<pre>#内容{ display:block }</pre> | <pre>#内容{ display:block }</pre> | ||
去除一个部分,这样这个部分就不会打印出来,将<tt>display:none</tt>添加到选择器的声明上。 | 去除一个部分,这样这个部分就不会打印出来,将<tt>display:none</tt>添加到选择器的声明上。 | ||
<pre>#页脚 { display:none }</pre> | <pre>#页脚 { display:none }</pre> | ||
使用<tt>display:none</tt>,你的网页上的任何元素在打印的时候,都可能不会出现。如果你有广告或者其它的一些什么元素,你在打印时,不希望这些出现,在打印部分下他们的选择器上添加<tt>display:none</tt>。 | 使用<tt>display:none</tt>,你的网页上的任何元素在打印的时候,都可能不会出现。如果你有广告或者其它的一些什么元素,你在打印时,不希望这些出现,在打印部分下他们的选择器上添加<tt>display:none</tt>。 | ||
==打印页眉== | ==打印页眉== | ||
许多WordPress站点的页眉非常地大,有时,占据了网页上部的三分之一,或者更多。这是没必要的,而且打印的时候,会浪费纸张,因此你可以在你的打印样式上改变你的页眉的外观和大小。 | 许多WordPress站点的页眉非常地大,有时,占据了网页上部的三分之一,或者更多。这是没必要的,而且打印的时候,会浪费纸张,因此你可以在你的打印样式上改变你的页眉的外观和大小。 | ||
现在页眉已经设置到了200像素的高度,显示的文本非常大,(大概是基本的字体大小的百分之250)而且显示了一个明亮的黄色。因为页眉的高度是要适应图形,在默认情况下,你的样式上的任何的背景图像都不会打印出来,在你的非常大的页眉标题周围,你只有空白的空间。你可能要改变外观,使页眉更小,使字体大小和颜色更加地适合于打印。 | 现在页眉已经设置到了200像素的高度,显示的文本非常大,(大概是基本的字体大小的百分之250)而且显示了一个明亮的黄色。因为页眉的高度是要适应图形,在默认情况下,你的样式上的任何的背景图像都不会打印出来,在你的非常大的页眉标题周围,你只有空白的空间。你可能要改变外观,使页眉更小,使字体大小和颜色更加地适合于打印。 | ||
<pre>#页眉 { display:block; | <pre>#页眉 { display:block; | ||
第180行: | 第95行: | ||
颜色:黑色; }</pre> | 颜色:黑色; }</pre> | ||
字体的形式仍然保持原样,只是字体的大小和颜色改变了。 | 字体的形式仍然保持原样,只是字体的大小和颜色改变了。 | ||
==结构改变== | ==结构改变== | ||
打印时,你将你的站点上部分结构"取消",这并不意味着''结构''四处移动来适应它。许多主题有一个角落的<tt>content</tt>容器,锚定一个特别的点,像屏面左上方的150像素。即使工具条设置为<tt>display:none</tt>,除非位置和页边空白在内容中改变了,它可能在左边引起一个150像素缺口。你也要更改一下内容部分的位置来使其使用工具条的丢失部分。 | 打印时,你将你的站点上部分结构"取消",这并不意味着''结构''四处移动来适应它。许多主题有一个角落的<tt>content</tt>容器,锚定一个特别的点,像屏面左上方的150像素。即使工具条设置为<tt>display:none</tt>,除非位置和页边空白在内容中改变了,它可能在左边引起一个150像素缺口。你也要更改一下内容部分的位置来使其使用工具条的丢失部分。 | ||
因为,大多数用户希望取消工具条,来安置内容,这样它以一个舒适的阅读布局,在页面上伸展,使用这个例子: | 因为,大多数用户希望取消工具条,来安置内容,这样它以一个舒适的阅读布局,在页面上伸展,使用这个例子: | ||
<pre>#sidebar { display:none } | <pre>#sidebar { display:none } | ||
#内容{ margin-left:0; | #内容{ margin-left:0; | ||
float:none; | float:none; | ||
width:auto }</pre> | width:auto }</pre> | ||
这使得工具条消失了,指示浏览器使用任何的默认给打印机的页边空白设置。 | 这使得工具条消失了,指示浏览器使用任何的默认给打印机的页边空白设置。 | ||
==打印打印大小== | ==打印打印大小== | ||
你可以使用'''points'''而不是像素或者''em'',来控制打印的字体的大小,因为这些与打印机读懂的信息相关。 | 你可以使用'''points'''而不是像素或者''em'',来控制打印的字体的大小,因为这些与打印机读懂的信息相关。 | ||
<pre>#页眉 { height:75px; | <pre>#页眉 { height:75px; | ||
字体大小: 24pt; | 字体大小: 24pt; | ||
第244行: | 第119行: | ||
字体大小:12pt }</pre> | 字体大小:12pt }</pre> | ||
==打印评论== | ==打印评论== | ||
一般来说,大多数人想要阅读评论,但是他们当然不喜欢看网页打印出来后的评论形式。评论形式是在屏面上使用的,打印出来时,可以占据一张纸的大部分。 | 一般来说,大多数人想要阅读评论,但是他们当然不喜欢看网页打印出来后的评论形式。评论形式是在屏面上使用的,打印出来时,可以占据一张纸的大部分。 | ||
查看你的WordPress主题文件夹,找到<tt>comments.php</tt> 或者<tt>comments-popup.php</tt>模板文件,并且打开任何一个你使用的文件。彻底地审查模板,看看评论形式的开始,并且找到ID选择器或者名称。它可能看起来像这样的: | 查看你的WordPress主题文件夹,找到<tt>comments.php</tt> 或者<tt>comments-popup.php</tt>模板文件,并且打开任何一个你使用的文件。彻底地审查模板,看看评论形式的开始,并且找到ID选择器或者名称。它可能看起来像这样的: | ||
<pre><form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" | <pre><form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" | ||
method="post" id="commentform"></pre> | method="post" id="commentform"></pre> | ||
形式的CSS ID是<tt>commentform</tt>。打印时,不显示评论形式,将这个添加到你的样式表中的打印样式部分。 | 形式的CSS ID是<tt>commentform</tt>。打印时,不显示评论形式,将这个添加到你的样式表中的打印样式部分。 | ||
<pre>#评论样式 { display:none }</pre> | <pre>#评论样式 { display:none }</pre> | ||
==网页分割== | ==网页分割== | ||
虽然这些并不是对于每一个浏览器或者打印机都管用,你可以指示它们,不要将你的照片或者图表"分成"两个部分,或者分开blockquotes,不要将网页在标题后分开,将网页在标题前分开。这不是一个完美的科学,但是如果你真的在意你的网页的外观,你可能要使用这些。 | 虽然这些并不是对于每一个浏览器或者打印机都管用,你可以指示它们,不要将你的照片或者图表"分成"两个部分,或者分开blockquotes,不要将网页在标题后分开,将网页在标题前分开。这不是一个完美的科学,但是如果你真的在意你的网页的外观,你可能要使用这些。 | ||
<pre>h1, h2, h3, h4, h5, h6 { page-break-after:avoid; | <pre>h1, h2, h3, h4, h5, h6 { page-break-after:avoid; | ||
page-break-inside:avoid } | page-break-inside:avoid } | ||
第287行: | 第140行: | ||
</pre> | </pre> | ||
=打印样式例子= | =打印样式例子= | ||
打印时,你可以控制网页设计的许多方面,包括大小,颜色,链接的外观,标题,标题,作者信息,文章meta数据,你的网页的任何部分。下面是一个用法的例子,你可以将这个用作参考。 | 打印时,你可以控制网页设计的许多方面,包括大小,颜色,链接的外观,标题,标题,作者信息,文章meta数据,你的网页的任何部分。下面是一个用法的例子,你可以将这个用作参考。 | ||
<pre>@media print { | <pre>@media print { | ||
body {background:white; | body {background:white; | ||
第346行: | 第183行: | ||
} | } | ||
</pre> | </pre> | ||
=资源= | =资源= | ||
* [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 使你的博客打印机友好] – 一个半指南性的,关于怎样使WordPress主题打印机友好 CSS文件。 | * [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 使你的博客打印机友好] – 一个半指南性的,关于怎样使WordPress主题打印机友好 CSS文件。 | ||
* [http://www.aleeya.net/wordpress/css-printer-friendly-for-wordpress/ Aleeya.Net: Wordpress友好的CSS打印机] – 一个CSS 样本(没有图例主题) 怎样制作你自己的CSS的一些小贴士。 | * [http://www.aleeya.net/wordpress/css-printer-friendly-for-wordpress/ Aleeya.Net: Wordpress友好的CSS打印机] – 一个CSS 样本(没有图例主题) 怎样制作你自己的CSS的一些小贴士。 | ||
* [http://www.w3.org/TR/CSS21/page.html W3's CSS 2.1 Paged 媒体信息] | * [http://www.w3.org/TR/CSS21/page.html W3's CSS 2.1 Paged 媒体信息] | ||
* [http://www.w3.org/TR/REC-CSS2/media.html W3.org's CSS-2 媒体参考] | * [http://www.w3.org/TR/REC-CSS2/media.html W3.org's CSS-2 媒体参考] | ||
* [http://www.codestyle.org/css/media/index.shtml 代码形式媒体监控(设计, 打印, 等等)] | * [http://www.codestyle.org/css/media/index.shtml 代码形式媒体监控(设计, 打印, 等等)] | ||
* [http://evolt.org/article/Kissing_Print_Versions_of_Pages_Goodbye/20/22225/index.html Kissing Print Versions of Pages Goodbye by Lachlan Cannon] | * [http://evolt.org/article/Kissing_Print_Versions_of_Pages_Goodbye/20/22225/index.html Kissing Print Versions of Pages Goodbye by Lachlan Cannon] | ||
* [http://evolt.org/article/Printing_with_style/17/26318/index.html Lachlan Cannon的与样式一起打印] | |||
* [http://evolt.org/article/Printing_with_style/17/26318/index.html Lachlan | |||
* [http://www.macedition.com/cb/cb_20011022.php CodeBitch的打印网页] | * [http://www.macedition.com/cb/cb_20011022.php CodeBitch的打印网页] | ||
* [http://www.zeldman.com/essentials/print/ Zeldman.com's Essentials: 打印机友好的] | * [http://www.zeldman.com/essentials/print/ Zeldman.com's Essentials: 打印机友好的] | ||
* [http://www.alistapart.com/articles/goingtoprint/ Apart的 CSS 设计列表: 将要打印] | * [http://www.alistapart.com/articles/goingtoprint/ Apart的 CSS 设计列表: 将要打印] | ||
* [http://evolt.org/article/rdf/22/60331/index.html Evolt.org's 你的网站外观在纸上看起来有多好] | * [http://evolt.org/article/rdf/22/60331/index.html Evolt.org's 你的网站外观在纸上看起来有多好] | ||
* [http://www.w3schools.com/css/pr_print_pagebi.asp Property里的网页分割] | * [http://www.w3schools.com/css/pr_print_pagebi.asp Property里的网页分割] | ||
* [http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm Killersites.com's使网页可以打印 使用CSS] | * [http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm Killersites.com's使网页可以打印 使用CSS] | ||
=打印机友好的CSS主题= | =打印机友好的CSS主题= | ||
如果你的主题已经有了一个打印机有好的CSS,在这儿发一个链接。如果你为主题创建了一个打印机友好的CSS,在这儿发表一个链接到你的网页和主题网页的链接。 | 如果你的主题已经有了一个打印机有好的CSS,在这儿发一个链接。如果你为主题创建了一个打印机友好的CSS,在这儿发表一个链接到你的网页和主题网页的链接。 | ||
* [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 图例主题的打印机友好的CSS] –由Arik Fraimovich制作。得到图例主题[http://cutline.tubetorial.com/ here]。 | * [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 图例主题的打印机友好的CSS] –由Arik Fraimovich制作。得到图例主题[http://cutline.tubetorial.com/ here]。 | ||
=翻译= | =翻译= | ||
如果你已经翻译了这篇文章,或者你的博客上有相似的文章,请在这儿发表一个链接。请将完全翻译的文章标记为''(t)'',将相似的文章标记为''(s)''。 | 如果你已经翻译了这篇文章,或者你的博客上有相似的文章,请在这儿发表一个链接。请将完全翻译的文章标记为''(t)'',将相似的文章标记为''(s)''。 | ||
[http://webserviceethiopia.com/print-yemadregiya-mengedoch/ Print yemadregiya mengedoch] in Amharic.''(t)'' | [http://webserviceethiopia.com/print-yemadregiya-mengedoch/ Print yemadregiya mengedoch] in Amharic.''(t)'' | ||
[http://weblog.corelist.net/archives/1384/02/15/printable-version-with-css/ Printable version with CSS - نسخه قابل چاپ با سی اس اس] in Persian(فارسی). ''(s)'' | [http://weblog.corelist.net/archives/1384/02/15/printable-version-with-css/ Printable version with CSS - نسخه قابل چاپ با سی اس اس] in Persian(فارسی). ''(s)'' | ||
[http://300350.org/pages/wordpressprint/ Criando Estilos para Impressão]葡萄牙语. ''(t)'' | [http://300350.org/pages/wordpressprint/ Criando Estilos para Impressão]葡萄牙语. ''(t)'' | ||
[http://bestpracticemarketing.com/opsætning-af-wordpress-til-udskrivning/ Opsætning af WordPress til udskrivning] 丹麦语。''(t)'' | [http://bestpracticemarketing.com/opsætning-af-wordpress-til-udskrivning/ Opsætning af WordPress til udskrivning] 丹麦语。''(t)'' | ||
2008年4月15日 (二) 14:24的最新版本
通过使用主题,WordPress使你的WordPress站点设计过程简单,许多主题在被发行之前,在不同的电脑和浏览器上经过了彻底的测试。这些是为屏面设计的。但是使你的WordPress站点为打印设计会是怎样的呢。有的人仍然喜欢打印出网页,在他们空闲时,阅读,因此考虑一下,设计你的WordPress站点,使其能打印。
默认情况下,当一个用户打印出了一张WordPress网页的时候,但这个网页在设计的时候,并没有考虑到打印,样式表在打印的时候,被去掉了,网页打印出来时,就像网页本没有样式表。打印的网页看起来就像一个长行的信息,以你的标题开始,内容,然后是长行的工具条,然后是页脚。不是很漂亮。
看看你的WordPress站点打印后,看起来是怎样的,打印一个网页,或者从你的浏览器的菜单上,选择打印 > 打印预览。不是很漂亮,是吗?而且,将那个长的友情链接工具条打印出来,有两页纸,真的是浪费纸张。
打印出来显得漂亮[ ]
要使你的站点打印出来时,显得比较漂亮,我们需要注意站点的体系结构,这个结构将内容保存在各个部分中。幸运的是,WordPress主题的模块文件系统使这个过程变得更加地简单,因为主要的结构区都设计清楚了。
更多的WordPress站点的核心结构是如下的,虽然在你的主题上,名称可能有所不同。
#页眉 #内容 #评论 #工具条 (or #菜单) #页脚
在你的WordPress主题文件夹中的style.css样式表中,你会找到这些部分的样式。
你怎样改变这些部分,为打印做准备,取决于你自己。你可以打印工具条但是不打印页脚,或者打印页脚,不打印工具条,改变字体格式和大小,设置决定打不打印图像。我们会给出一些例子,让你参考,但是其余的,就要你自己通过尝试来体会和了解了。
创建打印样式[ ]
可以以两种方式设置与打印相关的样式。如果你想简单地打印一下,只是简单地改变一下站点,你可以使用第一种方法,并且将它们直接添加到样式表上。如果打印时,你想控制站点的最后结果,最好将这些保存在他们自己的print.css样式表上。
注:有的WordPress主题作者可能提前已经考虑到了,在他们的主题中已经包括了打印样式。在开始打印之前,查看主题文件夹找到一个print.css样式表文件,在style.css找到打印相关参考。
在样式表内[ ]
可以在样式表内设置打印样式。必须"指示"浏览器在样式表中找到打印样式,而且它们必须在它们自己的部分。
指示你的浏览器在样式表内找到打印样式,在你的header.php模板文件中的head 部分改变你的样式表链接,将这个:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
改为这个,指示浏览器在样式表中找到打印样式:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, print" />
在你的样式表中,通常在最底部,添加以下的内容来开始你的打印样式:
/* Print Styles */ @media print { body { background:white; color:black; margin:0 } }
创建一个打印样式表[ ]
创建一个单独的样式表,包含所有的打印样式:
- 创建一个文本文件,叫做print.css。
- 将它保存到你的WordPress主题文件夹。
- 输入(或者)粘贴以下的内容,来开始打印样式,并且保存文件:
/* 打印样式表 */ @media print { body { background:white; color:black; margin:0 } }
- 4.在你的header.php模板文件中head部分创建一个像以下的链接:
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
定义打印样式[ ]
在你的样式表或者你的打印样式表中的打印样式部分,像这个一样,添加你的站点的结构选择器(名)(你的可能有所不同):
/* 打印样式表 */ @media print { body { background:white; color:black; margin:0 } #页眉{ } #内容{ } #评论{ } #工具条 { } #页脚 { } }
要包含每个部分,只要给选择器的声明 或者属性,添加display:block。
#内容{ display:block }
去除一个部分,这样这个部分就不会打印出来,将display:none添加到选择器的声明上。
#页脚 { display:none }
使用display:none,你的网页上的任何元素在打印的时候,都可能不会出现。如果你有广告或者其它的一些什么元素,你在打印时,不希望这些出现,在打印部分下他们的选择器上添加display:none。
打印页眉[ ]
许多WordPress站点的页眉非常地大,有时,占据了网页上部的三分之一,或者更多。这是没必要的,而且打印的时候,会浪费纸张,因此你可以在你的打印样式上改变你的页眉的外观和大小。
现在页眉已经设置到了200像素的高度,显示的文本非常大,(大概是基本的字体大小的百分之250)而且显示了一个明亮的黄色。因为页眉的高度是要适应图形,在默认情况下,你的样式上的任何的背景图像都不会打印出来,在你的非常大的页眉标题周围,你只有空白的空间。你可能要改变外观,使页眉更小,使字体大小和颜色更加地适合于打印。
#页眉 { display:block; 高度: 100px; 字体大小: 150%; 颜色:黑色; }
字体的形式仍然保持原样,只是字体的大小和颜色改变了。
结构改变[ ]
打印时,你将你的站点上部分结构"取消",这并不意味着结构四处移动来适应它。许多主题有一个角落的content容器,锚定一个特别的点,像屏面左上方的150像素。即使工具条设置为display:none,除非位置和页边空白在内容中改变了,它可能在左边引起一个150像素缺口。你也要更改一下内容部分的位置来使其使用工具条的丢失部分。
因为,大多数用户希望取消工具条,来安置内容,这样它以一个舒适的阅读布局,在页面上伸展,使用这个例子:
#sidebar { display:none } #内容{ margin-left:0; float:none; width:auto }
这使得工具条消失了,指示浏览器使用任何的默认给打印机的页边空白设置。
打印打印大小[ ]
你可以使用points而不是像素或者em,来控制打印的字体的大小,因为这些与打印机读懂的信息相关。
#页眉 { height:75px; 字体大小: 24pt; 颜色:black } #内容{ margin-left:0; float:none; 宽度:auto; 颜色:black; 字体大小:12pt }
打印评论[ ]
一般来说,大多数人想要阅读评论,但是他们当然不喜欢看网页打印出来后的评论形式。评论形式是在屏面上使用的,打印出来时,可以占据一张纸的大部分。
查看你的WordPress主题文件夹,找到comments.php 或者comments-popup.php模板文件,并且打开任何一个你使用的文件。彻底地审查模板,看看评论形式的开始,并且找到ID选择器或者名称。它可能看起来像这样的:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
形式的CSS ID是commentform。打印时,不显示评论形式,将这个添加到你的样式表中的打印样式部分。
#评论样式 { display:none }
网页分割[ ]
虽然这些并不是对于每一个浏览器或者打印机都管用,你可以指示它们,不要将你的照片或者图表"分成"两个部分,或者分开blockquotes,不要将网页在标题后分开,将网页在标题前分开。这不是一个完美的科学,但是如果你真的在意你的网页的外观,你可能要使用这些。
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid } img { page-break-inside:avoid; page-break-after:avoid; } blockquote, table, pre { page-break-inside:avoid } ul, ol, dl { page-break-before:avoid }
打印样式例子[ ]
打印时,你可以控制网页设计的许多方面,包括大小,颜色,链接的外观,标题,标题,作者信息,文章meta数据,你的网页的任何部分。下面是一个用法的例子,你可以将这个用作参考。
@media print { body {background:white; font-size:10pt; margin:0 } #sidebar { display:none } #header { height:75px } #content{ margin-left:0; float:none; width:auto } .demo .red { color:black; font-weight:bold } #content a { font-weight:bold; color:#000066; text-decoration:underline } #content{ margin-left:0; float:none; width:auto } #footer, .ad { display:none } h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid } h3 { margin-left:10px; margin-bottom:0px; padding-bottom:0px } blockquote, table, pre { page-break-inside:avoid } ul, ol, dl { page-break-before:avoid } img.centered { display: block; margin-left: auto; margin-right: auto; } img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; } .right { float: right; } .left { float: left } img { page-break-inside:avoid; page-break-after:avoid; } }
资源[ ]
- 使你的博客打印机友好 – 一个半指南性的,关于怎样使WordPress主题打印机友好 CSS文件。
- Aleeya.Net: Wordpress友好的CSS打印机 – 一个CSS 样本(没有图例主题) 怎样制作你自己的CSS的一些小贴士。
- W3's CSS 2.1 Paged 媒体信息
- W3.org's CSS-2 媒体参考
- 代码形式媒体监控(设计, 打印, 等等)
- Kissing Print Versions of Pages Goodbye by Lachlan Cannon
- Lachlan Cannon的与样式一起打印
- CodeBitch的打印网页
- Zeldman.com's Essentials: 打印机友好的
- Apart的 CSS 设计列表: 将要打印
- Evolt.org's 你的网站外观在纸上看起来有多好
- Property里的网页分割
- Killersites.com's使网页可以打印 使用CSS
打印机友好的CSS主题[ ]
如果你的主题已经有了一个打印机有好的CSS,在这儿发一个链接。如果你为主题创建了一个打印机友好的CSS,在这儿发表一个链接到你的网页和主题网页的链接。
- 图例主题的打印机友好的CSS –由Arik Fraimovich制作。得到图例主题here。
翻译[ ]
如果你已经翻译了这篇文章,或者你的博客上有相似的文章,请在这儿发表一个链接。请将完全翻译的文章标记为(t),将相似的文章标记为(s)。 Print yemadregiya mengedoch in Amharic.(t)
Printable version with CSS - نسخه قابل چاپ با سی اس اس in Persian(فارسی). (s)
Criando Estilos para Impressão葡萄牙语. (t)
Opsætning af WordPress til udskrivning 丹麦语。(t)
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.