Media
来源:互联网 发布:刘邦打仗知乎 编辑:程序博客网 时间:2024/06/02 10:10
信息: 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有一些特殊的属性能够支持设备的用户界面,像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。
并没有针对用户界面设备的特殊媒介类型。
下面有五种特殊的选择器:
E:hover
当鼠标悬浮任何E元素上 E:focus
当元素获得键盘焦点 E:active
当元素是当前的活动元素 E:link
当元素超链接到一个url但是用户还没有访问过 E:visited
当元素超链接到一个url但是用户已经访问过 cursor
属性指定鼠标的形状:一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:
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代码粘贴过去:<!DOCTYPE html><html> <head> <title>Print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>Section A</h1> <p>This is the first section...</p> <h1>Section B</h1> <p>This is the second section...</p> <div id="print-head"> Heading for paged media </div> <div id="print-foot"> Page: </div></body></html>
创建一个新的样式表,
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 */
在浏览器中查看文档,你会看到它使用的是默认样式。
打印(或者打印预览)文档;样式表的适配规则开始起作用,同时会显示每个页面的页眉和页脚,如果浏览器支持记数器,页码也会被显示出来。
- media
- media
- @media
- Media
- media
- media-type,media-query
- media player
- media属性
- CSS Media
- javax.media
- media player
- Media Playback
- Read media
- Media types
- Phonegap-----Media
- media queries
- Media Playback
- [andriod]Media
- 内容
- 列表
- 盒模型
- 布局
- 表格
- Media
- image based lighting - reflection
- 文献检索
- 文献结构
- 文献类型
- 文献阅读
- nodejs回调函数与事件
- u3d聊天室模型。(转载)
- nodejs模块与包