为 WordPress 学习 CSS 的 10 个简单技巧

学习 CSS 可能会让人不知所措，尤其是当您不知道从哪里开始以及遇到困难时要搜索哪些术语时。

由于 CSS 是一种样式语言，而不是像 Javascript 或 PHP 这样的全功能编程语言，因此它实际上很容易学习，尤其是如果你掌握了一些 HTML 知识（我假设你已经掌握了这篇文章的目的）。

在我们的博客调查中，绝大多数人提到您希望提升自己的游戏水平并更加熟悉 CSS，这就是为什么我们最近发布了超过 150 个学习 CSS 资源的列表，这应该可以帮助您入门，尤其是与这个帖子。

今天，我将向您展示多年前刚开始学习 CSS 时帮助我学习 CSS 的工作流程和技巧。 从技巧一开始，逐步掌握 CSS。

继续阅读，或使用以下链接跳转：

• 基础建设
• 练习简单的选择器和属性
• 记住盒子模型
• 通过实践学习
• 按宽度和高度排列内容
• 浮动和定位
• 高级 CSS
• 使用 CSS 复制网站
• 预处理器
• 构架

一、基础建设

首先要做的事情是：为了学习如何编写自己的 CSS，您需要知道如何正确格式化它。 实际上有两种正确的方法可以做到这一点，但其中一种有助于让你更有条理。

由于 HTML 通常是人们想要使用 WordPress 网站时学习的第一语言，因此通过首先以类似于 HTML 的方式编写 CSS 语法有助于学习 CSS 语法。

这是 CSS 采用的基本结构：

当您不想为站点上的元素实现很多样式时，这很简单，但是当您开始更加熟悉 CSS 时，您将需要的元素不止一种样式，这就是像这样的结构会变得混乱，快速。

这就是为什么有一种更有效和更有条理的方式来编写 CSS 的原因：

现在您可以开始深入研究本示例中使用的术语。 这些术语中的每一个都是 CSS 的基本构建块：类、ID、选择器、属性和值。 属性和值也构成了所谓的声明。

这是学习如何编写自己的 CSS 的一个很好的起点，一旦开始，您可能想知道应该在 WordPress 文件中的何处写下所有这些内容。

在您的 WordPress 安装中，您看到的任何以 .css 是一个 CSS 文件，你可能已经猜到了。 您需要查找的主要文件是您的样式表，它被标记为 样式.css. 这是您的主题设计的大部分或全部内容，包括颜色、字体、基本图像以及可能的一些主题布局。

您可能还会注意到预制主题中的一个文件，名为 自定义.css 这通常是他们希望您对主题进行任何更改的地方。 当您在此文件中进行更改时，它应该覆盖主题样式表中的现有样式。

如果您将插件添加到您的主题中，它们的文件夹中可能还带有 CSS 文件，它们用于设置插件的外观和感觉。

2. 练习简单的选择器和属性

接下来是学习基本的选择器和属性以及它们在主题中的作用。 选择器如 h1, h2 和 h3 对于标题和 p 例如，对于段落文本，以及诸如 font-family 和 background-color.

有一种简单的方法可以练习这些新技能并实际查看您所做的更改，而无需实际创建自己的 WordPress 博客。 W3Schools 有大量关于 CSS 的信息以及可以更改代码的实时示例，只需按一下按钮，您就可以立即看到所做的更改。

当您看到示例时，只需单击 自己试试 按钮并打开一个窗口，您可以在其中测试一些基本的 CSS。

3. 记住盒子模型

我提倡引用最常见的信息，而不是将所有信息都记在心里。 也许是因为我发现我的记忆力很多时候都缺乏，但我更愿意说这是因为网上有很多精彩的参考资料。

您可以在心跳中轻松查找您不知道的选择器和属性。 只需对您最喜欢的搜索引擎（如 Google 或 Bing）进行简单查询，您需要的所有信息只需点击一下即可。

幸运的是，这并不难学，老实说，如果我能记住它，你也不应该有问题。 本质上，它包括内容区域、内边距、边框和边距。

4.边做边学

一旦您开始熟悉 CSS，通过选择具有完全基本设计的主题并通过编辑其样式表来更改其样式来实际将其付诸实践是一个好主意。

重要的是要了解简单的更改有时会对主题产生巨大影响，而有时则影响不大。 最终，尽可能多地练习可以帮助您直观地看到所做的更改，并将您编写代码的操作与最终结果联系起来。

在更宏大的计划中，一旦你能够连接点，你不仅可以快速编写 CSS，而且还应该能够在未来解决问题，这成为网页设计和开发的关键任务。

这里有一些很棒的主题可供练习，您可以免费安装在您的 WordPress 网站上。 并非所有这些都完美地代表了主题的外观和功能，但它们都是学习如何使用简单的 CSS 更改主题的绝佳起点。

白色光谱

