【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。本文主要介绍精灵图、字体图标、CSS三角、用户界面样式、vertical-align、常见布局技巧、初始化
思维导图
第一章 精灵图
整合了网页中小背景图像的一张图片。
王者荣耀精灵图
1.1 为什么使用精灵图
一个网页中往往会应用很多小的背景图像作为修饰。当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)
1.2 精灵图的使用
通过移动背景图片位置(x和y坐标)来获取需要的背景，通过background-position实现。
注意: 在网页中向右为x正方向，向下为y正方向.因为一般情况下是向上向左移动，所以数值通常是负值
示例： 取出图片中的D
第一步，测量出需要的背景图片的大小，给盒子设置对应的高度
第二步，测量出盒子左上角到背景图片左上角的距离(这就是精灵图需要移动的距离，注意是负值)
.d {display: inline-block;width: 100px;height: 116px;background: url(images/abcd.jpg) no-repeat -360px 0;
}
效果如图
实际开发中可以使用工具(比如说fireworks)帮助我们更精确地测量。
练习： 在这张图上切出名字缩写
精灵图可以降低服务器压力、提高页面加载速度，但是缺点很明显
- 图片文件还是比较大
- 图片本身放大或者缩小会失真
- 一旦图片制作完成想要更换非常麻烦
此时，字体图标iconfont的出现很好地解决了以上问题
第二章 字体图标
字体图标的使用分为三步：
- 字体图标的下载
- 字体图标的引入
- 字体图标的追加
2.1 字体图标的优点
- 轻量级： 字体图标比图像文件要小。一旦字体加载了，图标马上就会渲染出来，减少了服务器请求
- 灵活性： 本质其实是文字，可以随意地改变颜色、产生阴影、透明效果、旋转等
- 兼容性： 几乎支持所有的浏览器
总结：
- 如果遇到一些结构和样式比较简单的小图标，用字体图标
- 如果遇到一些结构和样式比较复杂的小图片，用精灵图
- 因此字体图标不能代替精灵技术，只是对图标部分技术的提升和优化
2.2 字体图标的下载
字体图标需要在网上下载之后，才可以引入HTML中使用
推荐下载网站：
- icomoon：IcoMoon成立于2011年，推出第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。(教程)
- 阿里iconfont字库：这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 同样是免费的！
2.3 字体图标的引入
1. 把fonts文件夹放到页面根目录
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
| 格式 | 支持的浏览器 |
|---|---|
| .ttf | Windows和Mac的最常见的字体。IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+ |
| .wolf | IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+ |
| .eot | IE4+(IE专用字体) |
| .svg | 是基于SVG字体渲染的一种格式。Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ |
2. 在 CSS 样式中全局声明字体
把这些字体文件通过引入到我们页面中。一定注意字体文件路径的问题
在icomoon文件中有style.css文件，将红框内的代码写入CSS
3. html 标签内添加图标
打开下载包中demo.html页面
复制需要的图标到HTML
<span></span>
4. 给标签定义字体
span {font-family: 'icomoon';
}
5. 完整代码
<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';}</style><span></span>
2.4 字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 从新上传，然后选中需要的新图标，重新下载压缩包，替换原来的文件即可。
第三章 CSS三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标
原理
div {/* 宽和高一定要设置为0 */width: 0;height: 0;/* 行高和字体大小设置为0是为了确保兼容性 */line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;
}
由这个例子我们可以看出只要将需要的三角部分以外的三边设置为透明色即可得到三角
.box2 {width: 0;height: 0;margin: 100px auto;/* 确保兼容性 */line-height: 0;font-size: 0;border: 100px solid transparent;border-left-color: pink;
}
练习： 完成如下图像(提示：子绝父相)
第四章 用户界面样式
更改一些用户操作样式，以便提高用户体验
4.1 鼠标样式cursor
设置或检索在元素上移动的鼠标指针采用何种光标形状
| 属性值 | 描述 |
|---|---|
| default | 默认样式 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
示例
<ul><li style="cursor: default;">我是默认的小白鼠标样式</li><li style="cursor: pointer;">我是鼠标小手样式</li><li style="cursor: move;">我是鼠标移动样式</li><li style="cursor: text;">我是鼠标文本样式</li><li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
4.2 轮廓线outline
表单和文本域获得焦点后默认会出现边框，设置outline:0;或者outline:none后就可以去掉
示例
input,
textarea {outline: 0;
}
4.3 防止拖动文本域resize
文本域默认是可以被拖拽调整大小的。但是在实际开发中，我们不希望文本域被拖拽，避免影响布局，这时就可以使用resize:none
示例
<style>textarea {resize: none;}</style><!-- 防止用户拖拽文本域 -->
<!-- 注：文本域尽量写在一行，否则光标位置可能不在顶格 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
第五章 vertical-align
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 (块级元素的垂直对齐可以通过line-height调整)
| 属性值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| top | 元素的顶端与行中最高元素的顶端对齐 |
| middle | 元素防止在父元素的中部 |
| bottom | 元素顶端与行中最低元素的顶端对齐 |
5.1 图片与文字垂直居中
图片、表单都是行内块元素，默认的vertica-align是基线对齐。设置为middle即可让文字和图片居中对齐
<img src="images/ldh.jpg" alt="">pink老师叫刘德华
默认样式baseline，基线对齐
middle，居中(中线)对齐
img {vertical-align:middle;
}
5.2 解决图片底侧有空白缝隙
图片底侧会有空白缝隙，原因是行内块元素会和文字基线对齐
示例
<div><img src="images/ldh.jpg" alt="">刘德华</div>
解决方法有两种：
- 给图片添加vertical-align:middl | top | bottom等。(提倡)
- 把图片转换为块级元素
第六章 溢出的文字用省略号显示
6.1 单行文本
示例
<style>div {width: 150px;height: 120px;margin: 100px auto;background-color: skyblue;/* 文本溢出时自动换行，默认 *//* white-space: normal; *//* 1.文本溢出时也还是一行显示 */white-space: nowrap;/* 2.超出的部分隐藏 */overflow: hidden;/* 3.用省略号替代超出的部分 */text-overflow: ellipsis;}</style><div>啥也不说了，此处省略一万字
</div>
6.2 多行文本
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核)
<style>div {width: 150px;/* 要严格控制高度，不然会出现显示问题 */height: 43px;margin: 100px auto;background-color: skyblue;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素排列方式 */-webkit-box-orient: vertical;}</style><div>啥也不说了，此处省略一万字。此处省略一万字。此处省略一万字
</div>
注意要严格控制盒子大小(控制台细调)，否则会出现显示问题。
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
第七章 常见布局技巧
7.1 margin负值的妙用
如图，五个盒子都设置了边框，中间相邻的边框重叠会导致边框变粗(例如1px的边框变成2px)。按照以前的做法是去掉每个盒子的右边框，再利用层叠性为最后一个边框设置右边框，非常不简洁。利用margin负值就能很好解决这个问题
示例
<style>ul li {float: left;list-style: none;width: 200px;height: 300px;border: 1px solid red;margin-left: -1px;}</style>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
原理：margin:-1px;让每个盒子都向左移动1px，正好压住相邻盒子边框。(盒子设置了左浮动，会自动占据最左侧的位置，不会出现同时移动的现象)
但是此时如果我们希望鼠标经过盒子显示不同样式时，会出现问题
鼠标经过4号盒子时右边框没有变颜色，这是因为5号盒子压住了4号。解决方法很简单，提高鼠标经过盒子的优先级即可
- 如果盒子没有定位，则添加相对定位即可以使盒子优先级提高
ul li:hover {position: relative;border: 1px solid blue;
}
- 如果盒子有定位，则利用z-index提高层级
ul li:hover {border: 1px solid blue;z-index: 1;
}
7.2 文字围绕浮动元素
由于浮动元素不会压住文字(浮动最初就是为了做文字环绕效果)，所以对于左图右文字的布局可以做一些简化：只为图片元素设置浮动
示例
<style>* {margin: 0;padding: 0;}/* 设置大盒子样式 */.box {width: 300px;height: 70px;margin: 100px auto;padding: 5px;background-color: pink;}/* 图片设置浮动之后文字就在另一侧显示 */.pic {float: left;width: 120px;height: 60px;margin-right: 10px;}.pic img {width: 100%;}</style><div class="box"><div class="pic"><img src="images/img.png" alt=""></div><p>从善如登，虽难可达昆仑。从恶如崩，虽至昆仑亦无用</p>
</div>
7.3 行内块元素妙用
行内块元素之间默认有空隙，可以设置大小和高度，通过父元素text-align:center;即可实现居中显示。非常适合写页码模块
示例
代码都是CSS基础部分知识，这里不做讲解，只是提供思路
<style>* {margin: 0;padding: 0;}ul {margin: 100px 0;text-align: center;}ul li {display: inline-block;width: 36px;height: 36px;border: 1px solid black;list-style: none;text-align: center;}ul li a {background-color: #fff;line-height: 36px;font-size: 14px;text-decoration: none;}.prev,.next {width: 80px;}.selected,.elli {border: none;}ul input {width: 40px;height: 36px;background-color: #fff;border: 1px solid #ccc;outline: none;}ul button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
<ul><li class="prev"><a href="#"><<上一页</a></li><li class="selected"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li class="elli"><a href="#">...</a></li><li class="next"><a href="#"><<下一页</a></li>到第<input type="text">页<button>确定</button>
</ul>
7.4 CSS三角强化
如图，红色实心部分是由两部分组成的：矩形盒子+三角(但是样式与第三章的三角不同)。
.box {width: 0;height: 0;/* 上边框设置三角的高border-top: 20px solid red;右边框设置三角的底border-right: 8px solid green;border-bottom: 0px solid blue;border-left: 0px solid pink; */border-width: 20px 8px 0 0;border-style: solid;border-color: blue pink transparent transparent;}
注意： 这里只是为了演示才将上边框设置为蓝色，实际使用时三个边框都是设置为透明色
示例
<style>.price {width: 160px;height: 24px;border: 1px solid red;margin: 100px auto;line-height: 24px;}.miaosha {position: relative;float: left;width: 90px;height: 100%;margin-right: 8px;background-color: red;color: #fff;font-weight: 700;font-size: 16px;text-align: center;}.miaosha i {position: absolute;top: 0;right: 0;width: 0;height: 0;border-width: 24px 10px 0 0;border-style: solid;border-color: transparent #fff transparent transparent;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style><div class="price"><span class="miaosha">￥1650<i></i></span><span class="origin">￥5088</span>
</div>
第八章 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，保证兼容性，需要对CSS进行初始化
以京东的CSS初始化为例
/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}/* 链接常用的初始化 */
a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好(用中文部分浏览器识别不出来会乱码) */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}/* 元素隐藏 */
.hide,
.none {display: none
}/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角相关推荐
- 【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
- CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
- CSS精灵图及字体图标
一.精灵图(重点) 1.1为什么需要精灵图 网页中往往会有很多的小背景图像作为修饰,当频繁向服务器发送请求时,服务器压力过大,降低加载速度. 使用精灵图的目的:减少服务器的请求次数,提高加载速度 例子 ...
- HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式 更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
- 【css】i标签icon图标旋转样式
[css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式 代码示例: <i class="el-icon-refresh&quo ...
- html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
- php 字体倾斜,CSS中font-style定义字体倾斜体样式的代码示例
本篇文章给大家带来的内容是关于CSS中font-style定义字体倾斜体样式的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.常用斜体语法 常用字体样式设置font-st ...
最新文章
- 自古帝王多短命，假如皇帝也懂负载均衡算法...
- 用Anko和Kotlin实现Android上的对话框和警告提示（KAD 24）
- 以下哪个选项不能减少用户计算机,2017年cad考试选择题「附答案」
- Python获取本机所有网卡的MAC地址
- 请问我应该怎么做，才能让前端的基础打牢固？
- 简单报价单模板_圣诞节祝福邮件必这样写【附件参考模板BY埃马】
- Java抓取电脑屏幕
- 省选专练[USACO18JAN]Stamp Painting
- 工程实践中最常用的10大数据结构与算法讲解
- Chrome OS 72.0.3626.117 发布
- 使用jpeglib直接把NV12转为jpeg文件的代码
- python getopt的用法
- 2. Mysql 升级 与 升级后 mysql --version 和 select version() 不一致问题
- php框架 tp laravel,TP框架和Laravel框架的区别是什么
- 【图像配准】基于sift算法实现图像配准matlab源码
- 第八十六章 Caché 函数大全 $ZDATETIMEH 函数
- 完美池宇峰畅谈创业点滴 男怕入错行
- 可爱猫咪，用 CSS 告诉你为何大橘为重！！
- 使用代理抓取反爬微信文章
- java水果爆炸动画_5分钟快速实现Android爆炸破碎酷炫动画特效的示例