- 步子哥的博客

目标

1. CSS 基础概念（1.5 小时）

1.1 什么是 CSS？

1.2 CSS 核心语法

selector {
  property: value;
}

示例

h1 {
  color: #2c3e50; /* 文字颜色：深蓝灰 */
  font-size: 28px; /* 字体大小：28像素 */
  text-align: center; /* 文字居中 */
}

1.3 常用选择器

1.4 常用属性

1.5 实践任务（30 分钟）

打开任意网页，按 F12 进入开发者工具。
在“样式”面板测试以下 CSS：

``css h1 { color: green; } / 标题变绿 / p { font-size: 18px; } / 段落字体增大 /``

2. CSS 在 WordPress 中的应用（2 小时）

2.1 添加 CSS 的三种方法

子主题（推荐，需文件操作）

- 步骤： 1. 创建子主题（参考 WPBeginner 子主题教程）。 2. 编辑子主题的 style.css 文件，添加自定义 CSS。 3. 确保子主题激活（“外观 > 主题”）。 - 优点：安全，主题更新不丢失样式。 - 示例 style.css： ``css / Theme Name: My Child Theme Template: astra / h1 { color: #2980b9; }``

自定义 CSS 插件（适合初学者）

- 推荐插件：Simple Custom CSS、Insert Headers and Footers。 - 步骤： 1. 安装并激活插件。 2. 在插件界面输入 CSS 代码。 - 优点：无需文件操作，简单快捷。

主题自定义器

- 路径：“外观 > 自定义 > 附加 CSS”。 - 步骤：输入 CSS，实时预览效果，保存发布。 - 优点：内置功能，无需额外安装。

2.2 检查和调试 CSS

工具：浏览器开发者工具（F12）。
步骤：

1. 右键页面元素 > 检查，查看其类或 ID（如 .entry-title）。 2. 在“样式”面板测试 CSS，确认选择器正确。 3. 检查是否有其他 CSS 覆盖（显示为划线样式）。

常见问题：

- 样式不生效：选择器错误或被高优先级 CSS 覆盖。 - 解决：使用更具体的选择器（如 .entry-content h1）或加 !important（如 color: red !important;）。

2.3 实践任务（1 小时）

在 WordPress 安装 Simple Custom CSS 插件。
添加以下 CSS：

```css / 更改文章标题颜色 / h1.entry-title { color: #2c3e50; / 深蓝灰 / font-size: 30px; }

/ 调整按钮样式 / .button, .elementor-button { background-color: #3498db; / 蓝色 / color: white; padding: 12px 20px; border-radius: 4px; } ```

3. 常见 WordPress 样式修改（2 小时）

以下是 WordPress 主题定制的常见任务，包含详细代码和注解：

3.1 修改标题样式

/* 更改所有 h2 标题的样式 */
h2 {
  font-family: 'Arial', sans-serif; /* 字体：Arial 或默认无衬线 */
  font-size: 26px; /* 大小：略小于 h1 */
  color: #e74c3c; /* 红色 */
  margin-bottom: 15px; /* 下边距 */
}

3.2 调整按钮样式

/* 针对按钮类（如 Elementor 或主题按钮） */
a.button, .elementor-button {
  background-color: #f1c40f; /* 黄色 */
  color: white; /* 文字白色 */
  padding: 10px 20px; /* 上下10px，左右20px */
  border-radius: 5px; /* 圆角 */
  text-decoration: none; /* 移除下划线 */
}
a.button:hover {
  background-color: #e67e22; /* 悬停变橙色 */
}

3.3 更改导航菜单样式

/* 调整菜单链接和悬停效果 */
.main-navigation a {
  color: #34495e; /* 深灰色 */
  font-size: 16px;
  padding: 10px;
}
.main-navigation a:hover {
  color: #e67e22; /* 悬停橙色 */
  background-color: #f5f5f5; /* 浅灰背景 */
}

3.4 修改页面布局

/* 调整文章内容宽度和居中 */
.entry-content {
  max-width: 800px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px; /* 内边距 */
}

/* 段落间距 */
.entry-content p {
  margin-bottom: 25px; /* 段落下边距 */
  line-height: 1.6; /* 行高，提升可读性 */
}

3.5 优化移动端显示

/* 针对手机屏幕调整样式 */
@media (max-width: 600px) {
  h1.entry-title {
    font-size: 22px; /* 标题缩小 */
  }
  .entry-content {
    padding: 10px; /* 减少内边距 */
  }
  .button {
    padding: 8px 15px; /* 按钮更小 */
    font-size: 14px;
  }
}

3.6 实践任务（1 小时）

在 WordPress 的“附加 CSS”或 Simple Custom CSS 中添加上述代码（选 2-3 项，如标题和按钮）。
测试修改：

- 更改 h2 颜色为 #27ae60（绿色）。 - 调整按钮 border-radius 为 8px。

4. 实践项目：定制 WordPress 主页样式（1.5 小时）

任务：为 WordPress 主页设计自定义样式，包含标题、按钮、布局和移动端适配。

步骤：

打开 WordPress 网站（本地使用 Local WP 或线上主机）。
安装 Simple Custom CSS 插件或使用“外观 > 自定义 > 附加 CSS”。
使用开发者工具（F12）查找主页元素的类或 ID（如 .entry-title、.button）。
添加以下 CSS：

```css / 主页标题 / h1.entry-title { font-family: 'Helvetica', sans-serif; / 简洁字体 / font-size: 34px; / 大标题 / color: #2980b9; / 深蓝色 / text-align: center; / 居中 / margin: 20px 0; / 上下边距 / }

/ 主页按钮 / a.button, .elementor-button { background-color: #27ae60; / 绿色 / color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; display: inline-block; / 确保按钮宽度适配内容 / } a.button:hover { background-color: #219653; / 悬停深绿 / }

/ 内容区域 / .entry-content { max-width: 900px; / 内容宽度 / margin: 0 auto; / 居中 / padding: 30px; / 内边距 / background-color: #f9f9f9; / 浅灰背景 / }

/ 移动端适配 / @media (max-width: 600px) { h1.entry-title { font-size: 26px; / 标题缩小 / margin: 15px 0; } .entry-content { padding: 15px; / 减少内边距 / } a.button, .elementor-button { padding: 10px 20px; / 按钮稍小 / font-size: 15px; } } ```

保存并刷新主页，检查效果。
个性化调整：

- 更改标题颜色（如 #e74c3c）。 - 增加按钮阴影：box-shadow: 0 2px 5px rgba(0,0,0,0.2);。

预期成果：

5. 资源与进阶路径（1 小时）

5.1 免费学习资源

5.2 进阶学习建议

Flexbox 和 Grid：学习现代布局技术，设计复杂页面。

- 资源：CSS-Tricks Flexbox 指南（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。

CSS 动画：添加交互效果，如按钮渐变、标题淡入。

- 示例： ``css .button { transition: background-color 0.3s; } .button:hover { background-color: #e67e22; }``

主题开发：结合子主题和 PHP，深入定制 WordPress。

- 资源：WordPress 开发者手册（https://developer.wordpress.org/themes/）。

5.3 推荐工具

浏览器：Chrome 或 Firefox 开发者工具（F12，调试 CSS）。
代码编辑器：VS Code（免费，适合编辑子主题 style.css）。
插件：

- Simple Custom CSS（免费，快速添加样式）。 - CSS Hero（付费，图形化编辑 CSS）。

教程特点

学习建议

实践优先：每学完一节，在 WordPress 测试代码，记录效果。
调试技巧：用开发者工具验证选择器，解决样式冲突。
时间安排：

- 第 1 天：基础概念 + 实践（1.5 小时）。 - 第 2 天：WordPress 应用 + 调试（2 小时）。 - 第 3 天：常见修改 + 项目（3.5 小时）。 - 第 4 天：资源学习 + 个性化调整（1 小时）。