📅 最后修改于: 2023-12-03 15:01:17.220000 🧑 作者: Mango
HTML 样式元素可以用于定义 HTML 文档的样式，如字体大小、颜色、背景色等。下面是一些常用的样式元素：
<style> 元素可以用于在 HTML 文档中定义样式信息。它通常放在文档的头部区域，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-size: 16px;
background-color: #f5f5f5;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
在 <style> 元素中，我们可以通过选择器来选中 HTML 元素，并设置相应的样式信息。上述例子中，我们选择了 body 元素，并设置了字体大小和背景色，同时选择了 h1 元素，并设置了颜色。
<link> 元素是一个指向外部样式文件的引用，它通常也放在文档的头部区域，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
在上述例子中，我们通过 <link> 元素引用了名为 styles.css 的外部样式文件。外部样式文件中可以定义多个样式规则，并非仅限于一个选择器和一组样式信息。这使得我们可以更好地组织和维护我们的样式信息。
<div> 元素是 HTML 中用于组合其他 HTML 元素的容器元素。我们可以通过 <div> 元素为一组元素设置相同的样式信息。下面是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="my-section">
<h1>Welcome to my page!</h1>
<p>This is a sample paragraph.</p>
</div>
<div class="my-section">
<h2>About Me</h2>
<p>My name is John Doe.</p>
</div>
</body>
</html>
在上述例子中，我们为两个 <div> 元素设置了相同的样式信息。我们可以通过选择器 .my-section 来选中两个 <div> 元素，并设置相应的样式信息。下面是样式文件 styles.css 的内容：
.my-section {
margin-bottom: 20px;
padding: 10px;
background-color: #f5f5f5;
}
上述样式信息设置了两个 <div> 元素的底部外边距、内边距和背景色。
<span> 元素和 <div> 元素很像，它也是用于组合其他 HTML 元素的容器元素。但不同的是，<span> 元素通常用于选择性地设置一部分文本的样式信息，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Welcome to my page! This is a <span class="my-highlight">sample</span> paragraph.</p>
</body>
</html>
在上述例子中，我们选择性地设置了 <span> 元素的样式信息，并将它用于包含 sample 文本。下面是样式文件 styles.css 的内容：
.my-highlight {
color: red;
font-weight: bold;
}
上述样式信息设置了 my-highlight 类型的 <span> 元素的颜色和字体加粗。
本文介绍了 HTML 样式元素包括 <style>、<link>、<div> 和 <span> 元素。通过组合使用这些元素，我们可以定义 HTML 文档的样式信息，使页面更加美观和易读。