HTML入门教程
HTML入门教程
    • 请登录查看
    阅读(2327)

    HTML 样式

    最后一次修改 2017年08月03日

    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.html.cn">Visit  www.html.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.html.cn">Visit  www.html.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.html.cn">Visit  www.html.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

    ← HTML 元数据
    HTML 资源链接 →
    提交