CSS的高级技巧--精灵图/字体图标/特殊样式/文字溢出等

CSS高级技巧

精灵图

此技术是为了有效减少服务器接收和发送请求的次数,提高页面的加载速度

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

精灵图(sprites)的使用:

  • 精灵技术主要针对背景图片使用,就是把多个小背景图片整合到一张大图片上。
  • 大图片称为sprites
  • 移动背景图片位置,可以用 background-position
  • 移动的距离就是目标图片的 x 和 y 坐标,注意网页中的坐标有所不同
  • 上正下负,右正左负,因为一般情况下都是向上或左移动,所以数值为负值
  • 使用精灵图时需要精确测量,每个小背景图片的大小和位置

例:

background: url(images/1.png) no-repeat -40px -180px;
或:
background-position:-40px -180px;

字体图标

字体图标主要用于网页中通用的,常用的一些小图标
(精灵图也可,但精灵图存在以下缺点:
1.图片文件还是比较大的
2.图片本身放大或缩小会失真
3.一旦图片制作完毕,想更换会很麻烦

字体图标(iconfont):展示的是图标,本质属于字体)
优点:

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

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

步骤:

  1. 字体图标的下载:
    icomoon字库: http://icommon.io
    阿里iconfont字库: http://www.iconfont.cn/

2.字体图标的引入

  • 把下载包里的fonts文件夹放入页面根目录下
  • 在css样式中全局声明字体,即把这些字体文件通过css引入到页面中(注意路径) 声明从下载包里的style.css文档中复制即可
    例:
/*字体图标*/
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?o31kxg');
    src:url('fonts/icomoon.eot?o31kxg#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?o31kxg') format(‘truetype‘),
        url(‘fonts/icomoon.woff?o31kxg‘) format(‘woff‘),
        url(‘fonts/icomoon.svg?o31kxg#icomoon‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
    font-display:block;
}

3.字体图标的使用

/*style中代码*/
span{
font-family: 'icomoon';
.....其他样式...
}

/*body中代码*/
<span >字体图标 </span>

///字体图标从下载包的html文件中复制下来(一般为一个小框)

字体图标的追加:把需要添加的字体图标放到原来的字体文件中,然后把压缩包内的.json文件重新上传,然后选中自己想要的新的图标,重新下载压缩包,并替换原来的文件即可

三角

 .box{
        width: 0;
        height: 0;   //宽,高,必须设置为0
        line-height:0;  //此句代码是为了照顾浏览器的兼容性
        font-size:0;   //此句代码是为了照顾浏览器的兼容性
        border: 10px solid transparent; //把边框设置为透明,三角形大小取决于border值的大小
        border-left-color: #000;  //设左边框为粉红色将会得到一个三角尖朝右边的三角形        
      }

用户界面样式

即更改用户操作的样式(例:鼠标变成小手),以提供更好的用户体验
1.更改鼠标样式

li {   cursor : 属性值  }

//属性值如下:
default:         默认值
pointer:          小手
move:            移动
text:             文本
not-allowed:     禁止

2.表单轮廓线
(1) 给表单添加 outline:0;或者outline:none;样式后,就可以去掉默认的蓝色边框

input  {  outline:0;   }

(2) 防止文本域被拖拽

textarea {   resize : none ;  }

vertical-align的应用

经常用于设置图片或者表单(行内块元素)和文字垂直对齐
只对行内元素或行内块元素有效

语法:

 vertical-align :属性值

baseline :默认,元素放在父元素的基线上
top :把元素的顶端与行中最高元素的顶端对齐
middle :把此元素放在父元素的中部
bottom :把元素的顶端与行中最低的元素的顶端对齐

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

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

解决方法:(两种)
1.给图片添加 vertical-align:属性值;(推荐)

2.把图片转换为块级元素

文字溢出省略号显示

1.单行文字溢出省略号显示

必须满足三个条件

/*先强制一行内显示文本*/
white-space : nowrap ;
/*超出的部分隐藏*/
overflow : hidden ;
/*文字用省略号替代超出的部分*/
text-overflow : ellipsis ;

2.多行文字溢出省略号显示

此法有较大兼容性问题,适合WebKit浏览器或者移动端

overflow : hidden ;
text-overflow : ellipsis ;
/*弹性伸缩盒子模型显示*/
display : -webkit-box ;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp : 2 ;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient : vertical ;

margin负值的运用

给margin-left/right 设置一个负值,让它刚好压住相邻盒子边框

若要鼠标经过时出现颜色边框,用此法会使盒子有一侧不出现颜色边框。

解决方法:

提高当前盒子层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加 z-index

布局技巧

只要给父元素添加:text-align : center; 父元素内所有元素都会水平居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值