<style>

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>

猜你喜欢