HTML 样式

HTML <style> 标签定义 HTML 文档的样式规则。它定义了 HTML 元素在浏览器中的呈现方式。我们将 CSS 代码写在 <style> 标签内。例如:

<style>
    h1 {
      color: red;
    }
</style>
<h1>Heading</h1>

浏览器输出

An H1 element styled with CSS from the style tag

在这里,<h1> 标签的样式来自 <style> 标签内的 h1 选择器。

HTML <style> 标签是放置在文档 <head> 中的特定标签之一。


多个 Style 标签

一个文档中可以有多个 <style> 标签。例如:

<style>
    h1 {
      color: red;
    }
</style>

<style>
    h2 {
      color: blue;
    } 
</style>
<h1>Heading</h1>
<h2>Sub Heading</h2>

浏览器输出

Elements styled with CSS from multiple style tag

在这里,我们使用不同的 <style> 标签为 <h1> 标签指定了 red 颜色,为 <h2> 指定了 blue 颜色。


冲突的样式

当同一个元素或多个元素有两个 <style> 标签时,这被称为冲突的样式。在这种情况下,后一个样式的值将应用于 HTML 元素。例如:

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
  <style>
    h1 {
      color: blue;
    } 
  </style>

</head>
<body>
  <h1>This is a Header</h1>
</body>

浏览器输出

Conflicting HTML Style tags

在这里,我们有两个样式标签定义了 <h1> 元素的样式。第二个 <style> 的值应用于 <h1> 标签。因此,<h1> 的文本颜色是蓝色。


style 属性

我们也可以使用 style 属性来设置 HTML 元素的样式。例如:

<p style="color: red; font-weight: bold;">This is styled using the style attribute.</p>

浏览器输出

Paragraph styled inline using style attribute

在这里,您可以看到我们在 <p> 标签内使用了 style 属性来更改其 colorfont-weight

style 属性是一个全局属性,即它可以应用于所有 HTML 元素。

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战