当前位置：首页 > 行业动态 > 正文

html中如何引用css

admin
行业动态
2024-04-06
1

在HTML中引用CSS有几种方法，包括内部样式表、外部样式表和内联样式，下面将详细介绍这些方法，并提供相应的示例代码。

1. 内部样式表

内部样式表是将CSS代码直接嵌入到HTML文档的<head>标签内的<style>标签中，这种方法适用于较小的项目或单个HTML文件。

<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        body {
            backgroundcolor: lightblue;
        }
        h1 {
            color: white;
            textalign: center;
        }
        p {
            fontfamily: verdana;
            fontsize: 20px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用内部样式表的示例。</p>
</body>
</html>

2. 外部样式表

外部样式表是将CSS代码保存在一个独立的外部文件中，然后在HTML文档中使用<link>标签引用该文件，这种方法适用于较大的项目或多个HTML文件共享相同的样式。

创建一个名为styles.css的外部CSS文件：

body {
    backgroundcolor: lightblue;
}
h1 {
    color: white;
    textalign: center;
}
p {
    fontfamily: verdana;
    fontsize: 20px;
}

在HTML文档中使用<link>标签引用该外部样式表：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用外部样式表的示例。</p>
</body>
</html>

3. 内联样式

内联样式是将CSS属性直接应用于HTML元素，通过在元素的style属性中添加CSS规则来实现，这种方法可以快速修改单个元素的样式，但不建议在整个页面上广泛使用。

<!DOCTYPE html>
<html>
<head>
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: white; textalign: center;">欢迎来到我的网站</h1>
    <p style="fontfamily: verdana; fontsize: 20px;">这是一个使用内联样式的示例。</p>
</body>
</html>