CSS 高级技巧

这篇具有很好参考价值的文章主要介绍了CSS 高级技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.精灵图

1.1为什么需要精灵图

1.2 精灵图(sprites)的使用

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引入

2.5字体图标的追加


1.精灵图

1.1为什么需要精灵图

CSS 高级技巧

 一个网站往往回应用很多的小背景图像作为修饰,当一个网站中图像过多的时候,服务器会频繁的接受和发送请求图片造成服务器请求压力大者将大大降低页面加载的速度。

  因此,为了有效的减少服务器接受和发送请求的次数,提高页面加载的速度,出现了CSS精灵技术,也称 css sprite, css雪碧。

(核心原理: 将网页中的一些小背景图像整合到一张的图像中,这样服务器只需要一次请求就可以了)

1.2 精灵图(sprites)的使用

使用精灵图的核心:

  1. 精灵图技术主要针对于背景图片的使用,就是把多个人小背景图片整合到一张大的图片中。
  2. 这个大图片也称为sprites 精灵图或者 雪碧图
  3. 移动背景图片位置,此时可以使用 background-position
  4. 移动距离就是这个目标图片x和y轴坐标,网页中坐标有所不同。
  5. 因为一般情况下都是往上往左移动,所以数值是负值。
  6. 使用精灵图的时候需要精确测量,每个图片的大小和位置。

使用精灵图核心总结

  1. 精灵图主要针对于小的背景图篇使用
  2. 主要借助于背景图片位置俩实现-- background-position
  3. 一般情况下精灵图都是负值(千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理)

2.字体图标

2.1字体图标的产生

字体图标的使用场景:主要用于显示网页中通用,常用的一些小图标。

以前都是用精灵图来做的,不过精灵图有很多的缺点。

  1. 图片本身还是比较大的。
  2. 图片本身放大和缩小都会失真。
  3. 一旦图片制作完毕咸阳跟换是非常复杂的。 

此时,有一种技术的出现很好的解决了以上问题,即使字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用,展示的是图标,本质属于字体。

2.2字体图标的优点

  • 轻量级:一个图标要比一系列的图像要小。一旦字体加载了,图片就会马上渲染出来,减少了服务器的请求。
  • 灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等。
  • 兼容性:几乎支持所有的浏览器,请放心使用  

注意:字体图标不能代替精灵技术,只是对工作中部分图标的提升和优化 

总结:

  1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。CSS 高级技巧
  2. 如果遇到一些结构和样式复杂的小图片,就用精灵图。CSS 高级技巧

字体图标的使用

字体图标是一些网页常见的小图标,我们直接网上下载即可,因此使用可以分为:

  1. 字体图标的下载
  2. 字体图标的引用(引入到html网页中)
  3. 字体图标的追加(以后添加新的小图标) 

2.3字体图标的下载

推荐网站:

https://iconion.com/posts/icomoon/https://iconion.com/posts/icomoon/ IcoMoon 成立于2011年,退出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使他们称一字型,该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速慢。

https://www.iconfont.cn/https://www.iconfont.cn/阿里M2UX的一个iconfont 字体图标库,包含了淘宝图标库和阿里图标库。可以使用Ai制作图标上传代码。免费。

2.4字体图标的引入

下载完毕之后,注意原来的文件不要删除,后面还会使用。

1.把下载包里面的 fonts 文件夹放入页面根目录下。CSS 高级技巧

2.在css样式中全局声名字体:简单理解把这些字体文件通过css引入到我们的页面中。一定要注意字体文件路径问题。

  @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

 3.html 标签内添加小图标

CSS 高级技巧

 代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体声明 */
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: palegoldenrod;
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>

2.5字体图标的追加

如果在工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json 重新上传,然后选取自己想要的图标,重新下载压缩包,并替换原来的文件即可。

CSS 高级技巧文章来源地址https://www.toymoban.com/news/detail-404367.html

