是否想尝试编辑WordPress CSS，但不知道从哪里开始？使用CSS样式，您可以全局或在某些页面上编辑网站的外观。添加颜色，隔开某些元素，设计布局，并基本上完全改变WordPress主题中的内容。

如果您想更熟悉WordPress的开发环境，或者只是更好地控制网站的外观，则需要知道如何在WordPress中添加CSS（以及如何更改已经存在的内容）。

通过编辑主题并包括自己的其他CSS，您将可以优化网站上的每个视觉元素。今天，我们将仔细研究它。

准备开始？我们开始做吧！

什么是CSS编辑？

CSS代表级联样式表，是除CSS之外最受欢迎的网络语言 的HTML。他们两个齐头并进 CSS用于设置HTML元素的样式。 HTML奠定了网站外观的基础，而CSS用于进一步设计网站样式。

CSS使您能够 使网站响应，添加颜色， 更改字体，修改布局，并通常对网站的视觉效果进行微调。像HTML和JavaScript一样，CSS是前端客户端语言，这意味着它在用户端而不是后端服务器上执行。

在深入研究WordPress开发时，HTML，CSS，JavaScript和 的PHP 是您需要了解的语言。这就是核心 不育系 是内置的 许多主题 和 外挂程式.

但是即使你不是一个 网页设计者 要么 开发商，最好选择一些CSS，因为您可以使用它来移动或设置网站上的元素的样式，或者对主题进行细微的美学更改以更好地适合您。

/ *点击鸣叫* /
正文a.novashare-ctt {
显示：块；
背景：#00abf0;
边距：30px自动;
填充：20px 20px 20px 15px;
颜色：#ffffff;
文字修饰：无！重要；
box-shadow：无！重要；
-webkit-box-shadow：无！重要；
-moz-box-shadow：无！重要；
边框：无；
左边框：5px实心#00abf0;
}
正文a.novashare-ctt：hover {
颜色：#ffffff;
左边框：5px实心#008cc4;
}
正文a.novashare-ctt：visited {
颜色：#ffffff;
}
正文a.novashare-ctt * {
指针事件：无；
}
正文a.novashare-ctt .novashare-ctt-tweet {
显示：块；
font-size：18px;
行高：27px；
底边距：10px;
}
正文a.novashare-ctt .novashare-ctt-cta-container {
显示：块；
溢出：隐藏；
}
正文a.novashare-ctt .novashare-ctt-cta {
浮动：正确；
}
正文a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
向左飘浮;
}
正文a.novashare-ctt .novashare-ctt-cta-text {
font-size：16px;
行高：16px；
垂直对齐：中间；
}
正文a.novashare-ctt .novashare-ctt-cta-icon {
左边距：10px;
显示：inline-block;
垂直对齐：中间；
}
正文a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直对齐：中间；
高度：18px；
}
/ *简单+简单备用主题* /
正文a.novashare-ctt.novashare-ctt-simple {
背景：无；
填充：10px 0px 10px 20px;
颜色：初始；
}
正文a.novashare-ctt.novashare-ctt-simple-alt {
背景：#f9f9f9;
填充：20px;
颜色：初始；
}
正文a.novashare-ctt.novashare-ctt-simple：hover，正文a.novashare-ctt.novashare-ctt-simple-alt：hover {
左边框：5px实心#008cc4;
}
正文a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta，正文a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
颜色：#00abf0;
}
正文a.novashare-ctt.novashare-ctt-simple：hover .novashare-ctt-cta，正文a.novashare-ctt.novashare-ctt-simple-alt：hover .novashare-ctt-cta {
颜色：#008cc4;
}

WordPress和CSS

在WordPress中，CSS有点不同。它的 由主题控制，由模板文件，模板标记以及CSS样式表组成。尽管这些都是由您的主题生成的，但是所有这些都可以由您编辑。

模板文件 将网站的各个部分分成几个部分（例如header.php或archive.php），以及 模板标签 用于调用它们以及数据库中的其他内容。这些文件实际上主要由PHP和HTML组成，尽管您可以根据需要添加CSS。

您真正要寻找的是 样式表或style.css。要更改网站的外观，您需要学习 如何添加和编辑代码 在此文件中。

如何使用CSS自定义您的WordPress主题

如果你想 自定义您的主题 并使用CSS更改网站的外观，则需要添加自己的代码或编辑已有的代码。有多种方法可以添加CSS，而无需触摸任何主题文件，但是要更改现有的主题代码，您将必须访问网站的样式表。

进行这些更改时，您应该了解一件事：什么时候 您的主题更新，您所做的任何修改 style.css, functions.php，否则其他主题模板文件将被删除。一般而言，如果您不使用编辑器，则不应在编辑器中直接更改网站。 儿童主题.

