《CSS 简易速速上手小册》第1章：CSS 基础入门（2024 最新版）

1.1 CSS 语法和选择器：挑选你的画笔

在 CSS 的世界里，语法和选择器是你用来创造和实现想象中的设计的基本工具。理解它们，就像是学会了掌握画笔，能让你在网页这幅画布上自由地挥洒。

1.1.1 基础知识

• CSS 语法：CSS 的基本结构由选择器和声明块组成。选择器用于指定我们要样式化的 HTML 元素，而声明块则包含了一个或多个声明，用大括号 {} 包围。每个声明由一个属性和一个值组成，属性和值之间用冒号 : 分隔，多个声明之间用分号 ; 分隔。例如：

p {
  color: red;
  font-size: 16px;
}

• 类型选择器：直接通过标签名来选择元素，如 p、div、h1 等。
• 类选择器：通过元素的 class 属性值来选择元素，前面加点 . 表示，如 .classname。
• ID 选择器：通过元素的 id 属性值来选择元素，前面加 # 表示，如 #idname。
• 属性选择器：根据元素的属性及属性值来选择元素，如 [type="text"]。
• 伪类选择器：用于定义元素的特殊状态，如 :hover、:focus 等。
• 伪元素选择器：用于样式化元素的特定部分，如 ::before、::after。

1.1.2 重点案例：创建一个响应式导航菜单

想象你正在为一个网站设计导航栏。你需要一个横向布局的导航菜单，当用户鼠标悬停时，菜单项的背景色变化，并且在小屏幕设备上自动转换为纵向布局。

• HTML 结构：

<nav class="navbar">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item">服务</a>
  <a href="#" class="nav-item">联系方式</a>
</nav>

• CSS 样式：

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
}

.nav-item:hover {
  background-color: #ddd;
  color: black;
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}

在这个案例中，我们使用类选择器 .navbar 和 .nav-item 来样式化导航栏和菜单项。伪类选择器 :hover 用于定义鼠标悬停状态，而媒体查询 @media 用于在屏幕宽度小于 600px 时改变导航栏的布局。

1.1.3 拓展案例 1：为特定链接添加图标

假设你想为所有指向外部链接的 a 标签自动添加一个外链图标，提示用户这将打开一个新窗口。

• CSS 样式：

a[href^="http"]:not([href*="yourwebsite.com"])::after {
  content: "⇗";
  padding-left: 5px;
}

这里我们使用属性选择器 a[href^="http"] 来选择所有 href 属性值以 “http” 开头的 a 标签，且通过 :not([href*="yourwebsite.com"]) 排除了指向你自己网站的链接。伪元素 ::after 用于在

这些链接文本之后添加一个上箭头图标。

1.1.4 拓展案例 2：创建一个简单的问答折叠面板

想要在常见问题（FAQ）页面上实现一个简单的折叠效果，当点击问题时，相应的答案可以展开或隐藏。

• HTML 结构：

<div class="faq-item">
  <h2 class="faq-question">什么是 CSS ?</h2>
  <p class="faq-answer">CSS 是用于样式化网页的语言。</p>
</div>

• CSS 样式：

.faq-answer {
  display: none;
}

.faq-question:hover + .faq-answer {
  display: block;
}

在这个案例中，我们使用 :hover 伪类选择器来实现当鼠标悬停在问题上时显示答案。这是一个简单的实现方式，展示了选择器和伪类如何用于创建交互式元素。

通过这些案例，我们可以看到 CSS 选择器和语法的强大之处，它们让我们能够以几乎无限的方式来创造和控制网页的每个细节。继续实验，挑战自己，很快你就会发现自己能够轻松地将任何设计想法转化为现实。

1.2 盒模型的基础：构建你的乐高城堡

CSS 盒模型是网页布局的基石，理解它就像是掌握了搭建任何结构的乐高积木。每个元素都被视为一个盒子，这个盒子包括了内容（content）、内边距（padding）、边框（border）、和外边距（margin）。掌握盒模型意味着你可以精确地控制元素的大小、间距以及它们之间的关系。

1.2.1 基础知识

• 内容（Content）：这是盒子的主体部分，包括文本和图片等。
• 内边距（Padding）：内容与边框之间的空间。
• 边框（Border）：围绕内边距和内容的边线。
• 外边距（Margin）：盒子与其他盒子之间的空间。

重要属性：

• box-sizing：控制盒模型的计算方式。默认为 content-box，表示盒子的宽高只包括内容区域；设为 border-box 时，盒子的宽高还包括了边框和内边距。

1.2.2 重点案例：创建一个卡片布局

假设你需要为一个网站创建一个简单的卡片布局，每个卡片显示一篇文章的概览，包括一个图片、标题和简介。

• HTML 结构：

<div class="card">
  <img src="thumbnail.jpg" alt="Article Thumbnail" class="card-img">
  <h3 class="card-title">文章标题</h3>
  <p class="card-desc">这是一篇非常有趣的文章。</p>
</div>

• CSS 样式：