White Spektrum 主题是一个简单的主题，具有通用布局，包括主要内容区域、侧边栏、页眉和页脚。

除了字体和链接的颜色飞溅外，这是一个简单易用的主题。

创始人

即使有上述这些极简主义主题，您仍然可能对有多少您还没有认识的东西感到不知所措，这没关系。 当您检查这篇文章的每个部分时，它应该开始更多地融合在一起。

5.按宽高排列内容

一旦您安装了这些主题之一，您还可以通过输入不同长度和宽度的内容区域和选择器来开始更改布局。

这是下一步的前奏，让您熟悉 WordPress 主题中的不同布局区域。

6. 浮动和定位

这是 CSS 会变得有点棘手的地方，因为您可以纯粹使用 CSS 创建布局，特别是浮动和定位。 问题是，这些属性并不是为创建整个布局而设计的，并且有一个草稿来更新 CSS 布局。

目前，这是许多人获取布局的常见方式 正好. 观察已经存在的主题（包括上面的列表）是一个好主意，看看它们在使用浮动和位置方面有何不同。

7. 高级 CSS

至此，你才真正开始掌握 CSS 的窍门，但还有很多东西等着你去发现：

• 伪类 – 用于定义元素的特定状态，例如鼠标悬停和将图像定位在与其他元素相关的特定位置。
• 复杂选择器 – 您可以使用更高级的选择器来获得更具体的样式。
• CSS3 动画 - 当您将鼠标悬停在图像和按钮上时，创建淡入淡出、弹出或其他过渡。
• CSS3 媒体查询的响应性 – 创建响应式主题的最简单方法之一是使用媒体查询。
• 变换 – 控制选定内容区域的大小和形状。
• 规则 - 用于将字体和样式表等内容导入主题。
• 渐变 - 无需使用图像即可为您的主题添加渐变。

这些是您可以真正开始看到主题设计真正成形的许多元素。 这是开始测试您的技能的最佳时机。

8. 使用 CSS 复制网站

有了所有这些知识，您可能需要获得更坚固的腰带，但更重要的是，您可以通过使用主题的基本外壳并从头开始添加自己的 CSS 样式，真正将您的技能付诸实践。

你可以做的最有帮助的事情之一就是在现实世界的应用程序中练习你的知识。 我建议尝试找到一个你喜欢的网站，然后在一个空白的 WordPress 主题上使用 CSS 尽可能地复制它。

当然，您可能无法让一切都完美无缺，而且可能有很多元素您无法仅使用 CSS 来复制，但这是让您熟悉 CSS 的好方法。

以下是您可以使用的一些很棒的免费入门主题：

• 空白板岩

  

  这是最简单的。 此主题中只有 HTML5，因此您可以自由添加 CSS，而不必担心任何样式冲突。 不过，它确实提供了开始设计主题所需的一切。

• HTML5 空白

  

  HTML5 Blank 是一个样板的 WordPress 主题，其中包含一些样式，但并不多。 如果您不太热衷于从头开始编写 CSS，这是一个很好的开始。

• 下划线

  

  如果您有点冒险并想尝试更高级的入门主题，Underscores 是一个很好的选择，但不适合胆小的人，因为它带有两个预加载的主题示例样式。 它还包括一些先进的技术和编码，使其成为一个很好的学习工具。

GitHub 上还有 HTML5 重置 WordPress 主题。 它包括更高级的功能，但这最终使它成为有价值的入门主题。

9. 预处理器

一旦你了解了 CSS 的来龙去脉，学习预处理器，尤其是 SASS 和 LESS 是一个好主意。 这两者都有助于组织您的 CSS，因此它更容易编写并且更易于将来编辑。

预处理器使您的 CSS 干净且易于理解，它已迅速成为 Web 开发人员的一项基本技能。 虽然关于哪个是最好的一直存在争论，但 SASS 往往是迄今为止最常用的预处理器。

如果您想在 WordPress 环境中尝试使用 SASS，请查看 Bones 主题。 它主要由 HTML5 组成，因此您可以尝试使用已包含的内置 SASS 进行样式设置。

10. 框架

在 Web 开发中，框架是用于创建动态网站的结构。 最终，框架的目标是在不丢失功能的情况下使网站更快。

一旦你掌握了 CSS，你就可以通过使用框架来加速你的主题开发。

最流行的框架之一是 Twitter Bootstrap。 它被创建为开箱即用的响应式，并使用 SASS 和 LESS 以及许多自定义 CSS 组件。

包起来

有了学习大纲和帮助你一路走来的技巧，CSS 不应该让你难以掌握。 另外，您现在应该准备好尝试设计自己的 WordPress 主题了。

有关学习 CSS 和 WordPress 的更多资源，请查看我们的其他一些帖子： WordPress 学习和参考 CSS 的超级指南：150 多种资源和从 WordPress 初学者到专业人士：200 多种职业提升资源。

标签：

• CSS