HTML 样式
提示
- HTML样式标签用途:
<style>
标签用于定义HTML文档的CSS样式规则,放在文档的<head>
部分,控制元素的渲染方式。 - 使用多个Style标签:可 以在一个HTML文档中使用多个
<style>
标签来指定不同元素的样式。 - 样式冲突和Style属性:当同一元素存在多个样式定义时,后面的样式规则会覆盖前面的;还可以使用
style
属性直接在元素上应用内联样式。
HTML <style>
标签定义了 HTML 文档的样式规则。它规定了浏览器中 HTML 元素的渲染方式。我们在 <style>
标签内编写 CSS 代码。例如,
<style>
h1 {
color: red;
}
</style>
<h1>标题</h1>
浏览器输出
这里,<h1>
标签的样式来自 <style>
标签内的 h1
选择器。
HTML <style>
标签是放在文档的 <head>
内的特定标签之一。
多个 Style 标签
我们可以在一个文档中使用多个 <style>
标签。例如,
<style>
h1 {
color: red;
}
</style>
<style>
h2 {
color: blue;
}
</style>
<h1>标题</h1>
<h2>副标题</h2>
浏览器输出
这里,我们为 <h1>
指定了 红色
,而为 <h2>
指定了 蓝色
,使用了不同的 <style> 标签。
冲突的样式
当相同元素或元素有两个 <style>
标签时,称为冲突的样式。在这种情况下,后面的样式值将应用于 HTML 元素。例如,
<head>
<style>
h1 {
color: red;
}
</style>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
浏览器输出
这里,我们有两个定义 <h1>
元素样式的 style 标签。第二个 <style>
的值被应用于 <h1>
标签。因此,<h1>
的文本颜色为蓝色。
style 属性
我们也可以使用 style
属性为 HTML 元素设置样式。例如,
<p style="color: red; font-weight: bold;">这是使用 style 属性设置样式的。</p>
浏览器输出
这里,您可以看到我们在 <p>
标签内使用 style 属性改变了其 颜色
和 字体加粗
。
style
属性是一个全局属性,即它可以应用于所有 HTML 元素。