如何将css添加到html(1)

📌 相关文章

📜 如何将css添加到html(1)

📅 最后修改于: 2023-12-03 15:38:44.556000 🧑 作者: Mango

如何将CSS添加到HTML

CSS (Cascading Style Sheets) 可以用于美化网站，让它们看起来更具有吸引力和易读性。现在，让我们了解如何将 CSS 添加到 HTML。

在HTML中添加CSS

使用内联样式

在HTML标记内，您可以使用内联样式指定CSS。

<div style="color: red;">这是一个红色的DIV。</div>

使用内部样式表

将CSS写入内部样式表中，并将其添加到HTML头中。

<!DOCTYPE html>
<html>
<head>
    <title>网站标题</title>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: navy;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

使用外部样式表

将CSS编写在一个文件中，以 .css 扩展名存储，并将该文件与HTML文档连接。

<!DOCTYPE html>
<html>
<head>
    <title>网站标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

在这种情况下，被引用的 CSS 文件的代码如下。

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

总结

这就是将 CSS 添加到 HTML 的几种方法。现在您可以使用这些技巧之一，轻松地优化您的网站设计。