CSS 用法详细讲解：从基础到进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

二、CSS 基础语法

（一）基本结构

CSS 规则由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，声明块包含具体的样式规则。

/* 选择器 { 属性: 值; } */
h1 {
    color: blue; /* 设置字体颜色 */
    font-size: 24px; /* 设置字体大小 */
}

（二）常用属性

CSS 提供了多种属性来定义元素的样式。

1. 字体和文本

body {
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 16px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    text-align: center; /* 设置文本对齐方式 */
}

2. 背景和边框

div {
    background-color: #f0f0f0; /* 设置背景颜色 */
    border: 1px solid #ccc; /* 设置边框 */
    padding: 20px; /* 设置内边距 */
    margin: 10px; /* 设置外边距 */
}

3. 尺寸和布局

css复制

.container {
    width: 80%; /* 设置宽度 */
    max-width: 600px; /* 设置最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

三、CSS 选择器

（一）基本选择器

CSS 提供了多种选择器来选择 HTML 元素。

1. 元素选择器

css复制

h1 {
    color: red;
}

2. 类选择器

css复制

.red-text {
    color: red;
}

3. ID 选择器

css复制

#main-heading {
    font-size: 24px;
}

（二）组合选择器

组合选择器允许你组合多个选择器来选择更具体的元素。

1. 后代选择器

css复制

.container p {
    color: blue;
}

2. 子选择器

css复制

.container > p {
    color: green;
}

最低0.47元/天解锁文章