通过修改 CSS 样式来制作模板是 5DBlog 推荐的方式，这种方式实际上不改动 Blog 里的内容，只是对 Blog 的表现形式进行了修改，修改效率非常高，而且可以做出很多特效，例如动态切换模板。用这种方式修改，必须对 XHTML 有一定了解。

　　本篇适用了解 5DBlog CSS 制作模版大体思路的用户

　　选择模板里有些样式是未公开的，其中有四个最简单的样式是所有样式的基础：

　　 讲这四个样式之前首先来了解一下博客系统的主要构成和思路
　　 1、表现形式:基本框架加上css样式,也就是通常说得网络标准
　　 2、数据存储:sql加上xml,sql记录主体数据,xml记录一些不常变动的全局数据
　　 3、数据和表现的结合:主体数据数据生成静态页面,局部变动数据js+asp调用数据库,全局变动数据js调用xml

　　 博客系统的自定义基本上符合一个个人站点的需求,首先有一套固定的标签使用方法可用来任意定义框架,系统会自动将标签转化为相应数据.其次页面的css表现可以完全自己重写,甚至还有一个开放的js来实现诸如dom的修改等一些相关事项,然后边栏除了与用户生产部分都能通过用户面板生成,也可以直接修改其中html源代码(这个修改里不知持js调用,因为js的高手有一个js文件足够了也拜托不要乱调别人的js来破坏自己的页面了)

　　注意:在这里强烈推荐使用默认的框架,因为这样可以使样式的通用,见我博客的皮肤面板.如果你使用了自己定义框架,改的多了,应用别人做的样式自然要出错了,使用默认的框架吧，本人在这里完全相信当前框架能符合绝大部分页面的需求。

　　如何进行样式的制作,这是这个博客系统系统的一个很强的目的性,很多人现在对标准行的页面制作忘而生畏,甚至排斥.这可能是不了解,也可能是还没去了解,这里我只能简单说一句,原来那种table的布局是错误的,在未来会遇到很多麻烦.通过这个博客系统,经过简单的了解,稍微动动手,你会发现一切是那么简单合理,相信我,只有合理的,才是合适的. 再顺便罗嗦一两句,我并不是什么高手,技术这东西是越研究越有,一山更比一山高,用标准设计这个肯定有很多的学问,但是入入门,嘿嘿,嘿嘿,你会打英文莫?好了,光说不练假把势,我们还是进入主题吧.　

　　 一个css的内容主要有以下三种:  .h1{} h1{} #h1{},在{}里是这个设置的相关属性,比如{color:#999;font-size:12px;}就是将字体设置成颜色#999大小12象素了,规范就是属性名:值,每个属性以 ; 分开,如果是单位值除了0外必须写上单位,要不你写个12谁知道是12px还是12em. 那前面三个是什么东东,它大名选择符,这个带.的就是class名了,带#的就是一个标签的id,什么都不代的是标签自身的标签名,比如一个标签<h1 id="text" class="myclass">test</h1>,那么在css里h就是他的标签名,#text就是id,.myclass就是class名.也就是说在css用任意一种方式附带属性他都会执行,至于执行的优先,还是先不要钻牛角,找个手册,自己写几个排序运行下就明白了.这里只要明白用这三种任意一个都可以执行.那么现在简单来看看三者的特性.

　　 1、.??? 这个一看就是专门用来做样式设计,在一个html的标签里写了class="???",页面就会自动执行关联css里的.???的属性,他是可以任意命名的,当然不能用中文,非法字符等,简单的写个英文名,要不这篇文章写完,我就鞠躬尽瘁了
　　 2、#??? id名,id是dom对象里用来寻址的一个最长用方法,因为同一个id名在一个html里是唯一的,这样通过#??? 就能很快对应的执行相关css属性
　　 3、??? 标签名,html有很多可用标签,都是经过严格定义的,每个标签都有他的含义和默认样式,注意,即使不用css也能简单的排版一篇文章,而不是你重页面源码里看到毫无头绪的一堆代码.标签名的默认样式是可以改变的比如 h3{font-size:12px;}会将所有h3标签的字体重设为12象素大小.

分清这个就可以进行下一步了 css选择符的两种常用方式包含与分组
　　 1、分组很简单,就是将同样的定义应用于多个选择符,选择符用 , 分开,例如 #a1,.b2,h3{},其实就是一种节约字节的作法.
　　 2、包含 大家都知道html的构造是种层级关系比如<div><p>abcd</p></div>,在一个页面会有很多类型相同之处,这样就要统一设置css,最简单时候就是用同一.class,或者同一标签,但很多时候,页面往往比较复杂,这样就需要局部设置.如何设置是一个逻辑的关系,这里只需要知道他的方式是 a b{},这样只有a下面的b才会执行这个属性,比如div p{},#aa div{} .class div p{},这种包含的层级是不限制的,但如果你些 #aa #bb{}这个显然是不对的,#是具有唯一性的不可能还存在#gg #bb,直接写#bb就可以了,页面设计错综复杂,如何写很多是个人的习惯,写之前注意下是否符合包含逻辑.
很明白一个道理逗号和空格可要严格分清哦,当然css选择符还有其他的一些使用方法,这个用了自然慢慢会了解.

