css菜鸟教程

/* 示例代码：简单的CSS样式 */

/* 选择器和属性 */
body {
    font-family: Arial, sans-serif; /* 设置整个页面的字体 */
    background-color: #f0f0f0; /* 设置背景颜色 */
}

h1 {
    color: #333; /* 设置标题文字颜色 */
    text-align: center; /* 居中对齐标题 */
}

p {
    margin: 10px 0; /* 设置段落的上下外边距 */
    line-height: 1.6; /* 设置行高，使文本更易读 */
}

/* 类选择器 */
.highlight {
    background-color: yellow; /* 高亮显示文本 */
    padding: 5px; /* 添加内边距 */
}

/* ID选择器 */
#special {
    font-weight: bold; /* 加粗文本 */
    color: red; /* 改变文本颜色 */
}

/* 伪类选择器 */
a:hover {
    text-decoration: none; /* 当鼠标悬停在链接上时移除下划线 */
    color: blue; /* 改变链接颜色 */
}

解释说明：

1. 选择器和属性：

   • body：设置整个页面的基本样式，如字体和背景颜色。
   • h1：设置标题的样式，如文字颜色和对齐方式。
   • p：设置段落的样式，如外边距和行高。

2. 类选择器：

   • .highlight：定义一个类选择器，用于高亮显示文本并添加内边距。

3. ID选择器：

   • #special：定义一个ID选择器，用于加粗和改变特定元素的文本颜色。

4. 伪类选择器：

   • a:hover：定义当鼠标悬停在链接上时的样式，如移除下划线和改变颜色。

通过这些示例代码，您可以快速了解如何使用CSS来美化网页内容。