漂亮鲜明的H标题不仅能方便读者快速查看文章内容,而且可以方便后期自动生成目录。
下列代码中,.post-content中的post参数有些主题可能不一样。我的主题是.entry-content h2,所以我将post换成entry。请根据自己主题做相应修改。
CSS样式代码
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5
.post-content h1 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid red;
padding: 5px 12px;
border-left: 5px solid red;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h2 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FF1493;
padding: 5px 12px;
border-left: 5px solid #FF1493;
border-radius: 0rem;
margin: 12px 0px;
}
.post-content h3 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #4169E1;
padding: 5px 12px;
border-left: 5px solid #4169E1;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h4 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #3CB371;
padding: 5px 12px;
border-left: 5px solid #3CB371;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h5 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FFC0CB;
padding: 5px 12px;
border-left: 5px solid #FFC0CB;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5
.post-content h1 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid red;
padding: 5px 12px;
border-left: 5px solid red;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h2 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FF1493;
padding: 5px 12px;
border-left: 5px solid #FF1493;
border-radius: 0rem;
margin: 12px 0px;
}
.post-content h3 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #4169E1;
padding: 5px 12px;
border-left: 5px solid #4169E1;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h4 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #3CB371;
padding: 5px 12px;
border-left: 5px solid #3CB371;
margin: 12px 0px;
border-radius: 0rem;
}
.post-content h5 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FFC0CB;
padding: 5px 12px;
border-left: 5px solid #FFC0CB;
margin: 12px 0px;
border-radius: 0rem;
}
相应的H标签对应相应颜色。只需在主题里Style.css替换相应样式即可。
/*圆角控制*/
border-radius: 0rem;
border-radius: 0rem;
0rem根据喜好修改“0”参数,填写数字可以修改圆角弧度大小。