码迷,mamicode.com
首页 > 其他好文 > 详细

<style>

时间:2018-10-19 15:12:39      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:电视   不完全   aspect   位图   htm   asp   color   project   ati   

1. style 元素

用于为 HTML 文档定制样式信息。一个网页,如果没有样式,那么它只能是苍白的。有了样式,它才能展现出 Web 应有的婀娜多姿。

不像 title 元素只能放在 head 中,style 可以出现在 HTML 文档中的各个部分,另外,一个文档也可以包含多个 style 元素。

<style> 标签有三个属性:

  • media —— 指定样式适用的媒体
  • scoped —— 指定样式的作用范围
  • type —— 指定样式的类型


2. 使用 media 属性指定样式适用的媒体

通过 style 元素的 media 属性,可以用来表明文档在什么情况下应该使用该元素中定义的样式。

描述
all 将样式用于所有设备(默认)。
aural 将样式用于语音合成器。
braille 将样式用于盲文设备。
handheld 将样式用于手持设备(小屏幕、有限的带宽)。
projection 将样式用于投影机。
print 将样式用于打印预览或打印页面。
screen 将样式用于计算机屏幕。
tty 将样式用于电传打字机之类的等宽设备。
tv 将样式用于电视机(低分辨率、有限的屏幕翻滚能力)。


注意:设备的归类是由浏览器负责的,有些设备(比如 screen 和 print)在各种浏览器上的解释比较一致;但有一些设备(比如 handheld)的解释可能各家并不完全一致。因此,在实际开发中需要先核实一下为佳。


3. media 属性还可以通过一些特性来设计更具体的条件

描述
width 规定目标显示区域的宽度。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (min-width:500px)"
height 规定目标显示区域的高度。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (max-height:700px)"
device-width 规定目标显示器/纸张的宽度。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (device-width:500px)"
device-height 规定目标显示器/纸张的高度。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (device-height:500px)"
orientation 规定目标显示器/纸张的方向。可能的值:"portrait" 或 "landscape" 
例子:media="all and (orientation: landscape)"
aspect-ratio 规定目标显示区域的宽度/高度比。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (aspect-ratio:16/9)"
device-aspect-ratio 规定目标显示器/纸张的 device-width/device-height 比率。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (aspect-ratio:16/9)"
color 规定目标显示器的 bits/color。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (color:3)"
color-index 规定目标显示器可以处理的颜色数。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (min-color-index:256)"
monochrome 规定单色帧缓冲中的 bits/pixel。可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (monochrome:2)"
resolution 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 "min-" 和 "max-" 前缀。
例子:media="print and (resolution:300dpi)"
scan 规定 TV 显示器的扫描方式。可能的值:"progressive" 和 "interlace"。
例子:media="tv and (scan:interlace)"
grid 规定输出设备是否是网格或位图。可能的值:"1" 为网格,否则为 "0"。
例子:media="handheld and (grid:1)"


注意:"min-" 前缀表示 “不低于” 指定的像素值;"max-" 前缀表示 “不大于” 指定的像素值。

可以使用三种逻辑运算符来组合设备和特性条件。

举个例子,我们让网页在浏览器宽度为512像素到1024像素之间,显示另外一种样式,我们可以这么做:

1 <style type="text/css" media="screen and (min-width:512px) and (max-width:1024px)">
2     body {
3         background-image: url("../img/bc2.png");
4     }
5 </style>

 

<style>

标签:电视   不完全   aspect   位图   htm   asp   color   project   ati   

原文地址:https://www.cnblogs.com/bingw/p/9816295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!