一文讲透如何使用CSS美化HTML界面

/* 设置页面的背景颜色和字体样式 */
body {
    background-color: #f8f8f8;
    font-family: 'Open Sans', sans-serif;
}
 
/* 设置标题的样式 */
h1 {
    color: #333;
    text-align: center;
    padding: 20px;
}
 
/* 设置表格的样式 */
table {
    width: 100%;
    border-collapse: collapse;
}
 
/* 设置表头的样式 */
table th {
    background-color: #444;
    color: white;
    padding: 10px;
    border: 1px solid #ddd;
}
 
/* 设置表格单元格的样式 */
table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
 
/* 设置奇数行和偶数行的背景色以便区分 */
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
table tr:nth-child(even) {
    background-color: #ffffff;
}
 
/* 设置链接的样式 */
a {
    color: #333;
    text-decoration: none;
}
 
/* 当鼠标悬停在链接上时改变颜色 */
a:hover {
    color: #007bff;
}

这段CSS代码为HTML页面中的元素提供了基本的视觉样式，包括设置背景颜色、字体、标题样式、表格样式、链接样式等。同时，它还演示了如何使用CSS选择器来为表格、链接以及奇偶行应用样式。这有助于开发者理解如何通过CSS来增强HTML页面的用户界面。