一、前因后果
之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置。由于逻辑性不强,找一个配套的格式出来要花费不少时间。
今天我把部分在写博客文章时的常用格式归纳了一下,按分组进行编写,往后再写容易找很多,也便于后续文章的格式统一。
1 <style><!-- 2 /*div分组,设置div层组标签格式 3 * _base为基本格式,例如文章整体外部容器 4 * _sub用于设置文章中某小部分内容 5 * _border为div添加外框*/ 6 .div_base{margin:3px;padding:0px;font-family: 微软雅黑;background:#eee;color:#222;font-size:13px;border:1px solid #bbb;height:100%;width:100%;} 7 .div_sub{margin:5px 5px;padding:0px 5px;} 8 .div_border{border:1px solid #bbb;} 9 /*title分组,设置标题类格式 10 * _base为基本格式,例如文章标题基本格式 11 * _main一级标题格式 12 * _sub二级标题格式*/ 13 .title_base{font-size:13px;font-weight:700;color:#f00;background: #ccf;width:auto;padding:10px 10px;} 14 .title_main{font-size:18px;font-weight:900;} 15 .title_sub{font-size:16px;font-weight:700;} 16 /*step分组,设置描述步骤的文字格式*/ 17 .step_line{font-weight: 700;} 18 /*table分组,设置表格元素的格式*/ 19 .table_base{margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;} 20 .table_base th{vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;} 21 .table_base td{vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;} 22 --></style>