到了这里,关于CSS 高级技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 为什么需要websocket?

    前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。        因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客

    2024年02月12日
    浏览(56)
  • 为什么CPU需要时钟

    为什么CPU需要时钟这样一个概念? 什么是时钟脉冲,CPU为什么需要时钟,时钟信号是怎么产生的? 上面这个图的方波就是一个脉冲,类比于人类的脉搏跳动。一个脉冲称之为CPU的一个 时钟信号 ,或者 时钟脉冲 。一个脉冲周期就叫CPU时钟周期,一个时钟周期内时钟信号震荡一

    2023年04月11日
    浏览(49)
  • 爬虫为什么需要ip

    爬虫需要使用爬虫ip主要是为了解决以下问题: 1、反爬虫机制:许多网站会设置反爬虫机制来防止爬虫程序的访问,例如限制IP地址的访问频率、检测访问来源等。使用爬虫ip可以绕过这些限制,使得爬虫程序更难被检测到。 2、访问限制:有些网站可能会对某些地区的IP地址

    2024年02月02日
    浏览(55)
  • 爬虫时为什么需要代理?

    我们都知道爬虫时是需要代理地址介入的。使用代理可以隐藏你的真实IP地址,防止被网站封禁或限制访问。此外,代理还可以帮助你绕过地理限制,访问被封锁的网站或服务。但是请注意,使用代理也可能会带来一些风险,例如代理服务器可能会记录你的访问数据,或者代

    2024年02月06日
    浏览(52)
  • 为什么自动驾驶需要5G?

    什么叫自动驾驶? 自动驾驶分为6个等级: Level 0: 人工驾驶,无驾驶辅助系统,仅提醒。 Level 1: 辅助人工驾驶,可实现单一的车速或转向控制自动化,仍由人工驾驶(如定速巡航、ACC)。 Level 2: 部分自动驾驶,可实现车速和转向控制自动化,驾驶员必须始终保持监控(

    2024年02月08日
    浏览(61)
  • 为什么需要对相机标定?

    以下内容来自系统教程如何搞定单目/鱼眼/双目/阵列 相机标定? 点击领取相机标定资料和代码 为什么需要对相机标定? 我们所处的世界是三维的,而相机拍摄的照片却是二维的,丢失了其中距离/深度的信息。从数学上可以简单理解为,相机本身类似一个映射函数,其将输

    2024年02月06日
    浏览(51)
  • 什么是分库分表?为什么需要分表?什么时候分库分表

    不急于上手实战  ShardingSphere  框架,先来复习下分库分表的基础概念,技术名词大多晦涩难懂,不要死记硬背理解最重要,当你捅破那层窗户纸,发现其实它也就那么回事。 分库分表是在海量数据下,由于单库、表数据量过大,导致数据库性能持续下降的问题,演变出的技

    2023年04月26日
    浏览(142)
  • 为什么商业基础软件需要开源

    Bytebase 本身是一家商业软件公司,而作为最核心资产的代码从 Day 0 却是开源的。同时我们还是 star-history.com 的运营者,大家在各种开源渠道会看到它生成的图: 一直以来,常会被别人问起的一个问题,就是为什么 Bytebase 要开源。结合这 2 年多的实战经验,一次性把能想到的

    2024年02月13日
    浏览(95)
  • 为什么需要自动化测试

    自动化的优势: 1.自动化可以代替手工大量地重复的工作,测试可以把大量的时间放在用例设计和新功能上边 2.自动化可以大量提升回归测试效率,特别适合敏捷开发 3.自动化可以大量地利用无人值守的时间去执行用例,特别适合非工作是爱你执行测试,工作时间分析测试用

    2024年02月13日
    浏览(63)
  • 什么是 http 代理,为什么需要 http 代理?

      在我们进行软件测试工作的时候,会有很多地方需要去设置代理的。 比如:fiddler抓包,jmeter录制脚本等等。 甚至于,在某些公司,去访问某些内部网址的时候,都需要通过连接vpn才能成功访问。 那到底什么是代理?我们为什么要使用代理呢? 代理也称网络代理,是一种

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包