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

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 的工作原理
• 如何将 CSS 添加到 WordPress

注意：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或在没有它的情况下进行试验，看看您的代码是否正常工作。 只需添加您的 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选择器用于向页面顶部添加填充，以便内容不会被固定标题覆盖。

为部分添加背景颜色

您想为网站的某个部分添加背景颜色吗？ 然后使用以下 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 selector 用于设置表单中各种输入字段的样式。 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 设计师，如果您想更深入地了解如何将 CSS 与 WordPress 结合使用，这些额外的 CSS 教程将帮助您扩展知识和技能：

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

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

贡献者

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

***

注意：我们不接受来自外部来源的文章。 但是，WPMU DEV 成员可以通过博客 XChange 为我们博客上的教程和文章提供想法和建议。

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