如何在html中引用css

在HTML中引用CSS，可以使用`标签将外部CSS文件链接到HTML文档头部，或者使用`标签内嵌CSS代码。

如何在HTML中引用CSS

如何在html中引用css

在HTML中引用CSS有几种方式，下面将详细介绍其中两种常见的方法：内联样式和外部样式表。

1、内联样式

内联样式是将CSS样式直接嵌入到HTML元素内部的方式，通过在HTML元素的style属性中添加CSS规则，可以直接改变该元素及其子元素的样式。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: blue;">这是一个标题</h1>
    <p style="font-size: 18px;">这是一个段落。</p>
</body>
</html>

在上面的示例中，我们使用style属性为h1标签设置了蓝色字体颜色，为p标签设置了18像素的字体大小。

2、外部样式表

外部样式表是将CSS规则保存在一个独立的外部文件中，然后在HTML文件中引用该文件的方式，这样可以更好地组织和管理样式规则，并且可以在整个网站中重复使用相同的样式。

步骤如下：

- 创建一个CSS文件，例如styles.css，并在其中编写样式规则。

- 在HTML文件的head部分使用link标签引用CSS文件。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1 class="blue-text">这是一个标题</h1>
    <p class="large-font">这是一个段落。</p>
</body>
</html>

在上面的示例中，我们在head部分使用link标签引用了名为styles.css的外部CSS文件，在HTML元素中使用类选择器（以点号开头）来应用相应的样式规则。