CSS3

最新推荐文章于 2024-08-07 14:19:47 发布

伤悲0914

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量131

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/qq_44228272/article/details/108738890

版权

css3

前端三要素：html+css+js

一、CSS的字体样式

1.color 为字体指定颜色
2.font
①font-size:指定文字的大小
②font-family:指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
③font-style:设置文字的斜体
④font-weight:设置文字的粗细程度
font中属性的简写顺序：font:font-style font-variant font-weight font-size line-height font-family
3.text
①text-align: 文字的排列方式（left right center）
②text-decoration: 文本修饰
text-decoration-line:(overline underline下划线 line-through 删除线)
③text-transfrom: 字体改变
（uppercase 转化为大写 lowercase 转化为小写 capitalize 将所有单词的第一个字母转化为大写）
④text-shadow:设置文本阴影
（h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色）

二、CSS的字体布局

1.list-style-type:设置列表的类型
2.list-style-image：（url指定图像路径）
3.list-style-position：设置文本的位置，方向
list-style的速记写法： list-style:type image position

三、在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库。我们总共有四种方式。

一.线上fontawesome（中文网-字体图标）

1.打开BootCDN（中文网），搜索font，在font-awesome中找到最新版本，打开复制link标签。将所复制的粘贴到里面。

2.打开Font Awesome(中文网)，点击导航栏上的“图标库”，找到需要的图标，打开之后，点击“复制源码”，将复制的代码粘贴到你说需要的地方。（复制的图标名）

二.线下

1.先将所需要的图标下载到本地。然后将包含图标的文件夹放到你所创建的文件下面。

2.在里面创建标签，将你导入的文件导入到里面。

3.在Font Awesome里面复制图标的名字，放在你所需要的地方。

三.Iconfont中的(unicode引用)

1.打开Iconfont这个网页，先将自己所需要的图标添加到购物车当中，再单击“资源管理”中的“我的项目”。

2.点击“Unicode”中的“点此复制代码”，将复制的代码，粘贴到

3.将下面这段代码复制粘贴到

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}