最后了解几个常用的属性
　　 1、background: 设置背景颜色和图片,所有的页面样式图片颜色都写在background中,这样不是一变css整个页面就变了,可以设置背景图是否循环,循环方式,指定图像位置.滚动还是固定.
　　 2、margin padding: 内外补丁 主体内外的间隙空间
　　 3、border: 边框样式,边框颜色,大小,样式比如{border:1px solid #ccccc}
　　 4、display: 显示方式,主要是block(块),none(不显示),inline(内联),块换行,内联不换行 list-item列表方式显示,此方式显示可以设定显示的样式list-style,标签li的缺省属性就是list-item,所以适合用来表现文章列表
　　 5、float: 漂浮,left,right或none,比如<div class="aa">aaaa</div><div class="bb">bbbb</div> aaaa要显示在bbbb的右边,就要用到float:right了
　　 6、position:定位方式,主要分为 static--无特殊||absolute绝对定位,相对于最接近的一个有定位设置的父对象进行绝对定位,可以发生层叠||relative--相对定位,不可层叠,定位的值根据 left ， right ， top ， bottom 来设定.
　　 其他诸如width,height,font-size,font-color等都比教容易了解,找个手册熟习一下就可以了

　　 css的样式执行起来在不同的浏览器显示会略有不同,大都在指定了宽或高度的时候会发生页面撑坏,有很多的方法技巧可以解决,我建议是指定了宽度,设计的时候注意多留出些空隙似乎好点.另外就是用firefox做设计,以ie为显示主导.

　　 现在基本具有了css设计的一些基础常识,可以开始进行样式设计了

　　 前面说过,所有的标签都是经过严格定义的,都有自己的含义,很多地方的css入门介绍会教你用*通配符或者分组方式把一些默认属性先去掉,比如div,p,ul,h1.h2{font-size:12px}先去掉,这不是什么错误,但最好行先不要这样作,因为你应该先了解这些标签的作用,这样有很大的帮助,其实也很简单h1-h6就是不同的标题,ul li就是列表,b就是粗体 i就是斜体等等,你是不是早就知道了,只是认为他没什么必要,别忘了你还必须注意如果没有了css,你的html会变成什么样,而且注意到标签得作用后框架设计的思路就会变得很清晰,你当然完全可以用div解决大部分问题,但是试想这样写出来的框架别说别人,就是你自己读起来恐怕也够呛.另外的好处是这样写出来的html能够使其他的程序能够读懂你页面的层次关系来取得相应内容.

　　 文章的标题说了四个最简单的样式,那么有没有最最简单的样式,有,没有样式是不是最简单的样式,　　点这里

　　 你发现了什么,不要告诉只是一张硕大的图片,这里我耍了一个诡计,我在这张200px宽度的图片img里写了个width=80%，你看丢失了css后，他变得多么的不真实，好了，仔细研究一下你的答案应该是“这个页面的内容我基本能看的明白。”想想吧，如果你写的都是div或者table,会是怎样一个页面。

　　 看得懂是一回事，看得神清气爽有是另外一回事，不用css世界还有什么乐趣，那么我们来做第一个最简单的css样式

　　 #sidebar {float:left;width:200px;border:#000 dashed 1px;}
　　 #content {margin:0 0 0 205px;border:#000 dashed 1px;}

　　 够了就这么两行

　　 是不是有点像个博客了，前面已经说过了，我们已经制定了一个简单的通用框架，按照一个博客的常规模式，它分为头部head，边拦sidebar，内容content，底部footer，基本布局如下

　　 <div id="wrapper">
　　 　　 <div id="head"></div>
　　 　　 <div id="main">
　　　 　　　<div id="inner">
　　　　 　　　　 <div id="sidebar"></div>
　　　　 　　　　 <div id="content"></div>
　　　　 　　 </div>
　　　　 </div>
　　　　 <div id="footer"></div>
　　 </div>
　　我们经常称使用div还是table布局，而不是其它，重制作者角度，其实有一个很简单的原因，因为这两个标签都是可以无限嵌套的进行块分组，div就是把把页面一个块一个块任意的分组，而table则是把页面以表格按照行和列进行分组，显而易见前者的自由度是更广的。要达到美好的外观，无论哪种形式都需要用到css，否则你为了修改一个简单的图标，可能要去修改n多的页面。使用div+css，既可以产生一个具有外形的最简单分组小块，定义一些的小块的样式，你只要考虑怎么去放置块了，可以a里面放b，也可以b里面放a。
　　 如果你看了页面原码，不要为其而困惑，很多div只是为了装饰页面而预留的，多一层div就可以增加更多的设计外观的表现，现在分析一下页面的形成.大部分的div都是按本来的显示方式呈现，只是在边拦和内容进行了处理，由原来的上下改成了左右，这就表示css不是去决定页面的外形，而是改变外形，，也就是说，好的设计只在需要的时候才写css，其他的时候都顺其自然。按照需要我们很容易得出了其他四个最简单的样式
　　(1)、页面居中,边拦居左
　　#wrapper {width:778px;margin:auto;} #sidebar {float:left;width:200px;}
　　#content {margin:0 0 0 205px;}

　　(2)、页面居中,边拦居右
　　#wrapper {width:778px;margin:auto;} #sidebar {float:right;width:200px;}
　　#content {margin:0 205px 0 0;}

　　(3)、页面全屏,边拦居右
　　#sidebar {float:right;width:200px;}
　　 #content {margin:0 205px 0 0;}

　　(4)、页面全屏,边拦居左
　　#sidebar {float:left;width:200px;}
　　#content {margin:0 0 0 205px;}

　　你可以在选择模版填入fb19996-fb19997去体验一下这四个样式