<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 注释示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif; /* 设置字体 */
background-color: #f0f0f0; /* 背景颜色 */
margin: 0;
padding: 20px;
}
/* 标题样式 */
h1 {
color: #333; /* 深灰色标题 */
text-align: center;
}
/* 段落样式 */
p {
font-size: 16px; /* 字体大小 */
line-height: 1.6;
color: #555; /* 灰色文本 */
}
/* 类样式 - 特殊段落 */
.special-paragraph {
color: green; /* 绿色文本表示特殊内容 */
font-weight: bold;
}
/*
下面这段样式被注释掉了，不会对页面产生影响。
.hidden {
display: none;
}
*/
/* 链接样式 */
a {
color: blue; /* 链接颜色 */
text-decoration: none; /* 去掉下划线 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>
</head>
<body>
<h1>欢迎来到CSS注释示例页面</h1>
<p>这是一个普通的段落，用于展示基本的文本样式。</p>
<p class="special-paragraph">这是一个特殊的段落，通过类选择器应用了不同的样式。</p>
<a href="#">这是一个示例链接</a>
</body>
</html>
