HTML样式
style元素允许您在HTML文档中内联定义CSS样式。
style元素具有局部属性:type,media,scoped。
HTML5中添加了scoped属性。
例子
以下代码给出了所使用的样式元素的示例。HTML>
a {
background-color: grey;
color: white;
padding: 0.5em;
}
This is a test.
Visit www.html.cn
上面的代码为a元素创建了一个新样式。它显示具有灰色背景,白色文本和一些填充的链接。
您可以在整个HTML文档中使用style元素,并且单个文档可以包含多个样式元素。
type
style元素中的type属性可以告诉浏览器你要定义什么样的样式;但是,浏览器支持的唯一的样式机制是CSS,所以值的此属性将始终为text/css。
style Media
style元素中的media属性允许您指定应将样式应用于文档的时间。
以下代码提供了如何使用此属性的示例。HTML>
a {
background-color: grey;
color: white;
padding: 0.5em;
}
a{
color:Red;
font-weight:bold;
font-style:italic
}
This is a test.
Visit www.html.cn
上面的代码定义了两个具有不同媒体值的style元素。
当HTML在屏幕上显示时,浏览器将应用第一个样式,和打印页面时的第二种样式。
条件
您可以为样式创建非常具体的条件。
首先,您可以指定设备。可能的值列在下表中。设备描述all将此样式应用于任何设备(这是默认设置)。
aural将此样式应用于语音合成器。
braille将此样式应用于盲文设备。
handheld将此样式应用于手持设备。
projection将此样式应用于投影机。
print在打印预览和打印页面时应用此样式。
screen当内容显示在计算机屏幕上时应用此样式。
tty将此样式应用于固定宽度的设备,例如电传。
tv将此样式应用于电视。
特征
使用媒体功能可以使您更具体。
以下代码为style元素添加了特殊性。HTML>
a {
background-color: grey;
color: white;
padding: 0.5em;
}
a {
color:Red;
font-style:italic;
}
This is a test.
Visit www.html.cn
面的代码使用width功能来区分两种样式。第一个将在浏览器窗口小于500像素时使用,和第二个窗口宽度大于500像素。
您可以使用AND将设备与功能组合。
除了AND之外,还可以使用NOT或逗号(,)表示OR。这允许您创建复杂和相当具体的条件,以应用样式。
可用功能及其修饰符列在下表中。
除非另有说明,否则可以使用min-或max-修改这些功能,以创建阈值而不是具体值。width指定浏览器窗口的宽度。
单位表示为像素的px。
例如:width:200px
height指定浏览器窗口的高度。
单位表示为像素的px。
例如:height:200px
device-width 指定整个设备的宽度,而不仅仅是浏览器窗口。
单位表示为像素的px。
例如:min-device-width:200px
device-height指定整个设备的高度,而不仅仅是浏览器窗口。
单位表示为像素的px。
例如:min-device-height:200px
resolution指定设备的像素密度。
单位是dpi(每英寸点数)或dpcm(每厘米点数)。
例如:max-resolution:600dpi
orientation 指定设备的方向。
支持的值为纵向和横向。
此功能没有修饰符。
例如:orientation:portrait
aspect-ratio指定浏览器窗口设备的像素比率。
值表示为高度像素数上的宽度像素数。
例如:aspect-ratio:16/9
device-aspect-ratio指定浏览器窗口或整个设备的像素比率。
值表示为高度像素数上的宽度像素数。
例如:min-aspect-ratio:16/9
color monochrome指定彩色或单色设备每像素的位数。
例如:min-monochrome:2
color-index指定显示可以显示的颜色数。
max-color-index:256
scan指定电视的扫描模式。支持的值是渐进和交错。
此功能没有修饰符。
例如:scan:interlace
grid指定设备的类型。网格设备使用固定网格显示内容;例如,基于字符的终端和单行寻呼机显示器。
支持的值为0和1,其中1是网格设备。此功能没有修饰符。
例如:grid:0