首页 > 代码库 > 统一我的博客文章的CSS样式代码

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

<style></style>
一、前因后果

之前写博客的时候也有写一些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>

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