入门级 HTML5+CSS3学习笔记（四）

2023-11-26 23:09:58

一、精灵图

CSS 精灵技术（CSS Sprites、CSS 雪碧）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图（sprites）的使用

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

使用精灵图核心总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现—background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

二、字体图标（iconfont）

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

使用步骤
字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：
```
 - 下载 
 - 引入 （引入到我们html页面中）
 - 追加 （以后添加新的小图标）
```
字体图标的下载

icomoon字库 http://icomoon.io 推荐指数 ★★★★★

阿里iconfont字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

字体图标的引入
1). 把下载包里面的 fonts 文件夹放入页面根目录下

2). 在 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;
 }

字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

字体图标的追加

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

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

html 标签内添加小图标
打开 /icomoon/demo.html ，把小方块复制

标签定义字体
需保证 font-family 与 @font-face里面的字体保持一致。

.ifont{
    font-family: 'icomoon';
}

/* 字体申明 */
@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;
  }

<span class="ifont"></span>

三、CSS 三角

绘制矩形三角

.boxRect1{
    width: 0;
    height: 0;
    margin: auto;
    border-top: 50px solid rgb(170, 84, 170);
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

<div class="boxRect1"></div>

效果：

绘制矩形三角

.boxRect1{
    width: 0;
    height: 0;
    margin: auto;
    border-top: 50px solid rgb(170, 84, 170);
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

.boxRect2{
    width: 0;
    height: 0;
    margin: auto;
    border: 30px solid transparent;
    border-top-color: rgb(158, 63, 158);
}

<div class="boxRect1"></div>
<div class="boxRect2"></div>

效果：

四、CSS 用户界面样式

鼠标样式 cursor：li { cursor: pointer; }

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

轮廓线 outline：input { outline: none; }
防止拖拽文本域 resize：textarea{ resize: none; }
vertical-align 属性应用：vertical-align : baseline | top | middle | bottom

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

溢出的文字省略号显示

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

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

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

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

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

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

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

margin负值运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

码农公寓

相关文章