为 WordPress 用户提供的 17 个节省时间的 CSS 技巧

已发表: 2023-03-13

WordPress 为设计和定制网站提供了无限的可能性。在本文中，我们将专门为 WordPress 用户分享一些实用的 CSS 技巧，从设计标题样式到调整字体。

虽然 WordPress 提供了大量预制主题和模板，但有时您需要亲自处理并使用 CSS 进行自定义。

如果您在使用 WordPress 网站时曾问过以下任何问题：

“如何删除‘阅读更多’按钮？”
“我怎样才能改变这个链接的颜色？”
“如何使该链接不可点击，但将文本保留在页面上？”

...然后继续阅读，了解一些对您的网站有价值的 CSS 技巧。

在本教程中，我们将介绍：

WordPress CSS 技巧
1. 将元素水平和垂直居中
2. 更改链接颜色
3. 删除链接
4. 禁用链接（链接保持可见，但用户无法单击它）
5. 更改悬停时链接的颜色
6. 样式链接
7. 设置按钮样式
8. 更改部分的字体
9. 创建粘性标题
10. 创建具有阴影效果的粘性标题
11. 向部分添加背景颜色
12. 更改正文的背景颜色
13. 更改特定单词或短语的颜色
14. 在图像周围创建边框
15. 在图像上创建悬停效果
16. 设计表单样式
17. 创建响应式布局
将您的 CSS 技能提升到新的水平

WordPress CSS 技巧

要实施这些技巧，您只需了解两件事：

CSS 的工作原理
如何向 WordPress 添加 CSS

注意：CSS 没有风险，所以如果你犯了一个错误，你可以删除你的代码或修改它......它不会破坏任何东西:)

抛开这些，让我们直接跳到一些实用的 CSS 技巧和示例，以便您可以在自己的 WordPress 网站上尝试：

将元素水平和垂直居中

要使元素（例如图像、文本或 div）水平和垂直居中，请使用以下 CSS 代码：

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在此代码中， position: relative属性用于相对于其最近的定位祖先来定位元素。 top: 50%和left: 50%属性将元素移动到其容器的中心。最后， transform: translate(-50%, -50%)属性通过将元素向后移动其自身宽度和高度的 50% 来使元素在水平和垂直方向上居中。

更改链接颜色

.item-class{
color : blue;
}

您可以使用白色、黑色、蓝色、红色等颜色……但您可能想使用特定的颜色。

在这种情况下，你可以这样做：

.item-class{
color : #F7F7F7;
}

如果您想为您的网站设计创建调色板，请尝试使用 Paletton 工具。这非常有帮助！

注意：如果你想组合元素，这很容易。

例如，假设您想要禁用点击并将链接恢复为黑色。

您可以使用此代码：

.item-class{
pointer-events : none;
color : black;
}

删除链接

.item-class{
display : none;
}

注意：有时您可能需要在类后面添加a才能使其正常工作，如下所示：

.item-class a{
display : none;
}

尝试添加a或不加 a 进行试验，看看您的代码是否正常工作。只需添加您的 CSS，保存并检查您的前端。

禁用链接（链接保持可见，但用户无法单击它）

注意：为了做到这一点，修改 HTML 总是更好，但如果 CSS 可能更容易或者是唯一可能的解决方案，请使用以下代码：

.item-class{
pointer-events: none;
}

更改悬停时链接的颜色

您可以使用以下 CSS 代码使链接在用户将鼠标悬停在链接上时改变颜色：


a:hover {
color: red;
}

在此代码中， a:hover选择器定位用户当前悬停在页面上的所有链接。 color: red属性将文本的颜色更改为红色。

样式链接

要设置网站上链接的样式，请使用以下 CSS 代码：


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

在此代码中， a器用于设置页面上所有链接的样式。 color属性设置链接的颜色， text-decoration属性删除默认下划线。 border-bottom属性添加了微妙的下划线效果。当用户将鼠标悬停在链接上时， transition属性会创建平滑的过渡效果。 a:hover选择器用于当用户将鼠标悬停在链接上时设置链接的样式。

设置按钮样式

使用以下代码设置按钮样式：


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

在此代码中，使用各种属性来设置按钮的样式，包括按钮外观的background-color和color属性、按钮大小的padding属性以及将cursor悬停在按钮上时更改鼠标指针的光标属性。

