📅 最后修改于: 2023-12-03 15:31:15.991000 🧑 作者: Mango
HTML 提供了一系列的样式标签来帮助页面实现更美观的效果。这些标签一般都用于修改文本样式，比如字体，颜色等等。以下是一些常用的样式标签：
在 <head> 标签中，我们可以通过 <style> 标签来定义页面中的样式：
<head>
<title>My Website</title>
<style>
h1 {
color: red;
font-size: 36px;
}
p {
color: blue;
font-size: 18px;
}
</style>
</head>
在上面的例子中，我们通过 <style> 标签定义了两个不同的样式，分别应用于 <h1> 和 <p> 标签。
除了在 <head> 标签中定义样式之外，我们还可以通过在标签中直接使用样式属性来修改其样式：
<h1 style="color: red; font-size: 36px;">Hello World!</h1>
在使用行内样式时，我们需要在标签中使用 style 属性，属性值为一组带分号的样式属性/值对。
如果我们希望在页面中多个元素应用相同的样式，我们可以通过定义样式类并在元素中引用该类来实现：
<head>
<title>My Website</title>
<style>
.red-text {
color: red;
}
</style>
</head>
<body>
<h1 class="red-text">Hello World!</h1>
<p class="red-text">This text is also red.</p>
</body>
在这个例子中，我们通过定义样式类 .red-text 来设置文本颜色，而在元素中通过 class 属性来引用该样式类。
与样式类类似，我们也可以通过定义样式 ID 并在元素中引用来修改元素样式：
<head>
<title>My Website</title>
<style>
#banner {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="banner">
<h1>Welcome to my website!</h1>
<p>Here you will find all sorts of amazing content.</p>
</div>
</body>
在这个例子中，我们通过定义样式 ID #banner 来设置 <div> 元素的背景颜色和文本颜色，而在该元素中通过 id 属性来引用样式 ID。
以上就是 HTML 中样式标签的简单介绍。虽然这些标签和属性都相对简单，但结合起来可以创建出华丽的网页。