Div+Css 如何让页面更精美(二)——样式

 

在优化，美化样式时无外乎包含这些共同特性：样式共用性，简洁性，继承扩展性，命名规则，以及注释。

1.共用性

重要性：可以大量减少样式代码冗余度，以便于提高样式加载速度，以及方便与样式修改。

大部分的样式共用性在分析布局时就需要考虑（看下一篇——网页布局），如考虑整体的字体为什么颜色，大小，字体；超链接样式，以及部分相同样式的板块样式等等。

2.样式简洁化

针对于一些样式属性如：margin,padding,border,background,font等属性可用一些相对简洁的写法来完成。例如：

1.margin属性

a.针对于上下左右偏移值都相同，可设置为：margin:1px;

b.针对于上下相同，左右相同时，可设置为：margin:1px(上下) 2px（左右）;

c.针对上下不同，左右相同值时，可设置为：margin:1px(上) 2px(左右) 3px(下)

d.针对于上下左右都不相同时，可设置为：margin:1px(上) 2px（右） 3px（下） 4px（左）;

e.除此之外还有margin单一属性：margin-top,margin-bottom, margin-left,margin-right。

2.padding属性同上

3.border属性 当上下左右边框都相同时，可直接设置为:border:solid 1px #000。并不需要将边框拆成边框样式，边框宽度，边框颜色逐一设置。

4.在background,font拆成多个写法是经常可发现的问题，例如：background-img:url(/a.jpg),background-position:-10px -10px;我们可以写成：backgroundurl(/a.jpg) -10px -10px;当然两者写法都是没错的，不过细微观察后者的写法，无疑使得样式更精简，也并显得优美。

3.继承扩展性

在样式定义过程中有部分属性定义父级标签定义样式后，该标签相同的属性样式就可以不用定义，例如：font一类的属性，默认就会继承父级属性。

在上一遍页面标签文章中讲述标签的多样性中，我们要考虑到相对独立的板块中不同的内容尽量使用到不得标签来完成布局，使得页面看似更加简洁，来突出信噪比，以增强搜索引擎对于页面的可读性。这时我们要设置该标签下的字标签样式，可以用样式的扩展性来完成，例如:<div class="test"><p></p></div>,在p样式定义这块我们可以把样式变成;test. p{}

4.命名规则

在命名规则这块经常被大部分程序员所忽略，怎样的命名规则才比较合理,要考虑两点: 1.样式名易读懂,2.样式名尽可能简短.那大概的长度为多少比较合理? 我个人建议: 长度尽量不要超过14个字符,最好在7个字左右，即可读懂，也相对简短。

5.注释

添加部分注释有助于帮助样式的易读性，方便程序员了解样式设置。