什么是 CSS？ 以及何时将其与 WordPress 一起使用
借助 WordPress 等内容管理系统，如今构建网站非常容易。 你甚至不需要学习编程。 只需安装 WordPress 主题并自定义您的网站，直到您放弃。
许多人不知道，开发人员编写了大量的 HTML、CSS、PHP 和 JavaScript 代码来创建您最喜欢的 WordPress 主题。
以下是 HTML、CSS、PHP 和 JavaScript 的含义：
- HTML是超文本标记语言的缩写，提供网页的结构。 它定义了您在页面上看到的所有元素，如标题、段落、菜单等。 它是标准标记语言，为网页提供构建块。
- CSS 是层叠样式表的缩写。 CSS 是网页设计师用来设置网页样式的语言。 它控制网页的颜色、字体样式、背景、列大小、响应能力和所有其他样式。 如果没有 CSS，网页将变得乏味且难以阅读。
- PHP 是超文本预处理器的递归首字母缩写词。 PHP 是一种在服务器上执行的脚本语言。 它用于开发静态网站、动态网站和 Web 应用程序。 所有 WordPress 网站都严重依赖 PHP 来编译从数据库中提取的动态内容。 PHP 的一个很好的例子是在 WooCommerce 上运行的电子商务网站。
- JavaScript，通常缩写为 JS，是一种客户端和服务器端脚本语言，可帮助您使网页具有交互性。
在今天的文章中，我们将重点介绍 CSS。 要充分利用本指南，了解一点 HTML 很重要。 这是因为，正如我们之前所说，CSS 用于设置 HTML 文档的样式。
对于本指南的大部分内容，我将使用以下 HTML 文档：
<html> <head> <title>What is CSS?</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
如果没有 CSS，上面的 HTML 文档在浏览器中看起来像这样：
不漂亮，但上面的模板可以让我们演示 CSS 是如何工作的。 出于实验目的，请随意复制上述虚拟代码。
事不宜迟，让我们开始谈正事，因为要讲的内容很多。
什么是 CSS？
那么，什么是 CSS？ 级联样式表 (CSS) 是 造型 语言（不要与 标记 语言，例如 HTML 或 脚本 语言（例如 PHP）允许网页设计者和开发者控制网页的外观。
根据流行的网络开发网站 w3schools.com“CSS 用于定义网页样式，包括设计、布局以及针对不同设备和屏幕尺寸的显示变化。”
如果您打算从头开始开发网站或潜入引擎盖以对您的 WordPress 网站进行样式自定义，这是一门重要的学习语言。 通过一些 CSS 技巧，您可以更改您的网站在多个设备上的外观。
但这还不是全部。 随着时间的推移，CSS 有了显着改进，现在允许您添加交互性，甚至可以创建动画，例如 动画风格 网站。 Chris Coyier 还创造了一堆有趣的 CSS-Tricks.com 上的 CSS 动画,
如果没有 CSS，网页将是令人眼花缭乱的。 例如，下面是我们主页的一部分在 CSS 中的外观：
一切都干净，漂亮，漂亮，对吧？ 以下是没有 CSS 的相同部分的外观：
哦，天哪，不是一个漂亮的景象。 女士们先生们，这就是 CSS 如此重要的原因。 说到网页， 演示就是一切。
CSS 由 Hakon Wium Lie 于 1994 年发明，由名为 CSS工作组.
但是，它是如何工作的？
要使用 CSS 设置页面样式，您必须首先了解 CSS 语法。 这并不复杂，所以不用担心。 为了帮助澄清问题，这里有一个 CSS 示例：
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
从上面的例子可以看出，CSS 有几个部分。
- 身体, h1， 和 p 被称为 选择器，它们可以帮助您定位 HTML 文档中的特定元素。 例如，上面的选择器允许我们定位 HTML 文档中的正文部分、标题和段落。
- 背景颜色, 颜色, 文本对齐, 字体系列， 和 字体大小 被称为 特性.
- 浅蓝色, 中央, 维达纳， 和 20像素 被称为 价值观. 您将值附加到属性，然后将值传递给相关的 HTML 元素。 在上面的示例中，正文部分将具有浅蓝色背景，标题将是白色并位于页面中心，段落将使用 Verdana 字体。
你知道，是这样的：
上面的 CSS 代码是 CSS 的一个基本示例。 复杂的 CSS 超出了今天这篇文章的范围，但不用担心，因为我们会在最后添加一些资源。
如何在 HTML 中添加 CSS
将 CSS 添加到 HTML 文档是一件相对简单的事情。 您可以通过三种不同的方式将 CSS 添加到 HTML 文档中。
外部 CSS
在 Web 开发中，最好将 HTML 和 CSS 代码保存在单独的文件中。 然后，您可以使用链接到 CSS 文件 <链接> 您放置在 <头部> HTML 文档的一部分。
首先，您需要为您的 CSS 代码创建一个 CSS 文件。 CSS 文件通常以 .css 扩展名结尾。 我的是 style.css，我将它保存在与 HTML 文档相同的文件夹中。
其次，添加 <链接> 元素到 <头部> 您的 HTML 文档的部分，如下所示：
<html> <head> <title>What is CSS?</title> <link rel="stylesheet" href="https://www.wpexplorer.com/what-is-css/style.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
就像 A、B、C 一样简单。当您在浏览器中加载网页时，它会获取 CSS 文件和样式“……根据样式表中的信息的 HTML 文档”。
使用外部 CSS 文件是实现 CSS 的最佳方式。
内部 CSS
如果您想为单个网页添加独特的样式，例如您正在创建一个简单的单页网站，您可以选择使用内部样式表。
你在里面添加一个内部样式表 <风格> 里面的元素 <头部> HTML 文档的部分，如下所示：
<html>
<head>
<title>What is CSS?</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
由于 CSS 代码在您的 HTML 文档中，它通常会导致更大的网页，尤其是在您有大量 CSS 代码的情况下。
内联 CSS
内联 CSS 通过添加 <风格> 属性到该特定元素，如下所示：
<html> <head> <title>What is CSS?</title> </head> <body style="background-color: lightblue;"> <h1 style="color: white; text-align: center;">This is a Heading</h1> <p style="font-family: verdana; font-size: 20px;">This is a paragraph.</p> <p style="font-family: verdana; font-size: 20px;">This is another paragraph.</p> </body> </html>
W3C 的人不建议使用上述方法来实现 CSS，因为它不 创建“干净”的代码. 这也是多余和耗时的。 就像内部 CSS 一样，它会导致更大的 HTML 文件。
您现在知道 CSS 是什么以及如何在您的网站上实现它。 如果您使用的是 WordPress，则可以通过导航到访问主题的 CSS 文件 外观 > 主题编辑器， 如下所示：
这样做会直接将您带到主题的样式表：
WordPress 不推荐上述方法，因为您可以在实时定制器中提供的内置 CSS 编辑器中编辑和预览 CSS 更改。
要访问内置的 CSS 编辑器，请导航至 外观 > 自定义，正如我们在下面强调的那样：
之后，找到并单击 附加 CSS 在左侧边栏上，如下图所示。
或者，您可以通过单击访问内置的 CSS 编辑器 自定义 CSS 在 WordPress 管理仪表板的顶部，如下面的屏幕截图所示。
单击上面的菜单项将引导您进入以下 CSS 编辑器：
专家提示： 在修改主题文件（包括样式表）之前，请始终使用子主题并始终创建备份。 这样，您仍然可以毫无问题地更新您的主题，并且不会丢失您所做的所有自定义编码编辑。
何时使用 CSS
有几种使用 CSS 的方法，我们在整篇文章中都提到了一些。 如果您使用 WordPress 主题或页面构建器，您可能不会做很多直接的 CSS 自定义。 大多数 WordPress 主题和页面构建器允许您在不编写任何 CSS 代码的情况下自定义您的网站。
这里有几种使用 CSS 的方法。
CSS 响应式网页设计 (RWD)
响应式设计使您的网站看起来很棒，并且在所有设备上都能正常工作，无论屏幕大小如何。 随着越来越多的人使用各种设备上网，您不能忽视响应式设计的价值。
如果您正在创建响应式网站，CSS 是一个重要的组成部分。 如果您希望将旧网站重新用于更新设备，CSS 为您提供了许多响应式设计技术来实现这一目标。
您可以使用 CSS 来实现响应式视口、网格视图、媒体查询、图像和视频。 您的网站将在多种设备上看起来不错，从而提高参与度和转化率。
造型
CSS 是一种样式语言，非常适合您需要为网站制作的所有自定义样式。 如果您无法通过实时定制器或主题面板/设置更改网站的特定部分，您可以随时使用自定义 CSS。
CSS 允许您自定义网站上的各种内容，包括排版（包括实现 Web 字体）、背景颜色或图像、颜色、图像、纹理、图标、边距、边框、按钮以及几乎所有您想到的东西。
创建一致的跨浏览器体验
如果您从头开始创建 HTML + CSS 网站，那么迟早您会体验到跨浏览器的兼容性。 那是因为每个浏览器对 HTML 规范的解释略有不同。
这就是为什么不同的浏览器会以不同的方式呈现相同的代码。 没错，当您在 Mozilla Firefox 和 Microsoft Edge 中渲染相同的代码时，您会注意到细微的（而不是那么细微的）差异。
为了消除这些跨浏览器兼容性问题，您可以使用一个免费提供的 CSS 文件，名为 规范化.css 由谷歌的好人. 实施 规范化.css，只需将以下行添加到您的 <头部> 部分，就像我们之前所做的那样：
<link rel="stylesheet" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css" />
就是这样，CSS 将启动并解决跨浏览器兼容性问题。
创建 CSS 动画
过去，您必须依赖 JavaScript 或 Flash 来创建动画。 但最近随着 CSS 动画和过渡的引入，这种情况发生了变化。
请注意，实现 CSS 动画和过渡需要高级的 CSS 知识。 尽管如此，只要您付出必要的努力，它就很容易学习。
您可以通过多种方式在您的网站上使用动画和过渡。 最好的例子是增加旨在提高用户参与度的交互性。
CSS 资源
如果您想了解有关 CSS 及其应用程序的更多信息，我们整理了一份来自网络的最佳资源列表：
CSS 一开始似乎很难破解，但它是您将学习的最简单的语言之一。 它并不复杂，因为它不是 C# 或 PHP 等编程语言。
它只是为您的网页添加颜色和样式的一组规则。 如果我们没有 CSS，那么大多数（如果没有的话）所有网站都会看起来很糟糕。 它们也很难设计甚至使用，因为 CSS 不仅改善了网站的外观，而且改善了可用性。
通过大量免费的在线教程，只要您付出必要的努力，学习和掌握 CSS 就很容易。 此外，花时间访问练习站点或创建测试站点。
你是如何使用 CSS 的？ 请在评论中告诉我们。
