继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

css基础知识------总结

startitunderground
关注TA
已关注
手记 58
粉丝 99
获赞 931

CSS雪碧即CSS Sprite,也叫CSS精灵,
是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

雪碧图的使用范围:
1.静态图片,不随用户信息的变化而变化
2.小图片,图片容量比较小
3.加载量比较大
(一些大图不建议拼成雪碧图)

使用雪碧图有效减少http请求数量,加速内容显示
每请求一次,就会和服务器链接一次,建立链接是需要额外时间的
使用字体icon图标的时候,单单引入字体的文件和字体引用定义的css文件就差不多150kb以上了(室外访问情况--3G甚至是2G这类人还是很多,会发现很慢,体验很差),而雪碧图最多也就10kb左右,提高用户的体验

href和src的区别
引用css文件时:href=”cssfile.css”
引用js文件时:src=”myjs.js”
引用音频文件时:src=”song.ogg”
引用图片:src=”mypic.jpg”
网站链接:href=”http://www.baidu.com
Src和href的区别:
Src(source)源:用于代替这个元素;
Href(hypertext Reference)超文本引用;用于简历这个标签与外部资源之间的关系;
透明度兼容性
Opacity设置透明度,取值为0-100。
. filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
. -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50%
. opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP