html引入css

在HTML页面设计中，CSS（层叠样式表）起到了至关重要的作用，它能够美化页面、提高用户体验，本文将详细介绍如何在HTML中引入CSS，帮助大家更好地掌握这一技能。

内联样式

内联样式是最简单的引入CSS的方法，直接在HTML标签中使用style属性，这种方法虽然方便，但不利于维护和复用，因此不建议大量使用。

<!DOCTYPE html>
<html>
<head>
    <title>内联样式示例</title>
</head>
<body>
    <p style="color: red; font-size: 16px;">这是一个红色、16px大小的段落。</p>
</body>
</html>

html引入css

在上面的代码中，我们为<p>标签添加了style属性，并在其中定义了文字颜色和字体大小。

内部样式表

内部样式表是将CSS代码写在<style>标签中，并放置在<head>标签内，这种方法可以在一个页面内复用样式，但不适用于多个页面的情况。

<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色、18px大小的段落。</p>
</body>
</html>

在上面的代码中，我们定义了一个内部样式表，将所有<p>标签的文字颜色设置为蓝色，字体大小设置为18px。

外部样式表

外部样式表是将CSS代码保存在一个单独的文件中，通常以.css为扩展名，然后在HTML文件中通过<link>标签引入，这种方法可以很好地实现样式复用和页面分离，是实际开发中常用的一种方式。

1、创建CSS文件

html引入css

创建一个名为style.css的CSS文件，并在其中编写以下代码：

p {
    color: green;
    font-size: 20px;
}

2、引入CSS文件

在HTML文件中，使用<link>标签引入刚刚创建的CSS文件：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>这是一个绿色、20px大小的段落。</p>
</body>
</html>

在上面的代码中，我们通过<link>标签引入了style.css文件，使得页面中的<p>标签应用了外部样式表中的样式。

多重样式叠加

在HTML页面中，可以同时使用多种引入CSS的方法，当多种样式发生冲突时，将遵循以下优先级规则：内联样式 > 内部样式表 > 外部样式表，就近原则也适用于样式冲突的解决。

html引入css

以下是一个多重样式叠加的示例：

<!DOCTYPE html>
<html>
<head>
    <title>多重样式叠加示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        p {
            color: purple;
        }
    </style>
</head>
<body>
    <p style="color: orange;">这是一个段落。</p>
</body>
</html>

在这个示例中，虽然外部样式表、内部样式表和内联样式都定义了文字颜色，但最终显示的是内联样式的颜色，即橙色。