【前端网页】 目前主要更新HTML,一起学习一起进步。
本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识
网页上我们经常能够看到大量图标图片使用
若每张图片都单独进行一次传输,效率会很低。
好比:我们去超市买水果,若买一个带回家一个,那么效率很低,不如买完一次性打包带回家更方便。
这个网页数据传输道理相同,所以我们的选择是将当前页面所需要的图标图片一次性打包传输,方
便使用。
所以,为了提高页面加载效率,这里我们就需要学习 CSS 的精灵图和字体图标。
精灵图,又名雪碧图,是多个小图标的集合图。
我们通过背景图片的设置,就可以使用精灵图。
1 、在精灵图上,找到要使用的图片,测量其宽高
2、以 div 为例,为其设置和图片相同的宽高(加边框仅为了方便演示)
3、通过背景图片引入,不能重复
4、因为现在显示的背景图默认为左上角,我们要通过 background-position 来调节。
5、从图片左上角 测量 距离目标图像左上角的距离(注意,不要覆盖了目标图像)
6 、通过测量得知,目标图像左上角坐标: x=275,y=200
设置时,全部更改为负数即可实现
精灵图通过背景图片、背景位置结合使用,可以提高页面加载的效率,在后期页面美化中使用较为
频繁。
精灵图虽然可以提高页面加载效率,但是精灵图同样也存在问题:
1 、 图片放大失真
2 、 图片过大,加载速度过慢,导致网页在加载初期看不到任何图像
3 、 如果想为精灵图添加或者减少图标,要对整体修改,加大了精灵图修改难度
所以,为了弥补精灵图的不足之处,我们还需要学习字体图标,来和精灵图结合使用。
字体图标:引入第三方特殊字体,以特殊字体显示为图片图标。
注:因为在计算机中,字体的本质就是图片,所以又称为图标字体。
优点:
1 、轻量级:字体加载速度极快。
2 、灵活:可以为字体加入颜色、大小、阴影等字体样式
3 、兼容性:支持几乎所有浏览器
4 、效率高:减少了数据传输次数
可以使用老师提供的资源,也可以进行如下自由下载
1 、登陆 阿里字体图标库,搜索你需要的字体: http://www.iconfont.cn
2 、例如搜索:“Java ”
3、把需要的图标添加到购物车中
4、选择过各种图标后,点击购物车
5、点击“下载代码”
6、下载完毕,所有代码都在 download.zip 中
1 、解压压缩文件,打开解压的文件夹(文件夹名每次下载略有不同)
2、将需要的字体图标存入 idea 对应位置
课外扩展: TureType( .ttf ) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体,支持这种字体的浏览器有 IE9+ 、 Firefox3.5+ 、 Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2+; Web Open Font Format( .woff ) 格式 woff 字体,支持这种字体的浏览器有 IE9+ 、 Firefox3.5+ 、 Chrome6+ 、 Safari3.6+ 、 Opera11.1+; Embedded Open Type( .eot ) 格式 .eot 字体是 IE 专用字体,支持这种字体的浏览器有 IE4+; SVG( .svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式,支持这种字体的浏览器有 Chrome4+ 、 Safari3.1+ 、 Opera10.0+ 、 iOS Mobille safari3.2+
1 、打开 demo_index.html
2、选择 Unicode 或 Symbol 方式中的一种
3、以 Unicode 为例,根据网页提示,找到使用的关键代码
4、idea 中,html 引入 CSS 样式,并复制关键代码
5、查询图标对应的 Unicode 码,修改 span 中的转义字符值。
6 、通过为 iconfont 设置字体大小,改变图标大小(因为字体图标属于字体,但 font-family 不要使
用,无效果)
字体图标可以解决精灵图修改难、图片大的问题,通常和精灵图结合使用,解决网页图标问题。
精灵图:负责页面通用的各种大中型彩色图标图片
字体图标:负责页面快速显示的各种小型图标图片
字体图标允许我们为文本添加阴影。
格式: text-shadow : X 轴偏移 Y 轴偏移 模糊程度 阴影颜色 ;
text-shadow: 5px 5px 5px #FF0000;
元素可以在表现形式上通过 CSS 样式调节,变为圆形:
格式: border-radius :百分比;
注意:
1 、 0% 是四边形, 50% 是圆形。 0%~50% 之间是圆角四边形
2 、占用的标准流位置仍为四边形
示例代码:
1 、先把滚动条拉倒网页最底部
2 、页面上,鼠标右键,“检查”
3 、 ctrl+shift+P 呼出输入框
4、输入:capture full size screenshot ,敲回车
5、截图后,弹出窗口,提示网页截图保存位置