样式表就像您网站的“说明列表”一样，准确设置样式和设置CSS代码的方式。这是您进行大部分编辑的地方，但我们还将向您展示如何访问其他主题模板文件，例如 header.php和footer.php.

有两种访问WordPress网站样式表的方法：通过 WordPress仪表板 或通过 FTP客户端。我们将同时介绍它们。

自己这样做不舒服吗？考虑 聘请WordPress开发人员 为您处理这一步骤。

在资讯主页中编辑WordPress CSS

访问CSS样式表的最简单，最方便的方法就是在WordPress仪表板中。无需安装FTP程序或 代码编辑器。您可以使用内置的语法突出显示和功能文档直接编辑任何文件。

在对核心文件进行任何重大编辑之前，您应该始终 备份您的WordPress网站。如果您是CSS的新手，很容易不小心犯一个会破坏您网站外观的错误，并且很难弄清楚如何还原所做的更改。

制作完备份和子主题后，登录到后端。您可以通过以下方法找到编辑器： 外观>主题编辑器.

您应该看到一个弹出窗口，警告您不要直接编辑这些文件。不用担心，只需单击“我了解”。进行任何重大更改之前，请先使用子主题并备份网站，这只是警告。遵循这些步骤，可以安全地进行编辑。

现在您进入了！默认情况下，您应该在样式表上，但如果没有，请查看右侧的菜单以查看主题文件。

除了style.css，您还可以访问模板文件，例如functions.php，header.php和single.php。所有这些都会影响您网站上某些页面的行为。

但是你应该 熟悉PHP 在深入研究这些特定文件之前。

请记住：您在此处所做的大多数CSS更改都是全局的。例如，如果将H1标头更改为某种字体，则它将对网站上的每个页面生效。您将需要使用特殊的语法来自定义特定页面的样式。

直接编辑主题文件

如果您无法访问主题编辑器或更喜欢通过FTP进行工作该怎么办？使用后端编辑器更容易，但是某些主题或插件可能会禁用它。如果是这样，您需要 通过FTP连接到您的网站.

的FTP或文件传输协议，可让您远程访问和修改网站的文件。您需要做的第一件事是 下载FileZilla 或任何其他FTP客户端。

接下来，您应该联系您的主机并询问您的FTP凭据（主机，端口和用户名/密码（如果适用））。如果主机具有仪表板，则可以通过登录找到它们。

Kinsta用户的凭据位于 MyKinsta仪表板 下 站点> SFTP / SSH.

拥有它们后，启动FTP客户端并输入该信息。如果不起作用，请尝试在网址中的网址前添加“ sftp：//” 主办 部分。

进入后，您可以通过单击 wp内容 文件夹将其打开，然后打开主题的文件夹（例如 Ť高二十 主题），然后滚动直到看到style.css。

双击将其打开（或右键单击并选择 查看/编辑）并进行修改。记住要保存并上传回服务器。

如果您需要编辑其他 模板文件 像home.php，single.php，archive.php，您可以在style.css所在的文件夹中找到它们。

编辑主题文件，无论是通过FTP还是仪表板，都并非总是必需的。实际上，如果只添加一些额外的代码，最好避免这样做。

对于少量添加，这是将CSS添加到WordPress网站的最佳方法。

如何在WordPress中添加自定义CSS

如果您不想编辑现有的CSS代码，而只想添加自己的样式，则强烈建议您使用以下方法之一：WordPress定制程序或专用插件。

首先，通过这些方法之一添加的CSS代码更容易访问和使用。如果您以后要进行修改，则无需担心将新CSS放在错误的位置或忘记添加位置。

另外，通过这些方法之一添加的CSS不会在主题更新时丢失（尽管如果您更新主题，它可能仍会消失） 改变主题).

这意味着您不需要使用子主题，并且如果出现问题，只需删除刚刚添加的CSS。

请注意，您仍然应该 保留您网站的备份，因为有些人报告说在重大更新期间偶尔会丢失CSS。不过，此方法比直接编辑主题文件可靠得多。

虽然您可以只是将代码添加到style.css并每天调用它，如果您不想 创建一个子主题，对主题中的现有CSS进行重大修改，并可能最终删除所有工作，因此最好使用WordPress定制程序中的“其他CSS”选项或安装插件。

1.通过WordPress Customizer编辑CSS

而不是使用主题编辑器，请尝试此。 登录到您的WordPress后端 然后点击 外观>定制 打开主题自定义屏幕。您将看到网站的实时预览，左侧选项用于自定义元素，例如颜色，菜单或其他 小部件.

在此菜单的最底部，您应该找到 额外的CSS 框。

单击以打开它。您将进入一个带有代码输入框和一些说明的新屏幕。附加CSS屏幕包括与主题编辑器一样的语法突出显示，以及使您知道代码是否错误的验证。

您编写的任何代码都会自动显示在右侧的预览区域中，除非出现错误（尽管您仍然可以选择将其发布）。

