【HTML&CSS】常见元素及样式汇总
在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文档中应用样式，包括如何通过不同的方式定义和链接样式。内联样式直接在元素上应用，通常用于单一元素的特殊样式。内部样式表用于当前文档，而外部样式表可以在多个页面之间共享样式规则。
评论已关闭