标记语言——打印样式
互联网 发布时间：2008-10-17 18:56:01 作者：佚名 
我要评论
我要评论点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——网页应用CSS样式。
Chapter 11 打印样式
先前在第10章中,讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就
分开屏幕显示与打印的样式
假设我们想为同一份文件提供两份CSS:一个在显示时使用,另一个在打印时使用.现在以我的个人网站作为示范.
我以<link>标签引用整个网站的主体样式表(styles.css).styles.css的内容只是个简单的@import规则,用以引入另一个外部样式表,这样能够对老旧浏览器(像是Netscape 4.x)隐藏样式设定.
在页面的<head>里,链接到主体样式表styles.css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
同时也建立另一个特别针对打印设计的样式表(print.css).在print.css里,我写了只在页面打印时适用的样式.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />
然后,现在要如何确保这些CSS只会针对各自适合的媒体发挥作用呢?为<link>标签加上media属性就可以了(与方法A一样).
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
通过为styles.css指定screen,就能确保styles.css包含的样式只会对电脑屏幕使用,同样的,把media属性设为print就能确保print.css包含的样式只在使用者打印页面时使用.
现在已经把屏幕与打印样式分开了,接着让我们看看有哪些样式适合放在打印样式表里头. 设计一份打印样式表
这份style.css可能包含了排版布局,字体,定位,背景等规则,但是print.css却是一张白纸,等着我们自定义打印时应用的样式.
设计打印样式要注意的关键就是媒体类型,由于现在正在处理一张纸(而不是浏览器窗口),因此像素长度,大小并不是最佳选择. 用点数指定大小
在打印样式表里,用点数制定字体大小是件十分合理的事情.在这份打印样式表中,首先就为<body>标签定义基础字体大小 -- 使用"点"单位.
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
实在太简单了,比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读. 隐藏不必要的标签节省墨水
网站上或许有不少页面元素在打印版本上完全没有用,像是导航链接,侧边栏,表单以及广告栏之类的元素在打印时经常只会浪费墨水,我们可以在打印样式表内使用display属性将它们设为不显示.使用者经常只想打印页面的内容.
举例来说,如果网站以#nav,#sidebar,#advertising与#search分别存放导航条,侧边栏,广告项目与搜索表单的话,就能在打印样式表里用以下这段声明把这些内容全部隐藏起来:
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
#nav, #sidebar, #advertising, #search {
display: none;
}
通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.
试着隐藏页面上不必要的元素,很快就能以同一份标记代码轻松为你的网站作出"打印友好"的版本.不必在服务器上用另一份缩减过的模板输出一份完全一样的网站内容 -- 只需要一份额外的CSS文件,指定print媒体类型,搞定!
现在再度证实,以逻辑页面"段落"组织标记结构让未来设计样式更方便.如果页面中有个广告横幅,为它指定id很合理,因为这能把控制权交给CSS.在这个例子中,是在打印时将它隐藏起来.
去掉背景图片和颜色也是节省墨水,让打印结果更容易阅读的技巧之一.
举例来说,如果先前为<body>标签指定了背景图片或是颜色,现在就像这样就能把它去掉:
body {
background: none;
}
当然也能用这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.
相关文章
文章介绍了HTML中img标签的使用,包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引，本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单，可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片，并展示一些常见的用法和技巧,通过本文的介绍，应该掌握了在 HTML 中添加和调整图片的基础知识，感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
最新评论