html 条件样式,HTML 样式

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值