HTML <style> 标签定义 HTML 文档的样式规则。它定义了 HTML 元素在浏览器中的呈现方式。我们将 CSS 代码写在 <style> 标签内。例如:
<style>
h1 {
color: red;
}
</style>
<h1>Heading</h1>
浏览器输出
在这里,<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>
浏览器输出
在这里,我们使用不同的 <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>
浏览器输出
在这里,我们有两个样式标签定义了 <h1> 元素的样式。第二个 <style> 的值应用于 <h1> 标签。因此,<h1> 的文本颜色是蓝色。
style 属性
我们也可以使用 style 属性来设置 HTML 元素的样式。例如:
<p style="color: red; font-weight: bold;">This is styled using the style attribute.</p>
浏览器输出
在这里,您可以看到我们在 <p> 标签内使用了 style 属性来更改其 color 和 font-weight。
style 属性是一个全局属性,即它可以应用于所有 HTML 元素。