WordPress标题文章H标签美化

转载 jokeworld  2022-07-14 16:37  阅读 23 次
阿里云免费代金券,购买阿里云产品前先领券更优惠!

本文记录针对wordpress文章的css样式美化代码,感谢jokeworld提供。
该代码可以在wordpress后台--外观--自定义--额外的css中添加,也可以在直接写入主题style.css,或者替换原h标签样式。

代码样式

.post .entry-content h1{ 
font-size:25px;
font-weight:bold;
color: #e50d4c; 
background-color: #fccad3; 
border-bottom: 1px solid; 
padding: 5px 15px;
 border-left: 5px solid;
 margin:18px 0px 18px 0px; 
overflow: hidden; 
}
 .post .entry-content h2{
 font-size:21px;
 font-weight:bold;
 color: #850de8; 
background-color: #eeeafe;
 border-bottom: 1px solid;
 padding: 5px 15px; 
border-left: 5px solid;
 margin:18px 0px 18px 0px; 
overflow: hidden; 
} 
.post .entry-content h3{ 
font-size:17px; 
font-weight:bold;
 color: #41b0f4;
 background-color: #ddf0fe;
 border-bottom: 1px solid;
 padding: 5px 15px;
 border-left: 5px solid;
 margin:18px 0px 18px 0px;
 overflow: hidden;
 } 
.post .entry-content h4{
 font-size:13px;
 font-weight:bold; 
color: #20b60b; 
background-color: #ebfde5;
 border-bottom: 1px solid;
 padding: 5px 15px; 
border-left: 5px solid;
 margin:18px 0px 18px 5px; 
overflow: hidden; 
} 
.post .entry-content h5{
 font-size:10px; 
font-weight:bold; 
color: #f1e40f; 
background-color: #fefeea;
 border-bottom: 1px solid; 
padding: 5px 15px;
 border-left: 5px solid; 
margin:18px 0px 18px 10px;
 overflow: hidden;
}

代码注释

.entry-content h5{/*类选择器*/

font-size:10px;/*字体大小*/

font-weight:bold;/*字体加粗,值可以为数字也可以为bold(加粗)*/

color: #f1e40f;/*字体内容颜色*/

background-color: #fefeea;/*背景颜色*/

border-bottom: 1px solid;/*下边框样式:1px为宽度,solid边框样式(有很多样式具体自己查吧),后边还可以加上具体颜色*/

padding使用方法一样: 5px 15px;/*内边距属性:5px为上内边距和下内边距,15px为右内边距和左内边距也可以单独写,具体为:上右下左*/

border-left: 5px solid;/*左边框的样式:和上边的border-bottom使用方法一样*/

margin:18px 0px;/*外边距属性:和上边的padding使用方法一样*/

overflow: hidden;/*当内容显示的内容超出时怎么办:hidden(隐藏超出部分),还有其他的值,自己查一下*/

展示效果

本文地址:https://8ik.cn/archives/410
关注我们:请关注一下我们的微信公众号:扫描二维码捌栢科的公众号,公众号:Hey_MrBoss
温馨提示:文章内容系作者个人观点,不代表捌栢科对观点赞同或支持。
版权声明:本文为转载文章,来源于 jokeworld ,版权归原作者所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情