CSS学习（5）
<h1 id="css学习5">CSS学习（5）</h1><h2 id="精灵图">精灵图</h2>
<p>使用精灵图核心：</p>
<ol>
<li>精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中。</li>
<li>这个大图片也称为sprites精灵图或者雪碧图</li>
<li>移动背景图片位置，此时可以使用background-position。</li>
<li>移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。</li>
<li>因为一般情况下都是往上往左移动，所以数值是负值。</li>
<li>使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。</li>
</ol>
<h2 id="字体图标">字体图标</h2>
<p>字体图标iconfont展示的是图标，本质属于字体。</p>
<p>优点：轻量级、灵活性、兼容性。适合应对于结构样式比较简单的图标</p>
<h3 id="字体图标的下载">字体图标的下载</h3>
<p>icomoon字库：https://icomoon.io/</p>
<p>阿里iconfont字库：https://www.iconfont.cn/</p>
<h3 id="字体图标的引入">字体图标的引入</h3>
<p>将fonts文件夹放入根目录中</p>
<p>通过css引入到页面中：</p>
<pre><code class="language-css">@font-face {
font-family: 'icomoon';
/* fonts同级目录中有一个style.css中有 */
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf')format('truetype'),
url('fonts/icomoon.svg#SofiaProLight')format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
</code></pre>
<p>在标签中输入fonts同级目录中的html页面中想要图标对应的小框框。</p>
<pre><code class="language-css"><span></span>
</code></pre>
<p>声明字体图标</p>
<pre><code class="language-css">span {
/* 声明字体图标以后就可以用文字属性控制图标了 */
font-family: 'icomoon';
font-size: 100px;
color: pink
}
</code></pre>
<h3 id="字体图标的追加">字体图标的追加</h3>
<p>把原先压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载替换原来的文件即可。</p>
<h2 id="css三角">CSS三角</h2>
<pre><code class="language-css">.box {
/* 大小为0的盒子 */
width: 0;
height: 0;
/* 为了兼容性问题 */
line-height: 0;
font-size: 0;
/* 将除了上边框以外全设置为透明，就能实现显示三角形了 */
border: 10px solid transparent;
border-top-color: teal;
}
</code></pre>
<h2 id="css用户界面样式">CSS用户界面样式</h2>
<h3 id="鼠标样式cursor">鼠标样式cursor</h3>
<p>default：小白 默认</p>
<p>pointer：小手</p>
<p>move：移动</p>
<p>text：文本</p>
<p>not-allowed：禁止</p>
<h3 id="轮廓线outline">轮廓线outline</h3>
<p>outline：0 ｜none；（取消表单的轮廓线）</p>
<h3 id="文本域防止拖拽">文本域防止拖拽</h3>
<p>resize：none</p>
<h3 id="vertical-align">vertical-align</h3>
<p>实现图片或者表单（行内元素或行内块元素）和文字垂直对齐。</p>
<p>图片和文字默认是基线对齐</p>
<p>vertical-align：baseline｜bottom｜middle｜top</p>
<h3 id="溢出文字省略号显示">溢出文字省略号显示</h3>
<p>单行文本溢出显示省略号--必须满足三个条件</p>
<pre><code class="language-css">.span {
/* 先强制一行内显示文本 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
}
</code></pre>
<p>多行文本溢出显示省略号（有兼容性的问题）</p>
<pre><code class="language-css">.mult {
/* 超出部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</code></pre>
<h2 id="css三角形强化">CSS三角形强化</h2>
<pre><code class="language-css">.box {
width: 0;
height: 0;
/* 去掉下边框，调大上边框，这样左右两侧的三角形就可以是自定义的直角三角形了 */
border-top: 100px solid pink;
border-right: 50px solid skyblue;
border-bottom: 0px solid blue;
border-left: 50px solid green;
}
</code></pre>
<h2 id="css的初始化">CSS的初始化</h2>
<p>CSS的初始化也成为CSSreset</p><br><br>
来源：https://www.cnblogs.com/boniii/p/14980238.html
頁:
[1]