如何在 HTML 中为元素使用内联 CSS 样式？

使用内联 CSS，我们可以一次为一个 HTML 元素应用一个独特的样式。这可以通过使用 style 属性来完成。内联 CSS 始终会覆盖在内部或外部样式表中确定的样式属性。

语法

<element style="mystyles">

以下是示例...

示例

在以下示例中，我们应用在相关元素的 style 属性中定义的内联样式

<!DOCTYPE html>
<html>
<body>
   <p style="color:lightgreen;">Hello Everyone</p>
   <p style="color:red;">Welcome to Tutorialspoint</p>
</body>
</html>

在执行上述脚本时，内联 CSS 会被激活并应用到文本中的元素中。

使用 JavaScript

使用 JavaScript，style 属性可用于设置特定元素的内联 CSS 属性。

语法

element_name.style

示例

在以下示例中，我们使用 style 对象来设置带有 ID Varma 的段落的 CSS 属性。

<!DOCTYPE html>
<html>
<body>
   <p id="varma">HELLO WORLD..!</p>
   <script>
      let p = document.querySelector('#varma');
      p.style.color = 'red';
      p.style.fontWeight = 'bold';
   </script>
</body>
</html>

在运行上述代码时，文本中的元素会应用内联 CSS

更新时间：2022-09-02

350 次浏览

开启你的职业生涯 Career

完成课程获得认证

开始
广告