css练习

/* CSS 练习示例代码 */

/* 1. 基本选择器 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

/* 2. 类选择器 */
.red-text {
    color: red;
}

.blue-background {
    background-color: blue;
    color: white;
}

/* 3. ID 选择器 */
#main-header {
    text-align: center;
    padding: 20px;
}

/* 4. 组合选择器 */
ul li {
    list-style-type: square;
}

/* 5. 伪类选择器 */
a:hover {
    text-decoration: none;
    color: orange;
}

/* 6. 盒模型 */
.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

/* 7. 定位 */
.fixed-box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: yellow;
    padding: 5px;
}

/* 8. 响应式设计 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }

    h1 {
        font-size: 24px;
    }
}

解释说明：

1. 基本选择器：对 body、h1 和 p 元素应用样式，设置字体、背景颜色和文本颜色。
2. 类选择器：通过 .red-text 和 .blue-background 类来设置特定元素的颜色和背景颜色。
3. ID 选择器：使用 #main-header 来选择具有特定 ID 的元素，并设置居中对齐和内边距。
4. 组合选择器：对嵌套在 ul 中的 li 元素设置列表项样式。
5. 伪类选择器：当鼠标悬停在链接上时，移除下划线并改变颜色。
6. 盒模型：定义一个具有宽度、高度、内边距、边框和外边距的盒子。
7. 定位：将一个元素固定在页面底部右角。
8. 响应式设计：根据屏幕宽度调整样式，在宽度小于 600px 时改变背景颜色和标题字体大小。