专注于网站建设和搭建网络营销体系
商视互联,北京做网站公司
北京做网站,商视互联 您的位置:网站首页 > 商视动态 > 网页设计 > 正文
如何写出更加规范高效的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计划·.吕新x全方揭秘 三国全面战争战斗技巧 星际争霸2剧情地图可以下载 天津时时彩提前开奖 堂吉诃德的财富电子游戏 腾讯跑跑卡丁车手游什么时候公测 西班牙vs巴拉多利德 nba爵士vs湖人录像 乌甸尼斯对恩波利比分 海盗王游戏 竟彩网开奖 篮彩比分直播NBA