HTML中的嵌入式样式和外部样式表

翻滚的胖子
2023-06-06 13:59:18
前端技术
HTML CSS JavaScript

HTML中的嵌入式样式和外部样式表是前端开发中不可或缺的一部分，它们可以方便地控制页面的样式和布局。下面我们将分别介绍它们的使用方法。

嵌入式样式

在HTML中，可以使用<style>标签来定义嵌入式样式。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #f2f2f2;
}

h1 {
  color: blue;
}
</style>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

在上面的例子中，我们在<head>标签内使用<style>标签定义了两个样式：一个是body的背景颜色，一个是h1的字体颜色。这两个样式都可以直接应用到HTML文档的任何地方。

需要注意的是，如果要定义多个样式，需要使用大括号把它们括起来，并且每个样式之间要用分号进行分隔。

外部样式表

与嵌入式样式不同，外部样式表需要将样式定义在一个独立的CSS文件中。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

在上面的例子中，我们在<head>标签内使用了一个<link>标签来引用一个名为styles.css的CSS文件。这个CSS文件中包含了所有的样式定义。需要注意的是，在引用CSS文件时，需要使用rel="stylesheet"属性来指定它是一个样式文件。

与嵌入式样式相比，外部样式表有以下优点：