跳到主要内容

HTML 样式

提示
  1. HTML样式标签用途：<style>标签用于定义HTML文档的CSS样式规则，放在文档的<head>部分，控制元素的渲染方式。
  2. 使用多个Style标签：可以在一个HTML文档中使用多个<style>标签来指定不同元素的样式。
  3. 样式冲突和Style属性：当同一元素存在多个样式定义时，后面的样式规则会覆盖前面的；还可以使用style属性直接在元素上应用内联样式。

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

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

浏览器输出

使用 style 标签中的 CSS 样式化的 H1 元素

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

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

多个 Style 标签​

我们可以在一个文档中使用多个 <style> 标签。例如，

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

<style>
  h2 {
    color: blue;
  }
</style>
<h1>标题</h1>
<h2>副标题</h2>

浏览器输出

使用多个 style 标签的 CSS 样式化的元素

这里，我们为 <h1> 指定了 红色，而为 <h2> 指定了 蓝色，使用了不同的 <style> 标签。

冲突的样式​

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

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>这是一个标题</h1>
</body>

浏览器输出

冲突的 HTML Style 标签

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

style 属性​

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

<p style="color: red; font-weight: bold;">这是使用 style 属性设置样式的。</p>

浏览器输出

使用 style 属性内联样式化的段落

这里，您可以看到我们在 <p> 标签内使用 style 属性改变了其 颜色 和 字体加粗。

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

最后于 更新