HTML style 属性 - 绿叶网

HTML style 语法

在 HTML 中，style 是一个全局属性，它用于为元素定义内联样式。绝大多数元素都可以使用 style 属性。

语法：

<element style="CSS样式"></element>

说明：

element 是支持 style 属性的元素。

虽然 style 属性很方便，但在实际开发中，我们不推荐频繁使用它。因为将 CSS 样式混合在 HTML 结构中，会导致代码难以维护且无法复用。

最佳实践是使用单独的.css文件来编写 CSS 代码，而 style 属性一般仅用于 JavaScript 动态计算样式的场景，比如进度条宽度、动态坐标等。

HTML style 摘要

属于	HTML 属性
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML style 示例

接下来，我们通过一个简单的例子来讲解一下 HTML style 属性是如何使用的。

示例：style 属性的基本使用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p style="color: red; font-weight: bold;">绿叶网</p>
</body>
</html>

页面效果如下图所示。

HTML style属性示例

分析：

在上面例子中，我们使用 style 属性来为 p 元素定义了 2 个 CSS 规则，也就是颜色为红色（color: red;）、字体为粗体（font-weight: bold;）。

示例 2：内联样式的优先级

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { color: blue; }
    </style>
</head>
<body>
    <p style="color: red;">绿叶网</p>
</body>
</html>

页面效果如下图所示。

HTML 内联样式的优先级

分析：

在这个例子中，虽然我们在 style 标签中将 p 元素的颜色设置为了蓝色，但由于 style 属性（内联样式）的优先级更高，因此最终显示为红色。