CSS学习——网页的变美指南

/* 设置基本字体大小和字体 */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #FFFFFF;
}
 
/* 设置段落文本的行高和间距 */
p {
    line-height: 1.5;
    margin: 0 0 20px;
}
 
/* 设置链接的默认颜色和鼠标悬停时的颜色 */
a {
    color: #0088CC;
    text-decoration: none;
}
a:hover {
    color: #005580;
    text-decoration: underline;
}
 
/* 设置标题的样式，h1最大，h3最小 */
h1 {
    font-size: 24px;
    color: #003366;
}
h2 {
    font-size: 20px;
    color: #005580;
}
h3 {
    font-size: 18px;
    color: #0077A8;
}
 
/* 设置图片边界为0，并禁用图像链接 */
img {
    border: none;
}
 
/* 设置列表项标记的颜色和外边距 */
ul, ol {
    margin: 0 0 15px 30px;
}
ul li, ol li {
    color: #333333;
    list-style-position: inside;
}
 
/* 设置表格的边框和文本对齐方式 */
table {
    border-collapse: collapse;
    width: 100%;
}
table th, table td {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
    text-align: left;
}
 
/* 设置按钮的基本样式 */
button {
    padding: 5px 10px;
    border: 1px solid #0088CC;
    background-color: #CCEEFF;
    color: #003366;
    cursor: pointer;
}
button:hover {
    background-color: #005580;
    color: #FFFFFF;
}

这段代码展示了如何使用CSS来增强一个简单HTML页面的视觉美观性。它设置了基本字体、行高、间距，并对链接、标题、图片、列表、表格和按钮进行了样式化。通过这个例子，开发者可以学习到如何使用CSS来提升网页的可读性和用户体验。