css高级技巧精灵图+字体图标+三角+用户界面样式+vertical-align 属性应用+溢出的文字省略号显示-CSDN博客

本文链接：https://blog.csdn.net/Echo_bx/article/details/115406939

精灵图

(_软件：Adobe Fireworks CS6)

精灵图的使用

使用精灵图的核心：

主要使用于背景图片，将多个小背景图合成一个大的图片中
大图片称为：sprites 精灵图或者雪碧图
使用：
(1) 移动图片位置{background-position(背景位置)}
(2) 移动图片的距离就是目标图片的x和y坐标
{网页中，从x左到右递增，y从上到下递增（x轴右边走是正值，左边走是负值；y轴下边走是正值，上边走是负值）}
一般情况都是往上往左移动，所以都是负值
使用精灵图时要精确测量每个背景图片的大小和位置

示例：

<style>
        body {
            background-color: rgb(34, 29, 61);
        }
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /* 精灵图样式1 */
            background: url(images/sprites.png) no-repeat;
            background-position: -182px 0;
            /* 不平铺  x往左182 y0 */
        }

        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: pink; */
            margin: 200px;
            /* 精灵图样式2 */
            background: url(images/sprites.png) no-repeat -155px -106px;
            /* 可以简写 */
        }
</style>


<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述

字体图标

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

产生原因

图片文件较大
图片放大或缩小会失真
图片制作完后难更改

优点

轻量级：图标字体比图线小，减少了对服务器的请求
灵活性：本质是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器
注意：
字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。

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

使用步骤

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

1.字体图标的下载

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

3.字体图标的追加（以后添加新的小图标）

字体图标的下载

推荐下载网站：

icomoon 字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/

字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

把下载包里面的 fonts 文件夹放入页面根目录下（css样式的根目录里）
在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

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

<style>
 @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;
   font-display: block;
 }
 </style>

html 标签内添加小图标。

   <spa>  </spa>

给标签定义字体。

<style>
 span {
   font-family: "icomoon";
 }
 </style>

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

示例：

在这里插入图片描述

<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';
  font-size: 100px;
  color:pink;
}
</style>

<body>
  <span></span>
  <span></span>
  <!-- 在demo.html里复制 -->
  </body>

在这里插入图片描述

字体图标的追加

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

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
方式:
例如（IcoMoon)

进入页面，点击IcoMoon应用程式
点击Import Icons ，在弹出对话框中找icomoon文件夹里的selectction.json并点击打开
然后在弹出框中选择yes重新加载
点击不在文件夹内的所需要的图标
点击Generate Font
点击Download下载
将旧的icomoon替换为新的icomoon压缩包

css三角

原理

做一个盒子
给一个边框，并将四个边框设为不同的颜色

<style>
  body {
            background-color: rgb(104, 16, 112);
        }
        
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
     
        <body>
    <div class="box1"></div>
    
</body>

在这里插入图片描述

三角制作

做一个没有大小的盒子（没有大小=宽高为零）
给一个边框，并给所需要的边框设置一个需要的颜色（边框的粗细就是三角的大小）
将剩下的边框设为透明

<style>
  body {
            background-color: rgb(104, 16, 112);
        }
        
          .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        <body>
  <div class="box2"></div>
</body>

在这里插入图片描述

示例

<style>
body {
            background-color: rgb(104, 16, 112);
        }
        
.jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            /*所以加line-height和font-size*/
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
    <body>
    <div class="jd">
        <span></span>
    </div>
</body>

在这里插入图片描述

CSS 用户界面样式

鼠标样式 cursor

 li {
 	cursor: pointer; 
 }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	静止

使用的两种方式
1.

<body>
    <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>
</body>

 <style>
li .01 {
 	cursor: default; 
 } 
li .02 {
 	cursor: pointer; 
 } 
li .03 {
 	cursor: move; 
 } 
li .04 {
 	cursor:  text; 
 }
li .05 {
 	cursor:   not-allowed; 
 }
    </style>
<body>
    <ul>
        <li class="01">我是默认的小白鼠标样式</li>
        <li class="02">我是鼠标小手样式</li>
        <li class="03">我是鼠标移动样式</li>
        <li class="04">我是鼠标文本样式</li>
        <li class="05">我是鼠标禁止样式</li>
    </ul>
</body>

轮廓线 outline

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

 input {
 	outline: none;/ outline: 0;
 }

例如

<style>
body {
            background-color: rgb(8, 102, 189);
        }
        input {
            /* 取消表单轮廓 */
            outline: none; 
        }
    </style>
</head>

<body>
    <input type="text">
</body>

未取消时
在这里插入图片描述
取消后

防止拖拽文本域 resize

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

 textarea{ 
 	resize: none;
 }

 <style>
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

例如

未取消时
在这里插入图片描述

取消后
在这里插入图片描述

vertical-align 属性应用

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

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

语法：

vertical-align : baseline | top | middle | bottom

值	描述
baseline	默认。元素位置放在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

图片、表单和文字对齐

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

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

<style>
        img {
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="images/img.png" alt="">1233
</body>

在这里插入图片描述

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

在这里插入图片描述

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

主要解决方法有两种：

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

 <style>
        div {
            border: 2px solid red;
        }
        
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/img.png" alt="">pjys
    </div>
</body>

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

 <style>
        div {
            border: 2px solid red;
        }
        
        img {
            vertical-align: middle;
            /* display: block; 
        }
    </style>
</head>

<body>
    <div>
        <img src="images/img.png" alt="">pjys
    </div>
</body>

在这里插入图片描述

溢出的文字省略号显示

单行文本溢出显示省略号

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

先强制一行内显示文本
超出的部分隐藏
文字用省略号替代超出的部分

代码

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

例如

 <style>
        div {
            width: 140px;
            height: 50px;
            background-color: rgb(197, 25, 54);
            margin: 50px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
    </body>

在这里插入图片描述

多行文本溢出显示省略号

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

超出的部分隐藏
文字用省略号替代超出的部分
弹性伸缩盒子模型显示
限制在一个块元素显示的文本的行数
设置或检索伸缩盒对象的子元素的排列方式

代码

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

例

<style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
    </div>
</body>

在这里插入图片描述

css高级技巧 精灵图+字体图标+三角+用户界面样式+vertical-align 属性应用+溢出的文字省略号显示

css高级技巧

精灵图

精灵图的使用

示例：

字体图标

产生原因

优点

总结：

字体图标的下载

字体图标的引入

示例：

字体图标的追加

css三角

原理

三角制作

示例

CSS 用户界面样式

鼠标样式 cursor

轮廓线 outline

例如

防止拖拽文本域 resize

例如

vertical-align 属性应用

图片、表单和文字对齐

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

溢出的文字省略号显示

单行文本溢出显示省略号

多行文本溢出显示省略号

css高级技巧精灵图+字体图标+三角+用户界面样式+vertical-align 属性应用+溢出的文字省略号显示