作者：悦然wordpress建站(悦然建站）

​继续分享wordpress建站教程，今天我们给wordpress站点默认的H标签修改样式，让它好看一点。如果你的网站文章内容比较长，那么大概率会用到H标签，至少会有H2标签，或者是H3标签，这样可以让网站内容显得更有条理，对网站SEO优化也有不少好处。但是wordpress默认的H标签样式是比较难看的，只有一个又大又粗的样式。接下来我们就开始对H标签样式进行简单的美化。

步骤一：找到当前网站的H标签样式

有人可能尝试过直接代别人分享出来的CSS样式，但是直接使用时却没有生效，因为不同的网站不同的主题，它原来的CSS样式ID是不一样的，所以我们需要先找到当前网站的H标签CSS样式。

​先打开一篇含有H标签的文章，浏览中按F12进入开发者模式，选中H标签，从代码中找到当前H标签的CSS样式，如上图右边，我们确定了当前网站的H2样式ID为【.blog-details .details-content h2】。然后我们只需要把写好的CSS样式添加进去就可以了。同样的方法我们可以找到H3标签为【.blog-details .details-content h3】。

步骤二：编写CSS样式

接下来我们可以直接在浏览器在调试CSS样式，如果不懂也可以直接让别人写好的来修改，最终悦然建站确定好的样式如下：

.blog-details .details-content h2 {
    font-size: 22px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 5px solid #fcab03;
    margin-bottom: 10px;
}

.blog-details .details-content h3 {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 3px solid #fcab03;
    margin-bottom: 10px;
}

步骤三：添加CSS代码

最后我们只需要把上面的CSS代码添加到当前使用的wordpress建站主题中即可，悦然建站之前的一篇文章给大家介绍过修改CSS的方法，大家没看过的可以先去了解一下。

WordPress建站教程：为什么修改CSS不能立即生效？如何解决？

https://www.zsxxfx.com/23633.html

​这里悦然建站推荐添加额外的CSS代码，不要直接修改主题的CSS文件。上面的代码可以直接添加到主题的【额外CSS】功能中，或者是添加到其它的CSS插件中。部分主题在添加上面的CSS代码时需要使用style标签闭合。

​最终的H标签效果如上图所示，上面分别是H2和H3标签的效果，这样会比原来的H标签样式好看一些。

总结

今天的wordpress建站教程就分享到这里。这里要提醒一点，虽然CSS样式可以实现很多漂亮的效果，但是如非必要，CSS样式还是不要太多，多了反而影响效果。

​