《2024年CSS实战手册》第一章：CSS基础知识

1. CSS 的历史和发展

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言，它的历史可以追溯到 1996 年。在那个时候，HTML（超文本标记语言）是唯一一种用于描述网页内容的语言，但是它无法提供足够的样式控制能力。为了解决这个问题，一些早期的 Web 开发人员开始探索使用样式表来为网页添加样式。

最早的 CSS 规范是由 Håkon Wium Lie 和 Bert Bos 于 1996 年提出的，并于 1997 年被 W3C（万维网联盟）正式推荐使用。随着时间的推移，CSS 规范不断更新和完善，添加了许多新的特性和功能，例如盒模型、布局、媒体查询等。

在 2000 年代初期，随着 Web 2.0 运动的兴起，CSS 开始变得越来越重要，因为它提供了一种更加灵活和可扩展的方式来为网页添加样式。同时，CSS 也开始被广泛应用于其他领域，例如移动应用开发、游戏开发等。

近年来，CSS 技术不断发展和演进，出现了一些新的趋势和技术，例如 CSS 模块化、CSS 变量、CSS 预处理器等。这些技术使得 CSS 更加灵活和可扩展，同时也提高了 CSS 的开发效率和质量。

总的来说，CSS 已经成为了 Web 开发领域中不可或缺的一部分，它提供了一种更加灵活和可扩展的方式来为网页添加样式，提高了网页的美观性和用户体验。同时，CSS 技术也在不断发展和演进，以适应不断变化的 Web 开发需求。

2. CSS 的基本语法和选择器

CSS 的基本语法由选择器、属性和值组成。选择器用于选择要应用样式的 HTML 元素或类，属性用于指定样式的具体内容，而值则用于定义属性的具体值。

选择器是 CSS 中最重要的部分之一，它们用于选择要应用样式的 HTML 元素或类。下面是一些常见的选择器：

1. 元素选择器：用于选择特定的 HTML 元素，例如 p 、 h1 、 input 等。

在HTML中，CSS通过对HTML标签元素的特定选择来控制各种样式：如段落文字缩进、行间距、段落间距、各级标题文字大小、字体颜色、字体粗细（字重）、输入框、密码框等边框样式、框体高度、宽度、边框颜色、文字内容大小、输入框圆角等细节。

<p>段落文字内容</p><h1>一级标题</h1><h2>一级标题</h2><h3>一级标题</h3><h4>一级标题</h4><h5>一级标题</h5><h6>一级标题</h6><input placeholder="请输入用户名" type="text"></input><input placeholder="请输入用户名" type="password"></input>

2. 类选择器：用于选择具有特定类的 HTML 元素，例如 .warning 、 .error 等。

3. ID 选择器：用于选择具有特定 ID 的 HTML 元素，例如 #header 、 #footer 等。

4. 属性选择器：用于选择具有特定属性的 HTML 元素，例如 [type="text"] 、 [class="warning"] 等。

5. 伪类选择器：用于选择具有特定状态的 HTML 元素，例如 :hover 、 :active 等。

6. 兄弟选择器：用于选择同一父元素下的兄弟元素，例如 h1 + p 、 p + p 等。

7. 后代选择器：用于选择某元素的后代元素，例如 div p 、 table tr 等。

选择器的组合使用可以实现更加复杂的选择和样式控制，这也是 CSS 强大的地方之一。例如，你可以使用 div p.warning 选择器来选择所有包含 警告 类的 p 元素，并且这些 p 元素必须是 div 元素的后代。