统一我的博客文章的CSS样式代码

一、前因后果

之前写博客的时候也有写一些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>
原文地址:https://www.cnblogs.com/alexywt/p/5941657.html