八、 CSS 高级技巧
?目标:
能够使用精灵图
能够使用字体图标
能够写出 CSS 三角
能够写出常见的 CSS 用户界面样式
能够写出常见的布局技巧
精灵图
为什么需要精灵图
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术。
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。
精灵图的使用
使用精灵图核心:
精灵技术主要针对于背景使用。就是把多个小背景整合到一张大中。
这个大也称为 sprites 精灵图 或者 雪碧图
移动背景位置, 此时可以使用 background-position 。
移动的距离就是这个目标的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动,所以数值是负值。
使用精灵图的时候需要精确测量,每个小背景的大小和位置。
总结
精灵图主要针对于小的背景使用。
主要借助于背景位置来实现---background-position 。
一般情况下精灵图都是负值。(千万注意网页中的坐标:x 轴右边走是正值,左边走是负值, y 轴同理。)
字体图标
字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的,但是缺点很明显。
文件还是比较大的。
本身放大和缩小会失真。
一旦制作完毕想要更换非常复杂。
此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
字体图标的优点
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标。
如果遇到一些结构和样式复杂一点的小,就用精灵图。
字体图标的引入
① 把下载包里面的 fonts 文件夹放入页面根目录下
② 在 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;
}
③ html 标签内添加小图标
④ 给标签定义字体。
span {
font-family: "icomoon";
}
务必保证 这个字体和上面@font-face 里面的字体保持一致
CSS 三角
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
CSS 用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
什么是界面样式
更改用户的鼠标样式
表单轮廓
防止表单域拖拽
鼠标样式
li {cursor: pointer; }
轮廓线
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。
input {outline: none; }
防止拖拽文本域 resize
实际开发中,我们文本域右下角是不可以拖拽的。
textarea{ resize: none;}
vertical-align 属性应用
CSS 的 vertical-align 属性使用场景:经常用于设置或者表单(行内块元素)和文字垂直对齐。
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
语法:
vertical-align : baseline | top | middle | bottom
、表单和文字对齐
、表单都属于行内块元素,默认的 vertical-align 是基线对齐。
此时可以给、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和垂直 居中对齐了。
解决底部默认空白缝隙问题
bug:底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。主要解决方法有两种:
给添加 vertical-align:middle | top| bottom 等。(提倡使用的)
把转换为块级元素 display: block;
溢出的文字省略号显示
单行文本溢出显示省略号--必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
2. 多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题, 适合于 webKit 浏览器或移动端(移动端大部分是 webkit 内 核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。
常见的布局技巧
1. margin 负值运用
让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如 果有定位,则加 z-index)
2. 文字围绕浮动元素
3. 行内块巧妙运用
页码在页面中间显示:
把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;
利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中
4. CSS 三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
CSS 初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对 HTML 文本呈现的差异,照顾浏览器的兼 容,我们需要对 CSS 初始化
简单理解:CSS 初始化是指重设浏览器的样式。(也称为 CSS reset) 每个网页都必须首先进行 CSS 初始化。
这里我们以 京东 CSS 初始化代码为例。
Unicode 编码字体:把中文字体的名称用相应的 Unicode 编码来代替,这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。
比如:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
发表评论 取消回复