CSS 基础实践

欢迎来到我们的 CSS 基础实践课程。在这个页面，我们将通过一系列练习来帮助你更好地理解和掌握 CSS 的基本概念。

CSS 简介

CSS（层叠样式表）是一种用于描述 HTML 或 XML 文档样式的样式表语言。通过 CSS，你可以控制网页的布局、颜色、字体等样式。

实践内容

以下是一些 CSS 基础的实践内容：

选择器：了解和使用不同的选择器来定位页面中的元素。
盒模型：学习盒模型的概念，包括边距、边框、内边距和外边距。
布局：掌握常用的布局方法，如浮动、定位等。
响应式设计：了解如何创建响应式网页，使其在不同设备上都能良好显示。

练习示例

1. 创建一个简单的页面布局

创建一个简单的页面布局，包括标题、导航栏、内容区域和侧边栏。

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS 样式 */
    </style>
</head>
<body>
    <header>
        <h1>页面标题</h1>
    </header>
    <nav>
        <!-- 导航栏内容 -->
    </nav>
    <main>
        <!-- 内容区域内容 -->
    </main>
    <aside>
        <!-- 侧边栏内容 -->
    </aside>
</body>
</html>

2. 设置元素样式

为以下 HTML 元素设置样式：

<h1>标题</h1>
<p>段落</p>
<div>块级元素</div>
<span>行内元素</span>

/* CSS 样式 */
h1 {
    color: red;
    font-size: 24px;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

div {
    background-color: #f0f0f0;
    padding: 10px;
}

span {
    color: blue;
}

扩展阅读

想要了解更多关于 CSS 的知识，请访问我们的 CSS 教程页面。