HTML - style 属性

HTML 的style 属性包含 CSS 样式声明，用于将其应用于元素。

这是一个全局属性，建议在单独的文件中定义样式。style 属性和<style> 元素具有相同的目的，允许快速样式设置。

如果在任何元素内部使用 style 属性进行样式设置，则可以将其称为内联 CSS。

语法

<element style="property:value;">

应用于

由于 style 是一个全局属性，它适用于所有元素，尽管它可能对某些元素没有影响（放置在 head 元素内的标签）。

HTML style 属性示例

下面的示例将说明 HTML style 属性，以及我们应该在哪里以及如何使用此属性！

使用 style 属性进行内联样式设置

在下面的示例中，我们创建了两个元素 h1 和 p，并对它们都应用了样式。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

使用 style 属性覆盖内部 CSS

内部 css 优先级最高，如果我们在任何元素上应用 CSS 并使用 style 属性更改该元素的样式，它将优先考虑内联 css。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
   <style>
       span{
           color: black;
       }
   </style>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

覆盖 style 属性值

正如您在前面的示例中看到的，内联 CSS 是浏览器遵循的优先级最高的 CSS。但是，如果我们使用 !important，例如 color: black !important;，那么我们可以覆盖 style 属性值。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
   <style>
       span{
           color: black !important;
       }
   </style>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

支持的浏览器

属性
style	是	是	是	是	是

html_attributes_reference.htm

打印页面