css作用

/* 示例代码：CSS 样式表用于控制 HTML 元素的外观和布局 */

/* 选择器与样式规则 */
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; /* 设置具有 'highlight' 类的元素背景为黄色 */
}

/* ID 选择器 */
#main-content {
    width: 80%; /* 设置具有 'main-content' ID 的元素宽度 */
    margin: auto; /* 自动居中 */
    padding: 20px; /* 设置内边距 */
    border: 1px solid #ccc; /* 设置边框 */
}

/* 响应式设计 */
@media (max-width: 600px) {
    body {
        background-color: #fff; /* 在小屏幕设备上更改背景颜色 */
    }
    h1 {
        font-size: 24px; /* 调整小屏幕上的字体大小 */
    }
}

解释说明：

• 选择器：如 body、h1、p 等，用于选择 HTML 元素并应用样式。
• 类选择器（.highlight）：通过类名选择多个元素并应用相同的样式。
• ID 选择器（#main-content）：通过唯一标识符选择单个元素。
• 媒体查询（@media）：根据屏幕尺寸调整样式，实现响应式设计。