How does this print stylesheet work?

不羁岁月 提交于 2019-12-19 09:29:08

问题


I really like how http://www.honorshaven.com/ looks printed (to pdf). I've looked through the source to try to figure out how they did it (my navigation always turns into ugly bullet lists on print...) -- and I'm at a loss. Anyone know? Any help would be awesome! Thanks, Martin

[Edit] I'm familiar with print stylesheets -- but aren't they mostly reached by a "print friendly"/"print me" link? In this case I'm just going up to the browser bar and choosing print. I'm sure I'm missing something stupid, but I don't know what...


回答1:


You need to use a stylesheet designated for printing. To do this, set the media type to print instead of all or screen. In this separate stylesheet, you can hide your navigation menus, change your fonts, spacing, margins, etc. and it is specific to the print output.

Here's a great article on ListApart about CSS Print Stylesheets.




回答2:


You can specify which stylesheet to use for different media.

In this case, they implement a print specific stylesheet to handle styling everything for a printed page.

Check out this W3 page for the different media types available:

W3C - Media Types




回答3:


if you really want to copy them don't declare your media in the link rel tag. Or better, just put media="all". That way all your styles will stay the same when you print your page.



来源:https://stackoverflow.com/questions/2914190/how-does-this-print-stylesheet-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!