在 WordPress 文本中应用 CSS - 改进博客设计的小指南

在本篇文章中，我将与大家分享 如何在 WordPress 中应用正文 CSS我们想谈谈当前的 沃普尔社区其中 自定义 WordPress 标题完全指南（24 年前已更新） 从您的文章中，我学到了如何在正文中装饰 h2-4 标记。

在看到其他人在正文中使用荧光笔而不是标题后，我一直在想这个问题，所以我想试一试，周末有空的时候就发上来。

应用文本 CSS 概述

众所周知，在经营博客时，设计是非常重要的。对于像我这样的普通人来说，要让博客看起来像一个多产的设计师并不容易，但有些东西你只需遵循和应用，你就会很高兴你做到了。

只要不过分，就能给博客访客留下好印象，带来更多的流量，进而让你在谷歌等搜索引擎上的知名度更高（如今这种做法已经非常普遍，不这样做才怪呢）。

在本篇文章中，我将向您介绍如何在 WordPress 中的文章正文中应用 CSS，从而对博客的外观和感觉进行微小的改进。 要了解如何应用 CSS，请查看上面链接的 Isaac 的文章。

在写这篇文章之前，我一直在想一件事。对于 h2~h4 标记等内容，我在编写 CSS 代码时一直是逐个标记指定的，这样当我在一篇文章的正文中目视选择 h2~h4 标题时，它就会自动呈现出我想要的样子。 但是..、 我的问题是，对于正文中没有单独标记的文本，如何将源代码与正文文本相匹配？ 如果你和我一样想应用这种 CSS，这可能是你首先想知道的问题，我们将在下面的文章中回答这个问题。

3 种正文效果

1. 荧光笔效果文本

/* 突出显示样式的正文文本装饰*/
u1 {text-decoration-line:none; padding：2px 5px; background: linear-gradient(to top, #c9e1f1 30%, transparent 40%);}

将上述源代码添加到 自定义 > 附加 CSS 接下来我们要做什么？没错，我们要使用很少使用的 代码编辑器模式(注意，快捷键是 Ctrl + Shift + Alt + M ).

在这种模式下，我们面对的是一种外星语言。 假装你不懂这种语言，在要应用的文本前后键入 和 就可以了。说起来容易做起来难，看看下面的图片你就明白了。

텍스트 CSS 적용 -형광펜 효과
[正文文本高亮效果 ]。

就在我写这篇文章的时候，Warped 社区的一条评论让我意识到还有另一种方法。与其采取上述直接接触源代码的冒险（？ 粗体文字会给文字带来高亮效果，例如的内容 这里来看看。

2. 波浪状下划线

/* 装饰波浪形下划线文本*/
u {text-decoration-style: wavy; text-decoration-colour:#c9e1f1; text-decoration-thickness:0.08em; }

这段代码将为 ... 标记内的文本添加波浪形蓝色下划线。 使用方法同上。使用后的效果如下

텍스트 CSS 적용 - 물결 모양 밑줄 효과
[正文波浪下划线效果 ]。

3. 选择文本时的高亮效果

::-moz-selection {
  color: #000；
  background-colour: #ccffff；
}

::selection {
  color: #000；
  background-colour: #ccffff；
}

当拖动正文中的文本以选中它时，这段代码会将背景颜色更改为淡淡的荧光石灰绿，并将文本颜色更改为黑色。如下图所示。

본문 텍스트 드래그 효과
[正文拖动效果］

组织起来

如上所示，您可以使用 CSS 为 WordPress 博客上的文字添加各种视觉效果。无论是荧光笔、波浪形下划线，还是强调选定的文本，这些效果都能改善博客的外观，给访客留下深刻印象。试试这些代码，让你的文章更漂亮一些。

另外，色彩与设计密不可分。 寻找正确色彩 "的艺术--从提取图像中的色彩到和谐的色彩搭配 看看这篇文章。

今天，我们要祝贺您达到 WordPress 和 CSS 知识水平 +1 级。

'secondlife.lol'上的所有内容均受版权法保护。未经授权，禁止复制、拷贝、传播等。

类似文章