更改部分的字体

使用以下 CSS 代码更改网站某个部分的字体：


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

在此代码中， font-family属性将字体设置为 Arial 或类似的无衬线字体， font-size属性将字体大小设置为 16 像素， line-height属性将文本行之间的间距设置为 1.5倍于字体大小。

创建粘性标题

如果您想创建一个当用户滚动时保持固定在页面顶部的标题，您可以使用以下 CSS 代码：


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

在此代码中， position: fixed属性将标题固定在视口的顶部， top: 0属性将其定位在页面的最顶部。 width: 100%属性确保标题跨越视口的整个宽度。 background-color 、 color用于设置标题的样式， z-index: 9999属性确保标题出现在页面上所有其他元素的顶部。

创建具有阴影效果的粘性标题

要创建具有阴影效果的粘性标题，并在用户滚动时固定在页面顶部，请使用以下 CSS 代码：


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

在此代码中， position: fixed属性用于将标题固定到页面顶部。 top: 0和left: 0属性将标题定位在页面的左上角。 width: 100%属性将页眉的宽度设置为页面的完整宽度。 background-color属性设置标题的背景颜色， z-index属性确保标题出现在页面上其他元素的顶部。最后， box-shadow属性为标题添加了微妙的阴影效果。 .content选择器用于向页面顶部添加填充，以便内容不会被固定标题覆盖。

免费电子书

您通往盈利的网络开发业务的分步路线图。从吸引更多客户到疯狂扩张。

免费电子书

顺利规划、构建和启动您的下一个 WP 网站。我们的清单使该过程变得简单且可重复。

向部分添加背景颜色

您想为网站的某个部分添加背景颜色吗？然后使用以下 CSS 代码：


.section {
background-color: #f2f2f2;
padding: 20px;
}

在此代码中， background-color: #f2f2f2属性将背景颜色设置为浅灰色，而padding: 20px属性在该部分内的内容周围添加 20 像素的空间。

更改正文的背景颜色

添加此代码以更改网站正文的背景颜色：


body {
background-color: #f5f5f5;
}

在此代码中， background-color属性将背景颜色设置为浅灰色。

更改特定单词或短语的颜色

要更改文本块中特定单词或短语的颜色，可以使用以下 CSS 代码：


p span {
color: red;
}

在此代码中， p span选择器针对出现在p元素中的任何span元素。然后，您可以在 HTML 中使用span元素包装您想要定位的单词或短语，如下所示：

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

这将使短语“consectetur adipiscing elit”显示为红色。

在图像周围创建边框

以下是如何在图像周围添加边框：


img {
border: 2px solid #ccc;
}

在此代码中， border属性设置边框的宽度、样式和颜色。 2px值将边框宽度设置为 2 像素， solid将样式设置为实线， #ccc将颜色设置为浅灰色。

在图像上创建悬停效果

使用此代码片段在图像上创建悬停效果：


img:hover {
opacity: 0.8;
}

在此代码中，当用户将鼠标悬停在图像上时， img:hover选择器会定位图像。 opacity属性设置图像的透明度。在本例中，该值设置为 0.8，当用户将鼠标悬停在图像上时，图像会稍微透明。

设计表单样式

使用以下 CSS 代码在您的网站上设置表单样式：


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

在此代码中，各种属性用于设置表单的样式，包括用于表单整体外观的background-color 、 padding和border-radius属性。 form label选择器用于设置与每个表单字段关联的标签的样式。 form input[type="text"], form input[type="email"], form textarea选择器用于设置表单中各个输入字段的样式。 form input[type="submit"]选择器用于设置提交按钮的样式。

创建响应式布局

如果您想创建适应不同屏幕尺寸的响应式布局，请使用以下 CSS 代码：


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

在这段代码中， @media规则用于为不同的屏幕尺寸指定不同的样式。第一个@media规则针对最大宽度为 768px 的屏幕，第二个@media规则针对最小宽度为 769px 的屏幕。每个@media规则中的各种选择器用于根据屏幕尺寸调整页面的布局和外观。

还有一个 CSS 技巧……

即使您正确执行了所有操作，您也可能会发现您的代码无法正常工作。这可能是因为已经有一个 CSS 代码与您的代码有所不同。

