专注于网站建设和搭建网络营销体系
商视互联,北京做网站公司
北京做网站,商视互联 您的位置:网站首页 > 商视动态 > 网页设计 > 正文
如何写出更加规范高效的DIV+CSS样式呢?
作者:商视互联   来源:北京网络公司   日期:2012/10/25 21:35:54   热度:℃   [ 标签:网页设计 **** CSS ]

关于如何规范正确的去写CSS样式代码在这里我给大家做一个详细的解说,有不明白的地方可以与我联系,有写的不对的地方也请批评指出,下面开始教程学习:

让我们来看看4个关键点

1、高效的CSS

2、可维护的CSS

3、组件化的CSS

4、hack-free CSS

一、书写高效CSS

1、不推荐使用行间样式:

商视互联

2、不推荐使用内嵌样式:

商视互联

3、推荐使用外联样式:

商视互联

 

--------------------------------------------------------------------------------------------------------------------------

二、为了兼容?#20064;?#26412;的浏览器,建议使用link引入外部样式表的方来代替@import导入样式的方式.
PS:译者注:@import是CSS2.1提出的所以老的浏览器不支持,点击查看@import的兼容性。@import和link在使用上会有一些区别,利用二者之间的差异,可以在?#23548;?#36816;用中进行权衡。关于@import和link方式的比较有几篇文章可以拓展阅读:@import vs link、don’t use @import 、Flash of Unstyled Content (FOUC)

不推荐@import导入方式:

商视互联

推荐引入外部样式表方式:

商视互联

--------------------------------------------------------------------------------------------------------------------------

三、使用继承

低效率的:

商视互联

高效的:

商视互联

商视互联

四、使用多重选择器

低效率的:
h1 { color: #236799; } 
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }

高效的:
h1, h2, h3, h4 { color: #236799; }

五、使用多重声明

低效率的:
p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666;}

高效的:
p{margin: 0 0 1em;background: #ddd;}

 

六、使用简记属性

低效率的:

商视互联

高效的:

商视互联

本文网址:

切尔西欧联夺冠整容
吉林时时是什么 最新时时彩技巧大全 北京pk10开奖 极速时时计划网址 广东南粤风彩今晚开奖 最准的特马网站固定不变 时时走势图 单机捕鱼之海底捞 上海时时信息查询 广东福彩26选5停售了吗 吉林时时专家计划 河北11选5开奖视频 十一选五走势图甘肃 7039彩票app pk10个人能空置住不 2013qq捕鱼大亨辅助