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

科技 4天前 iowen

6 0 0

继续分享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;}