要覆盖它，只需添加!important即可，如下所示：

.item-class{
pointer-events: none !important;
}

这些只是使用 CSS 增强 WordPress 网站的实用方法的几个示例。

借助 CSS，自定义网站外观的可能性几乎是无限的。通过学习和应用这些技巧，您可以创建一个不仅具有视觉吸引力，而且还经过优化以获得更好的用户体验的网站。

将您的 CSS 技能提升到新的水平

无论您是初学者还是经验丰富的专业 Web 开发人员或 Web 设计师，如果您想更深入地了解在 WordPress 中使用 CSS，这些额外的 CSS 教程将帮助您扩展您的知识和技能：

学习 WordPress CSS 的 10 个简单技巧 – 为想要学习专门用于 WordPress 的 CSS 的初学者提供的实用技巧。它涵盖了从理解 CSS 语法到使用 CSS 框架的所有内容。
学习和引用 WordPress 的 CSS – 学习和引用专门用于 WordPress 的 CSS 的综合指南。它涵盖的主题包括使用 WordPress 定制器、了解 CSS 选择器以及使用子主题。
7 个寻找 CSS 片段和灵感的最佳网站 – 正在寻找 CSS 代码的灵感吗？本文列出了七个提供可在您自己的 WordPress 网站中使用的 CSS 片段和示例的网站。
如何使用 CSS 在 WordPress 网站上设置图像样式 – 图像是任何网站的重要组成部分，本文提供了有关如何使用 CSS 设置图像样式的提示。您将学习如何添加边框、更改图像大小和对齐方式等等。
如何将自定义 CSS 添加到您的 WordPress 网站 – 本文将引导您完成使用内置定制器和插件将自定义 CSS 添加到您的 WordPress 网站的过程。
用于实时编辑 WordPress 网站的免费 CSS 插件 – 本文列出了一些免费的 CSS 插件，可让您实时编辑 WordPress 网站，从而更轻松地实时查看 CSS 更改的效果。
14 个适用于 WordPress 的酷 CSS 动画工具 – 如果您想使用 CSS 添加一些动画到您的 WordPress 网站，本文列出了一些您可以使用的酷工具。
使用 CSS 将砌体和网格布局添加到您的 WordPress 网站 – 本文介绍如何使用 CSS 将砌体和网格布局添加到您的 WordPress 网站，从而创建更具视觉吸引力的设计。
WordPress 更简洁 CSS 编码的 25 个专家提示 – 如果您想提高 CSS 代码的简洁性和可读性，本文提供了 25 个专家提示来实现这一目标。
改进 CSS 工作流程的 25 个专业技巧 – 改进 CSS 工作流程的技巧，从使用 CSS 预处理器到使用浏览器开发人员工具调试代码。

单击链接了解更多信息并立即开始改进您的 WordPress 网站。

贡献者

感谢来自 Incensy 的 WPMU DEV 成员Antoine贡献了这篇文章的想法以及上面使用的几个 CSS 示例。查看 Incensy 的代理合作伙伴资料以了解更多详细信息。

我们是否错过了您在此过程中学到的任何巧妙的 CSS 技巧？我们很乐意在评论中了解它们！

为 WordPress 用户提供的 17 个节省时间的 CSS 技巧

WordPress CSS 技巧

将元素水平和垂直居中

更改链接颜色

删除链接

禁用链接（链接保持可见，但用户无法单击它）

更改悬停时链接的颜色

样式链接

设置按钮样式

更改部分的字体

创建粘性标题

创建具有阴影效果的粘性标题

免费电子书

您通往盈利的网络开发业务的分步路线图。 从吸引更多客户到疯狂扩张。

免费电子书

顺利规划、构建和启动您的下一个 WP 网站。 我们的清单使该过程变得简单且可重复。

向部分添加背景颜色

更改正文的背景颜色

更改特定单词或短语的颜色

在图像周围创建边框

在图像上创建悬停效果

设计表单样式

创建响应式布局

还有一个 CSS 技巧……

将您的 CSS 技能提升到新的水平

贡献者

您通往盈利的网络开发业务的分步路线图。从吸引更多客户到疯狂扩张。

顺利规划、构建和启动您的下一个 WP 网站。我们的清单使该过程变得简单且可重复。