cCSS高级技巧
1. 精灵图
- 精灵技术主要针对背景图片使用,把多个小背景图片整合到一张大图中
- 这个大图片也成为sprites 精灵图
- 移动背景图片,background-position
- 移动的距离就是图片的 x、y轴。
- 往上、左移动,数值为负值
- 只用精灵图时要准确测量,每个背景图片的大小和位置
2. 字体图标
1. 应用场景
网页中通用、常用的一些小图标,形式简单
对于复杂的还是使用精灵图
2. 本质:展示的是图标,本质属于字体
3. 使用步骤
-
下载包中的fonts文件夹放在项目的根目录下
-
在css中,声明字体
-
找到下载文件的style.css文件,赋值粘贴
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?czw4wn'); src: url('fonts/icomoon.eot?czw4wn#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?czw4wn') format('truetype'), url('fonts/icomoon.woff?czw4wn') format('woff'), url('fonts/icomoon.svg?czw4wn#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
-
-
字体图标不是寻常的字体,是一种特殊的图标,在下载文件的demo中寻找图标
-
声明字体
font-family: "icomoon";
4、字体图标的追加
把压缩包中的selection.json重新上传,然后选择自己想要的新图标,重新下载压缩包,并替换原来的文件即可
3、CSS三角
.box{
width:0;
height:0;
line-height:0;
font-size:0;
border: 10px solid transparent;
<--四个三角形组成的 -->
<--上三角 -->
border-top-color:red;
}
4. 鼠标样式 cursor
cursor:属性;
5. 轮廓线outline
去掉表单的轮廓线 input{outline:0 或者 outline:none}
文本域的边框线和可调节和光标贴着文本域
<textarea style="outline:none; resize:none"></textarea>
开始和结束标签紧挨着,可以让cursor贴着文本域
6. vertical-align 属性
应用:设置图片或者表单(行内块元素)和文字垂直对齐。
- 解决图片下的空白间隙:
原因:行内块元素。默认与文字是基线对齐- vertical-align:
- display:block
7. 溢出的文字省略号显示
1、单行文本溢出显示省略号
css:
//单行显示
white-space:nowrap;
//文本溢出隐藏
overflow:hidden;
//溢出部分省略号显示
text-overflow:ellipsis;