css style用法

/* 示例代码：基本的 CSS 样式用法 */

/* 选择器：对 HTML 元素进行样式定义 */
body {
    font-family: Arial, sans-serif; /* 设置整个页面的字体 */
    background-color: #f0f0f0; /* 设置页面背景颜色 */
}

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

p {
    font-size: 16px; /* 设置段落的字体大小 */
    line-height: 1.5; /* 设置行间距 */
    margin: 20px 0; /* 设置外边距 */
}

/* 类选择器：通过类名来应用样式 */
.highlight {
    background-color: yellow; /* 设置背景颜色为黄色 */
    padding: 5px; /* 设置内边距 */
}

/* ID 选择器：通过 ID 来应用样式 */
#special {
    border: 2px solid red; /* 设置边框 */
    font-weight: bold; /* 设置字体加粗 */
}

/* 伪类选择器：根据元素的状态应用样式 */
a:hover {
    text-decoration: underline; /* 当鼠标悬停在链接上时，添加下划线 */
}

/* 组合选择器：可以同时对多个元素应用相同的样式 */
h2, h3, h4 {
    color: blue; /* 设置 h2, h3, h4 的颜色为蓝色 */
}

解释说明：

• 选择器：CSS 使用选择器来选择要应用样式的 HTML 元素。常见的选择器包括标签选择器（如 body、h1）、类选择器（如 .highlight）、ID 选择器（如 #special）等。
• 属性与值：每个选择器后面跟着一对大括号 {}，里面包含一系列的属性和值，用来定义具体的样式规则。例如 font-family: Arial, sans-serif; 表示设置字体为 Arial 或无衬线字体。
• 组合选择器：可以通过逗号分隔多个选择器，一次性为多个元素应用相同的样式。
• 伪类选择器：用于根据元素的状态（如鼠标悬停、点击等）应用不同的样式，如 a:hover 表示当鼠标悬停在链接上时触发的样式。

希望这个示例能帮助你理解 CSS 的基本用法！