允许HTML文档中内联定义样式元素

HTML样式

style 元素允许您在HTML文档中内联定义CSS样式。

style 元素具有局部属性: type，media，scoped 。

HTML5中添加了 scoped 属性。

例子

以下代码给出了所使用的样式元素的示例。

 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

　　

上面的代码为 a 元素创建了一个新样式。它显示具有灰色背景，白色文本和一些填充的链接。

您可以在整个HTML文档中使用 style 元素，并且单个文档可以包含多个样式元素。

type

style 元素中的 type 属性可以告诉浏览器你要定义什么样的样式；但是，浏览器支持的唯一的样式机制是CSS，所以值的此属性将始终为text/css。

 

style Media

style 元素中的 media 属性允许您指定应将样式应用于文档的时间。

以下代码提供了如何使用此属性的示例。

 

<!DOCTYPE HTML>
<html>
<head>
<style  media="screen" type="text/css">
a  {
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
<style  media="print">
a{
    color:Red;
    font-weight:bold;
    font-style:italic
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

上面的代码定义了两个具有不同媒体值的 style 元素。

当HTML在屏幕上显示时，浏览器将应用第一个样式，和打印页面时的第二种样式。

 

条件

您可以为样式创建非常具体的条件。

首先，您可以指定设备。可能的值列在下表中。

 

设备描述
all 将此样式应用于任何设备(这是默认设置)。
aural 将此样式应用于语音合成器。
braille 将此样式应用于盲文设备。
handheld 将此样式应用于手持设备。
projection 将此样式应用于投影机。
print 在打印预览和打印页面时应用此样式。
screen 当内容显示在计算机屏幕上时应用此样式。
tty 将此样式应用于固定宽度的设备，例如电传。
tv

将此样式应用于电视。

 

 

 

特征

使用媒体功能可以使您更具体。

以下代码为 style 元素添加了特殊性。

 

<!DOCTYPE HTML>
<html>
<head>
<style  media="screen AND  (max-width:500px)" type="text/css">
a  {
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
<style  media="screen AND  (min-width:500px)" type="text/css">
a  {
   color:Red; 
   font-style:italic;
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

　　

上面的代码使用 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

　　

posted @ 2020-09-20 11:34  degkr8868  阅读(442)  评论(0)    收藏  举报