CSS美化网页：理论基础及示例

/* 设置页面的背景颜色和字体样式 */
body {
    background-color: #f8f8f8;
    font-family: 'Arial', sans-serif;
}
 
/* 设置标题的样式 */
h1 {
    text-align: center;
    color: #333333;
    margin-top: 50px;
}
 
/* 设置表格的样式 */
table {
    width: 80%;
    margin: 50px auto; /* 上下间距50px，左右自动居中 */
    border-collapse: collapse; /* 去除表格双边框 */
    text-align: left; /* 单元格内文本左对齐 */
}
 
/* 设置表头的样式 */
th {
    background-color: #f2f2f2;
    color: #333333;
    padding: 10px; /* 单元格内边距 */
    font-weight: bold; /* 加粗字体 */
}
 
/* 设置表格行的样式 */
td {
    border: 1px solid #dddddd; /* 单元格边框 */
    padding: 10px; /* 单元格内边距 */
}
 
/* 设置链接的样式 */
a {
    color: #333333;
    text-decoration: none; /* 去除下划线 */
}
 
/* 鼠标悬停时改变链接颜色 */
a:hover {
    color: #007bff;
}

这段代码为一个简单的网页设置了基本的CSS样式，包括背景颜色、字体、标题、表格和链接的样式。通过这个例子，开发者可以学习到如何使用CSS来美化网页元素，提高用户体验。