.card {
  box-sizing: border-box;
  width: 300px;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.card-img {
  width: 100%;
  margin-bottom: 15px;
}

.card-title, .card-desc {
  margin: 0 0 10px 0;
}

这个案例展示了如何使用盒模型的各个部分来创建一个有吸引力的卡片布局。box-sizing: border-box; 确保了元素的宽度包含了内容、内边距和边框，这样可以更容易地控制卡片的总体大小。

1.2.3 拓展案例 1：垂直居中一个元素

垂直居中是一个常见的布局需求。使用盒模型的特性，我们可以轻松实现这一点，特别是当我们不知道内容的具体高度时。

• HTML 结构：

<div class="centered-container">
  <p class="centered-content">我是垂直居中的内容！</p>
</div>

• CSS 样式：

.centered-container {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
}

.centered-content {
  padding: 20px;
  background-color: lightgrey;
}

通过使用 Flexbox（一个 CSS3 的布局模式），我们可以很容易地实现垂直和水平居中，而盒模型的 padding 和 background-color 属性让内容更加突出。

1.2.4 拓展案例 2：创建带有内边距和外边距的流式布局

流式布局是响应式设计的关键元素，允许内容随着浏览器窗口的大小变化而自适应。

• HTML 结构：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

• CSS 样式：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 100px;
  margin: 10px;
  padding: 20px;
  background-color: lightcoral;
}

在这个案例中，.container 使用了 Flexbox 的 flex-wrap: wrap; 属性，使得 .box 元素可以在容器宽度不足以并排显示所有元素时自动换行。每个 .box 有 margin 和 padding，确保了内容的可读性和美观。

通过这些案例，我们可以看到盒模型是如何在实际的网页布局中发挥作用的。无论是创建卡片布局、实现元素的居中，还是设计响应式的流式布局，掌握盒模型都是实现这些布局的关键。练习和实验这些案例，让你更加熟悉盒模型的各个方面，为构建更复杂的布局打下坚实的基础。

1.3 级联、继承和特异性：谁是场上的老大

在 CSS 的世界里，了解级联（Cascading）、继承（Inheritance）和特异性（Specificity）的规则至关重要，因为它们决定了哪些样式将被应用到你的网页元素上。这些规则就像是网页设计的游戏规则，掌握了它们，你就能成为场上的老大。

1.3.1 基础知识

• 级联（Cascading）：CSS 的全称是“Cascading Style Sheets”，其中“Cascading”指的是多个样式表的样式可以叠加应用，而最终样式的决定遵循一定的优先级规则。
• 继承（Inheritance）：某些 CSS 属性会从父元素继承到子元素，例如字体和颜色，这意味着你不需要在每个元素上重复相同的样式声明。
• 特异性（Specificity）：当多条规则应用于同一个元素时，CSS 通过特异性来决定使用哪条规则。特异性是通过计算选择器类型来决定的，通常：内联样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器。

1.3.2 重点案例：个性化按钮样式

假设你在设计一个网站，需要为不同的按钮应用基础样式和个性化样式。

• HTML 结构：

<button class="btn">普通按钮</button>
<button class="btn btn-primary">主要按钮</button>

• CSS 样式：

/* 基础按钮样式 */
.btn {
  padding: 10px 20px;
  border: 1px solid transparent;
  background-color: #f0f0f0;
  color: #333;
}

/* 主要按钮样式 */
.btn-primary {
  background-color: #007bff;
  color: #fff;
}

/* 悬停状态 */
.btn:hover {
  opacity: 0.8;
}

在这个案例中，.btn 和 .btn-primary 类定义了按钮的基础和主要样式。由于 .btn-primary 有更高的特异性（同为类选择器，但它是直接应用于目标元素），它的样式会覆盖 .btn 的同名属性。悬停状态的样式通过伪类 :hover 添加，展示了级联的概念，即后来的规则可以增强或覆盖之前的规则。

1.3.3 拓展案例 1：解决样式冲突

在一个大型项目中，你可能遇到由于不同 CSS 文件中的规则冲突导致的样式问题。

• HTML 结构：

<p class="text-warning">警告信息</p>

• CSS 样式：

/* 来自第一个样式表 */
.text-warning {
  color: yellow;
}

/* 来自第二个样式表 */
.text-warning {
  color: red;
}

为了解决这个冲突，你可以使用特异性原则，通过增加选择器的特异性来确保正确的样式被应用：

body .text-warning {
  color: red;
}

通过前置 body，增加了规则的特异性，确保文本显示为红色。

1.3.4 拓展案例 2：利用继承简化 CSS

设想你需要设置一个页面的基础字体样式，你不想在每个文本元素上重复设置字体样式。

• HTML 结构：

<div class="content">
  <p>这是一段示例文本。</p>
  <p>这是另一段示例文本。</p>
</div>
``

`

- **CSS 样式**：

```css
.content {
  font-family: 'Arial', sans-serif;
  color: #333;
}

在这个案例中，.content 的字体和颜色样式会被它的所有子元素继承，这样你就不需要在每个 <p> 标签上单独设置字体和颜色了，展示了继承的强大用处。

通过这些案例，你可以看到级联、继承和特异性在 CSS 设计中的实际应用。掌握这些概念，可以帮助你更有效地解决样式冲突，优化你的 CSS 代码，并确保你的网页看起来正如你所期望的那样。练习这些案例，让自己成为掌控 CSS 规则的大师。