当前位置:首页全部内容WordPress建站教程:美化WordPress默认的H标签样式

WordPress建站教程:美化WordPress默认的H标签样式

作者:悦然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样式还是不要太多,多了反而影响效果。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