wordpress自定义css(css参考手册)

   谷歌SEO    

作者:悦然wordpress建站(悦然建站)


?继续分享wordpress建站教程,今天我们给wordpress站点默认的H标签修改样式,让它好看一点。如果你的网站文章内容比较长,那么大概率会用到H标签,至少会有H2标签,或者是H3标签,这样可以让网站内容显得更有条理,对网站SEO优化也有不少好处。但是wordpress默认的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代码添加到当前使用的wordpress建站主题中即可,悦然建站之前的一篇文章给大家介绍过修改CSS的方法,大家没看过的可以先去了解一下。


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

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


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


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



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

?

 标签:

评论留言

我要留言

欢迎参与讨论,请在这里发表您的看法、交流您的观点。