統一我的部落格文章的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>

統一我的部落格文章的CSS樣式代碼