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

front end technologyhtmlweb development更新于 2025/4/4 13:00:17

使用内联 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>