【HTML&CSS】常见元素及样式汇总

作者：System 时间：2024年08月17日分类：所有,css 字数：878

这篇文章距离上次修改已过270天，其中的内容可能已经有所变动。

在HTML和CSS中，元素的样式可以通过内联样式、内部样式表和外部样式表三种方式来定义。以下是一个简单的HTML文档，它包含了这三种样式的应用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式汇总</title>

    <!-- 内部样式表 -->
    <style>
        .red-text {
            color: red;
        }
        .blue-background {
            background-color: blue;
        }
    </style>

    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- 内联样式 -->
    <h1 style="font-size: 30px;">欢迎来到我的网站</h1>

    <!-- 使用内部样式类 -->
    <p class="red-text">这是红色文字</p>

    <!-- 使用外部样式类 -->
    <p class="blue-background">这个段落有蓝色背景</p>

</body>
</html>

在styles.css文件中，可以定义.blue-background类的样式：

.blue-background {
    background-color: blue;
}

这个例子展示了如何在HTML文档中应用样式，包括如何通过不同的方式定义和链接样式。内联样式直接在元素上应用，通常用于单一元素的特殊样式。内部样式表用于当前文档，而外部样式表可以在多个页面之间共享样式规则。

【HTML&CSS】常见元素及样式汇总

评论已关闭

推荐阅读