CSS高级技巧

若水cjj

已于 2022-07-03 10:47:37 修改

阅读量1.3k

点赞数 3

分类专栏： # CSS 文章标签： css 前端 javascript

于 2022-07-02 23:43:21 首次发布

本文链接：https://blog.csdn.net/cjhxydream/article/details/125573666

版权

本文介绍了CSS的高级技巧，包括精灵图的使用以减少页面加载时间，字体图标的优势及应用，如何用CSS制作三角形，调整元素垂直对齐，实现文字溢出省略号，以及常见的布局技巧如负margin、文字环绕浮动元素等。此外，还探讨了浏览器初始化的相关内容。

摘要由CSDN通过智能技术生成

1. 精灵图

1.1 为什么需要精灵图？

在这里插入图片描述

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

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

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

1.2 精灵图(sprites)的使用

使用精灵图核心:

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

2. 字体图标

2.1 字体图标的产生

在这里插入图片描述

2.2 字体图标的优点

在这里插入图片描述

2.3 字体图标的使用步骤

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

2.3.1 字体图标的下载

在这里插入图片描述

2.3.2 字体图标的使用

在这里插入图片描述

icomoon的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>字体图标的使用</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: pink;
    }
  </style>
</head>

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

</html>

显示效果
在这里插入图片描述

2.5 字体图标的追加

在这里插入图片描述

2.6 字体图标的加载原理

在这里插入图片描述
当浏览器第一次请求相关的图标时，服务器会将相关的文件一次性发送给浏览器，当再需要其他图标时就能够直接从ttf文件中获取图标，减轻服务器的压力，减少请求次数，缩短用户的等待时间。

3. CSS制作三角形

在这里插入图片描述

京东下拉三角形案例

在这里插入图片描述

课堂案例

在这里插入图片描述

4. CSS用户界面样式

4.1 鼠标样式 cursor

在这里插入图片描述

4.2 轮廓线 outline

在这里插入图片描述

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

最低0.47元/天解锁文章

若水cjj

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
CSS高级技巧

使用精灵图核心:显示效果当浏览器第一次请求相关的图标时，服务器会将相关的文件一次性发送给浏览器，当再需要其他图标时就能够直接从ttf文件中获取图标，减轻服务器的压力，减少请求次数，缩短用户的等待时间。5. vertical-align属性应用下图蓝色标注缝隙所在，图片默认与文字是基线对齐，因此会留有部分区域用于对齐问题下部分区域......
复制链接

扫一扫

专栏目录