CSS样式优化
CSS样式优化
CSS样式优化一、css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。
二、css代码优化的方法
1.使用简写
如果你现在还对简写一点都不了解,那你就又写落伍了,不过幸好,学起来并不是很难。使用简写是一种让代码减少的最简单方法。没有比现在更适合实践代码简写的时候了,还等什么,一起来看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40px; }
浏览器可以通过不同数量的属性值来解释你定义的CSS代码
2.避免使用Hack
Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件!
3、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }
能通过代码或字符实现的,就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的»符号等。既减小CSS图片请求,又不会面临若干套皮肤升级困难的问题,仅通过对CSS的color、backgroud等属性的控制,就可以换色了。
8、尽量使用CSS3等新技术
尽量使用CSS3实现功能,即非图片类的元素效果图,如圆角、阴影、渐变、半透等效果,可以通过样式控制,而无需切图的元素,在得到设计师认可后,不用图片,只做样式控制。满足高级浏览器的视觉,IE系列不能显示的,有原则的放弃。不仅为速度助力,还在放弃低级浏览器的大方向前进一步。
三、十句CSS学习顺口溜
1、IE边框若显若无,须注意,定是高度设置已忘记;
2、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;
3、三像素文本慢移不必慌,高度设置帮你忙;
4、兼容各个浏览须注意,默认设置行高可能是杀手;
5、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;
6、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。
7、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。
8、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。
9、IE浮动双边距,请用display:inline拘。
10、列表横向排版,列表代码须紧靠,空隙自消须铭记。
热门推荐
- sqlserver限制windows身份登录(解决sql server 数据库,sa用户被锁定的问题)
- python樱花绽放代码(新年快乐! python实现绚烂的烟花绽放效果)
- docker 默认内存(docker 运行指定内存的操作)
- serv-u操作手册(serv-U FTP软件的攻击防守修改教程[图文])
- python封装函数讲解(Python中super函数用法实例分析)
- sql解析器配置(sql字段解析器的实现示例)
- SET NOCOUNT ON 作用
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- 云服务器用什么配置(如何选择云服务器 云服务器配置怎么搭配)
- 华为云服务器远程登录后怎么办(华为云服务器怎么登陆不上去)