频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
Media 打印
2017-02-08 11:12:00         来源:小昕成长史  
收藏   我要投稿

信息: Media

CSS的作用是将网页文档以更友好的展现方式呈现给用户。

例如,假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法。

CSS通过使用@media的格式来对特定的媒介指定适配规则。

示例

我们的站点上有一个导航区域允许用户浏览。

在标签语言中,导航区域父元素的id是nav-area.(在HTML5中, 可以使用](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav)元素代替带有id属性的[。)

为了网页在被打印的时候去掉无用的信息,我们在样式表中加一条适配规则,使导航区域在打印时是被隐藏起来的:

@media print {
  #nav-area {display: none;}
  }

一些常见的媒介类型:

screen 彩色计算机显示
print 打印(分页式媒体)
projection 投影
all 所有媒体 (默认)

更多

一些其他指定媒介类型的规则。

类型可以在样式表通过link方式加到文档时被指定,这是文档的标签语言允许的 。例如,在HTML中,你可以通过在LINK标签上添加media属性来指定媒介类型。

在CSS中,你可以在样式表开头使用@import一个url来引入另外的样式表,同时指定其媒介类型。

根据这些知识,你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

想获取媒介类型更多细节,请参考CSS规范中的Media部分。

接下来将介绍更多display属性的例子:XML data.

打印

CSS有一些特性能够支持打印和分页媒体。

@page规则能够设置页间距,对于双面打印,还可以分开设置@page:left和@page:right。

对于打印媒介,可以使用适当的长度单位,像是英寸(in)、点(1pt = 1/72 inch)、厘米(cm)还有毫米(mm)。这等同于使用em来配合字体大小和百分比。

可以通过使用page-break-before,page-break-after和page-break-inside属性来控制文档内容的分页边界。

示例

这个规则把四个方向的页边距都设置为1 inch:

@page {margin: 1in;} 

这个规则确保每个H1元素都从新的一页开始:

h1 {page-break-before: always;}

更多细节

想获取更多细节,请参考CSS规范中的Paged media部分。

像CSS的其他特性一样,打印也依赖于你的浏览器及其设置。例如,在打印的时候Mozilla浏览器支持默认的间距,页眉和页脚。而当其他用户打印你的文档时,你无法预知他会使用的什么样的浏览器和设置,因此你也不能完全控制打印情况。

用户界面

CSS有一些特殊的属性能够支持设备的用户界面,像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

并没有针对用户界面设备的特殊媒介类型。

下面有五种特殊的选择器:

Selector Selects
E:hover 当鼠标悬浮任何E元素上
E:focus 当元素获得键盘焦点
E:active 当元素是当前的活动元素
E:link 当元素超链接到一个url但是用户还没有访问过
E:visited 当元素超链接到一个url但是用户已经访问过

cursor属性指定鼠标的形状:一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:

Selector Selects
pointer 指示超链接
wait 表明程序无法接受输入
progress 表明程序正在运行,但是仍可以接受输入
default 默认(通常是箭头)

outline属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
它的作用相当于border属性,但与其不同的是它不能指明个别方向。

一些其他的用户界面特性通常会通过属性来应用。例如,禁用或者只读的元素可以设置disabled属性和readonly属性。选择器可以通过方括:[disabled]或者[readonly]来指定这些属性。

示例

这些规则规定了按钮在用户使用时动态变化的样式:

.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  } 

当一个功能性按钮初始化的时候,它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时,从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。

更多

获取更多关于CSS用户界面的信息,请参考CSS规范中的User interface部分。

本文的第二部分列举了Mozilla的用户界面标签语言的例子,XUL。

实践: 打印文档

创建一个新的HTML文档,doc4.html. 把下面的HTML代码粘贴过去:




Section A

This is the first section...

Section B

This is the second section...

创建一个新的样式表,style4.css. 把下面的HTML代码粘贴过去:

/*** Print sample ***/

/* defaults  for screen */

#print-head,


#print-foot {

 display: none;
 }

/* print only */
@media print {

h1 {
 page-break-before: always;
 padding-top: 2em;
 }

h1:first-child {
 page-break-before: avoid;
 counter-reset: page;
 }


#print-head {

 display: block;
 position: fixed;
 top: 0pt;
 left:0pt;
 right: 0pt;

 font-size: 200%;
 text-align: center;
 }


#print-foot {

 display: block;
 position: fixed;
 bottom: 0pt;
 right: 0pt;

 font-size: 200%;
 }


#print-foot:after {

 content: counter(page);
 counter-increment: page;
 }

} /* end print only */

在浏览器中查看文档,你会看到它使用的是默认样式。

打印(或者打印预览)文档;样式表的适配规则开始起作用,同时会显示每个页面的页眉和页脚,如果浏览器支持记数器,页码也会被显示出来。

点击复制链接 与好友分享!回本站首页
相关TAG标签 Media
上一篇:JS(六)promise
下一篇:jQueryUI+jqGrid实现后台管理系统,包括权限管理,用户管理,任务管理
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站