Div+Css 如何让页面更精美(二)——样式
2011-05-16 23:25
281 查看
在优化,美化样式时无外乎包含这些共同特性:样式共用性,简洁性,继承扩展性,命名规则,以及注释。
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.注释
添加部分注释有助于帮助样式的易读性,方便程序员了解样式设置。
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.注释
添加部分注释有助于帮助样式的易读性,方便程序员了解样式设置。
相关文章推荐
- 一个CSS文件内如何设置多个body及多个DIV样式,并给出页面如何调用
- 2天驾驭DIV+CSS 之四 CSS如何控制页面样式
- Div+Css 如何让页面更精美(一)
- Div+Css 如何让页面更精美(三)——网页布局
- 如何用div+css布局页面
- 【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式
- 如何用div+css布局页面
- 9、如何控制框架页面或<iframe>内嵌页面在指定页面(区域)打开页面? [除了div+css,框架页面也不能忘记]
- 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素
- 如何用DIV+CSS来构建内嵌页面跟随按钮变化
- div+css如何让页面随着窗口的变化内容位置不变
- 如何用div+css布局页面
- CSS+DIV网页样式与布局——页面背景&图片效果
- css如何让div和页面等高?
- 在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?
- DIV+CSS页面布局,样式中区别苹果浏览器Safari
- 如何用css和div控制html页面中的下拉列表框(select)
- 【DIV+CSS入门教程】四、CSS如何控制页面
- 关于Asp.net2.0下Div+Css布局页面样式实效的解决方法