完成工作后，您可以发布代码，安排代码生效的时间，或将其另存为草稿以备后用。您甚至可以获取预览链接以与他人共享。

如您所见，“附加CSS”页面在许多方面都比“主题编辑器”更强大，并且比添加核心文件更适合添加代码。

您在此处编写的CSS代码会覆盖主题的默认样式，并且在主题更新时不会消失。如果您无法在预览中实时看到它，请仔细检查您是否在CSS代码中使用了正确的选择器。

就像主题编辑器一样，默认情况下CSS是全局的，但是您可以编写代码 定位到特定页面.

一个缺点是， 你应该换主题吗，您编写的所有内容都会被删除。在转移到新主题之前，请确保备份CSS，否则可能会丢失很多工作。

如果您正在努力使用此选项，或者想要一个可跨主题使用并且可以更轻松地定位特定页面的解决方案，则应尝试使用插件。

2.使用插件将自定义CSS添加到WordPress

您可能有几个原因想要使用插件将CSS添加到WordPress。尽管该功能类似于“其他CSS”菜单，但即使您切换/更新主题，样式通常也会保持不变。

您可能还会更喜欢他们的UI，或者喜欢自动完成等额外功能。有些插件甚至可以让您通过构建CSS 下拉菜单，而不必自己编写。

简单的自定义CSS

简单的自定义CSS 由于易于使用，最小的界面和轻巧的后端，因此是最受欢迎的CSS编辑器插件。简而言之，这是一个很小的WordPress插件，具有很大的优势。

设置轻而易举，您不会看到 对性能的负面影响。它适用于任何主题，并包括语法突出显示和错误检查。

简单的自定义CSS和JS

简单的自定义CSS和JS 是一个很好的选择。它还使您可以定位页眉，页脚，前端，甚至管理后端。

SiteOrigin CSS

SiteOrigin CSS 是另一个选项，还包括传统的CSS编辑器。您可以在它和 视觉编辑器 随时。

WP添加自定义CSS

如果您想将CSS添加到特定页面， WP添加自定义CSS 在编辑屏幕上添加了一个自定义CSS框，还提供了全局样式。

CSS英雄

您可能还需要考虑尝试使用可视CSS编辑器。这些将所有复杂的编码转换成一系列易于使用的输入字段和下拉菜单，这些菜单将为您处理所有编程。

CSS英雄 是一款高级视觉编辑插件，具有一些非常强大的功能（动画，特定于设备的编辑以及无损编辑等）。

在哪里学习CSS

准备好亲自学习CSS了吗？这些初学者教程将建立基础知识，并教您编写自己的功能CSS代码所需的语法。

这可能令人生畏，但是除非您尝试做一些真正高级的事情，否则CSS并不难！简单的事情，例如更改背景颜色或 设置字体样式 非常简单，并且在线上有很多示例。

（建议阅读： 在WordPress网站上使用50多种现代字体)

最 编程教程 您也会在互联网上发现完全免费。有 那里有很多信息 不收取任何费用。

以下是一些涵盖初学者最佳CSS教程的示例。

• W3Schools CSS教程：这里有大量信息：深入的教程，示例和参考供您使用。 W3Schools的教程尽可能简单易懂，因此，即使您是一个初学者，这也是一个很好的起点。
• Codeacademy学习CSS：通过六个免费的实践课程，您将学习CSS的基础知识。这不是简单的视频教程，而是一个交互式课程，可让您使用实际代码。使用专业版，您还将获得测验和自由格式项目。
• 一小时学习CSS：很多人想学习新 程式语言，但他们没有时间奉献。但是，如果您仅能预留一个小时的时间，则可以通过此20部分免费课程学习CSS。即使您最终不是一个大师，您也应该对基础有所了解。
• WordPress用户基本HTML和CSS简介：正在寻找特定于WordPress的内容？如果您一直在努力编写HTML和CSS，那么本课程非常适合您。它是付费的，但附带52个讲座和五个小时的视频供您学习。

概要

作为WordPress用户，起初加入CSS可能会造成混淆。但是，一旦您知道如何编辑主题文件以及在何处添加样式，就不会再有麻烦了。

可以从后端或通过FTP编辑主题文件以更改站点的外观，但是通常应避免这种情况，除非您需要编辑现有代码。

如果您只想添加自己的CSS，请使用“ 外观>定制，如果您需要更强大的功能，请尝试使用插件。

编辑到样式表 除非您使用 儿童主题。 对于其他CSS，情况并非如此。您的代码可以安全地进行更新，但是请不要忘记：当您执行以下操作时，只有插件会保留CSS 改变主题.

无论选择哪种方法，都应始终保持 网站的常规备份，包括您添加的样式表和自定义代码。现在是时候使用我们提供的资源来复习CSS基础。

造型愉快！

建议阅读： 网上最佳网页设计课程