一、border图形
1.边框的形状
◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:
◼ 假如我们将border宽度设置成50会是什么效果呢?
- 如果我们进一步, 将另外三边的颜色去除呢?
- 如果我们将这个盒子旋转呢?
◼ 所以利用border或者CSS的特性我们可以做出很多图形:
- https://css-tricks.com/the-shapes-of-css/#top-of-site
二、Web网络字体
1.认识Web字体
◼ 在之前我们有设置过页面使用的字体: font-family
- 我们需要提供
一个或多个
字体种类名称,浏览器会在列表中搜寻
,直到找到它所运行的系统上可用的字体
。 - 这样的方式完全没有问题,但是对于传统的web开发人员来说,字体选择是
有限
的; - 这就是所谓的
Web-safe 字体
; - 并且这种默认可选的字体并不能进行一些
定制化
的需求;
◼ 比如下面的字体样式, 系统的字体
肯定是不能实现的
◼ 那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts
即可
2.Web fonts的工作原理
首先, 我们需要通过一些渠道
获取到希望使用的字体(不是开发来做的事情):
- 对于某些
收费
的字体, 我们需要获取到对应的授权; - 对于某些公司定制的字体, 需要设计人员来
设计
; - 对于某些
免费
的字体, 我们需要获取到对应的字体文件
;
其次, 在我们的CSS代码当中使用该字体(重要):
- 具体的过程看后面的操作流程;
最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器
中;
用户的角度:
- 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
- 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体;
- 在浏览器中使用对应的字体显示内容;
3.使用Web Fonts
通过如下的方式获取到了字体文件:
第一步:在字体天下网站下载一个字体
- https://www.fonts.net.cn/fonts-zh-1.html
- 默认下载下来的是
ttf文件
;
第二步:使用字体;
使用过程如下:
- 将字体放到对应的
目录
中 - 通过
@font-face
来引入字体, 并且设置格式 - 使用字体
注意:
@font-face
用于加载一个自定义的字体;
4.web-fonts的兼容性
我们刚才使用的字体文件是 .ttf
, 它是TrueType
字体.
- 在开发中某些浏览器可能
不支持该字体
, 所以为了浏览器的兼容性问题
, 我们需要有对应其他格式
的字体;
TrueType字体:拓展名是 .ttf
- OpenType/TrueType字体:拓展名是 .ttf、.otf, 建立在TrueType字体之上
- Embedded OpenType字体:拓展名是 .eot, OpenType字体的压缩版
- SVG字体:拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体: 拓展名是 .woff,建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件:
- https://font.qqe2.com/# 暂时可用
5.web fonts兼容性写法
◼ 如果我们需要具备很强的兼容性, 那么可以如下格式编写:
这被称为"bulletproof @font-face syntax(刀枪不入的@font-face语法)":
这是 Paul Irish
早期的一篇文章提及@font-face
后开始流行起来 (Bulletproof @font-face Syntax)。
src 用于指定字体资源
- url 指定资源的路径
- format 用于帮助浏览器快速识别字体的
格式
;
三、Web字体图标
1.认识字体图标
思考:字体可以设计成各式各样的形状,那么能不能把字体直接设计成图标的样子呢?
- 当然可以,这个就叫做
字体图标
。
字体图标的好处:
- 放大
不会失真
- 可以
任意切换颜色
- 用到很多个图标时,文件相对图片
较小
字体图标的使用:
- 登录阿里icons(https://www.iconfont.cn/)
- 下载代码,并且拷贝到项目中
将字体文件和默认的css文件导入到项目中
2.字体图标的使用
字体图标的使用步骤:
-
第一步: 通过link引入
iconfont.css文件
-
第二步: 使用字体图标
使用字体图标常见的有两种方式:
- 方式一: 通过对应字体图标的
Unicode
来显示代码; - 方式二: 利用已经编写好的
class
, 直接使用即可;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 方式二:引入css,通过类选择器来添加图标 -->
<link rel="stylesheet" href="./css/iconfont.css">
<style>
/* 方式一,使用unicode码 */
@font-face {
font-family: myicon;
src: url(./fonts02/iconfont.ttf);
}
.box {
margin: 0 auto;
height: 50px;
background-color: orange;
text-align: center;
}
span.planA {
font: 32px/1.5 myicon;
}
span.planB {
font-size: 32px;
}
</style>
</head>
<body>
<div class="box">
<span class="planA"></span>
<span class="planB iconfont icon-douyin"></span>
</div>
</body>
</html>
四、CSS精灵图
1.认识精灵图 CSS Sprite
什么是CSS Sprite
?
- 是一种CSS图像合成技术,将各种小图片合并到一张图片上,然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为:CSS雪碧、CSS精灵
使用CSS Sprite的好处
- 减少网页的http请求数量,加快网页响应速度,减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰,只需要针对一张集合的图片命名
Sprite 图片制作(雪碧图、精灵图)
- 方法1:Photoshop, 设计人员提供
- 方法2:https://www.toptal.com/developers/css/sprite-generator
2.精灵图的使用
精灵图如何使用呢?
-
精灵图的原理是
通过只显示图片的很小一部分来展示
的; -
通常使用背景:
-
设置对应元素的宽度和高度
-
设置精灵图作为背景图片
-
调整背景图片的位置来展示
-
如何获取精灵图的位置
- http://www.spritecow.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
margin: 0 auto;
background-color: orange;
text-align: center;
}
.box {
display: inline-block;
width: 176px;
height: 69px;
background: url(../../images/163music_sprite01.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
五、cursor属性
cursor 可以设置鼠标指针(光标)在元素上面时的显示样式
cursor 常见的设值有
auto
:浏览器根据上下文决定指针的显示样式,比如根据文本和非文本切换指针样式default
:由操作系统决定,一般就是一个小箭头pointer
:一只小手,鼠标指针挪动到链接上面默认就是这个样式text
:一条竖线,鼠标指针挪动到文本输入框上面默认就是这个样式none
:没有任何指针显示在元素上面