CSS学习04

文章目录

    • 1.精灵图
      • 1.1 为什么需要精灵图
      • 1.2 精灵图(sprites)的使用
    • 2.字体图标
      • 2.1 字体图标的产生
      • 2.2 字体图标的优点
      • **2.3** **字体图标的下载**
      • **2.4** **字体图标的引入**
      • 2.5 字体图标的追加
    • 3.CSS 三角
      • 3.1 介绍
    • 4.CSS 用户界面样式
      • 4.1 鼠标样式 cursor
      • 4.2 轮廓线 outline
      • 4.3 防止拖拽文本域 resize
    • 5.vertical-align 属性应用
      • **5.1** **图片、表单和文字对齐**
      • 5.2 解决图片底部默认空白缝隙问题
    • 6.溢出的文字省略号显示
      • 6.1 单行文本溢出显示省略号
      • 6.2 多行文本溢出显示省略号
    • 7.常见布局技巧
      • 7.1. margin负值运用
      • 7.2 文字围绕浮动元素
      • 7.3 行内块巧妙运用
      • 7.4 CSS 三角强化 案例
        • **7.4.1 原理**

1.精灵图

1.1 为什么需要精灵图

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

为什么使用精灵图(目的):

为了有效地减少服务器接收和发送请求的次数提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、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.如果遇到一些结构和样式比较简单的小图标,就用字体图标。

2.如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

使用步骤

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

1.字体图标的下载

2.字体图标的引入 (引入到我们html页面中)

3.字体图标的追加 (以后添加新的小图标)

2.3 字体图标的下载

推荐下载网站:

  • icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

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

  • 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是,免费!

2.4 字体图标的引入

  1. 把下载包里面的 fonts 文件夹放入页面根目录下
  • 字体文件格式

不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

2).Web Open Font Format( .woff )格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+;

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;

2.在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题

 @font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?7kkyc2');src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;}
  1. html 标签内添加小图标。

  2. 给标签定义字体。

 span {font-family: "icomoon";}

注意:务必保证 这个字体和上面@font-face里面的字体保持一致

2.5 字体图标的追加

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

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

3.CSS 三角

3.1 介绍

网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。

做法如下:

 div {width: 0; height: 0;border: 50px solid transparent;border-color: red green blue black;line-height:0;font-size: 0;}
  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

4.CSS 用户界面样式

什么是界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

4.1 鼠标样式 cursor

 li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
在这里插入图片描述

4.2 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

 input {outline: none; }

4.3 防止拖拽文本域 resize

实际开发中,我们文本域右下角是不可以拖拽的。

 textarea{ resize: none;}

5.vertical-align 属性应用

CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline | top | middle | bottom 

在这里插入图片描述
在这里插入图片描述

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

5.2 解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

1.给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)

2.把图片转换为块级元素 display: block;

6.溢出的文字省略号显示

6.1 单行文本溢出显示省略号

单行文本溢出显示省略号–必须满足三个条件:

  /*1. 先强制一行内显示文本*/white-space: nowrap;  ( 默认 normal 自动换行)/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

6.2 多行文本溢出显示省略号

多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)

/*1. 超出的部分隐藏 */
overflow: hidden;/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7.常见布局技巧

巧妙利用一个技术更快更好的布局:

  1. margin负值的运用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. CSS三角强化

7.1. margin负值运用

实现鼠标经过显示边框。
在这里插入图片描述
在这里插入图片描述

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)

7.2 文字围绕浮动元素

效果
在这里插入图片描述

布局示意图
在这里插入图片描述

巧妙运用浮动元素不会压住文字的特性

7.3 行内块巧妙运用

在这里插入图片描述

页码在页面中间显示:

  1. 把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;
  2. 利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中

7.4 CSS 三角强化 案例

7.4.1 原理

在这里插入图片描述

在这里插入图片描述

<style>.box1 {width: 0;height: 0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */border-width: 100px 50px 0 0 ;}</style>
</head>
<body><div class="box1"></div>
</body>

e;
border-left: 0 solid green; */

    /* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */border-width: 100px 50px 0 0 ;
}
```

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22756.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电路分析 day01 一种使能控制电路

本次分析的电路为 一种使能控制电路 &#xff08;站在别人的肩膀上学习&#xff09; 资料来源 &#xff1a; 洛阳隆盛科技有限责任公司的专利 申请号&#xff1a;CN202022418360.7 1.首先查看资料了解本次电路 1.1 电路名称&#xff1a; 一种使能控制电路 1.2 电路功能…

IOS与Android APP开发的差异性

iPhone和 Android是全球最流行的两种移动平台&#xff0c;有许多不同的开发者开发了应用程序&#xff0c;并将它们发布到市场上。虽然大多数开发者都使用了这两个平台&#xff0c;但您仍然需要了解它们的差异。 虽然 iOS和 Android两个平台都是基于 Linux&#xff0c;但它们却…

C语言 — 指针进阶篇(上)

前言 指针基础篇回顾可以详见&#xff1a; 指针基础篇&#xff08;1&#xff09;指针基础篇&#xff08;2&#xff09; 指针进阶篇分为上下两篇,上篇介绍1 — 4&#xff0c;下篇介绍5 — 6 字符指针数组指针指针数组数组传参和指针传参函数指针函数指针数组指向函数指针数组的…

Java线程状态与状态转换

前言 在Java中&#xff0c;线程是多任务处理的基本单位&#xff0c;它可以并行执行多个任务。线程的状态描述了线程在其生命周期中的不同阶段。Java线程的状态可以分为以下几种&#xff1a; 线程状态 状态解释新建状态&#xff08;New&#xff09;线程被创建但尚未启动就绪状…

复习第五课 C语言-初识数组

目录 【1】初识数组 【2】一维数组 【3】清零函数 【4】字符数组 【5】计算字符串实际长度 练习&#xff1a; 【1】初识数组 1. 概念&#xff1a;具有一定顺序的若干变量的集合 2. 定义格式&#xff1a; 数组名 &#xff1a;代表数组的首地址&#xff0c;地址常量&…

“AI+教育”:景联文科技高质量教育GPT题库助力教学创新

去年年底&#xff0c;OpenAI推出ChatGPT&#xff0c;掀起AI热潮&#xff0c;教育作为“AI”应用落地的关键场景&#xff0c;再次受到广泛关注。 “AI教育”的快速发展&#xff0c;是受到技术、需求和政策三重因素共同驱动的结果。 在技术方面&#xff0c;随着人工智能技术的不断…

【专题速递】在线K歌、云化XR、咔嚓剪辑和FFmpeg直播能力更新计划

// 在线K歌的技术方案选型有哪些&#xff1f;对于沉浸式XR我们又有什么新的思考&#xff1f;高性能低依赖的剪辑视频需要具备什么技术&#xff1f;7月29日LiveVideoStackCon2023上海站客户端体验与性能优化专场&#xff0c;为您解答。 客户端体验与性能优化 客户端作为直接面…

基于Python编写一个B站全自动抽奖的小程序

本文将利用Python编写一个B站全自动抽奖的小程序&#xff0c;可以实时监控自己关注的UP主&#xff0c;如果关注的UP主中有人发布了抽奖的动态&#xff0c;就自动参与这个抽奖。这样就能不错过任何一个可以暴富的机会了。需要的可以参考一下 导语 应好友邀请&#xff0c;帮他写…

Qt 桌面系统设计

文章目录 前言一、项目介绍二、界面布局三、按键图标四、桌面背景五、实现led功能总结 前言 这篇文章介绍 一个Qt 桌面系统的项目&#xff0c;大家可以在此基础上加以改进&#xff0c;实现更多的功能。 一、项目介绍 可以看到 这个桌面系统上分为两部分&#xff0c;左边是 三个…

C++虚函数学习

VC6新建一个单文档工程&#xff1b; 添加一个一般类&#xff1b; 生成的Shape.cpp保持不变&#xff1b; #include "Shape.h"#ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]__FILE__; #define new DEBUG_NEW #endif// // Construction/Destruction //Shap…

基于C/S架构工作原理序号工作步骤和理论的区别

基于C/S架构工作原理序号工作步骤和理论的区别 SSH 概念 对称加密linux 系统加密&#xff0c;就是加密和揭秘都是使用同一套密钥。 非对称加密有两个密钥&#xff1a;“私钥”和“公钥”。私钥加密后的密文&#xff0c;只能通过对应的公钥进行揭秘。而通过私钥推理出公钥的…

MyBatis 的架构

MyBatis 的架构 MyBatis 是一个基于 Java 的持久层框架&#xff0c;可以将 SQL 语句和 Java 代码进行分离&#xff0c;通过 XML 或注解的方式配置 SQL 语句并执行&#xff0c;从而实现数据访问的功能。MyBatis 的架构包括以下几个部分&#xff1a; SqlSessionFactory&#xff…