字体样式
color | 为字体指定颜色 |
font-size | 为文字指定大小 |
font-family | 为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体 |
font-style | 用于打开和关闭斜体文本 |
font-weight | 为字体设置粗细程度 |
text-align | 文字排列方式 |
text-decoration | 设置或者取消文本修饰 |
text-transform | 设置或者取消字体改变 |
text-shadow | 设置或者取消字体改变 |
1.color为字体指定颜色
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-144-1024x598.png)
2.font-size为字体指定文字大小,取值可以为绝对单位或者相对单位
3.font-family为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体。
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-145.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-146-1024x517.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-147-1024x512.png)
目前比较流行的开源字体图标库有:
font-awesome http://fontawesome.dashgame.com/
iconfont http://www.iconfont.cn/
4.font-style用于打开和关闭斜体文本
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-148.png)
5.font-weight为字体设置粗细程度
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-149.png)
6.text-align文字排列方式
- left左对齐
- center居中
- right右对齐
7.text-transform允许字体改变,文本变形
- none防止任何改变
- uppercase将文本转换为大写
- lowercase将文本转换为小写
- capitalize将所有单词第一个字母转换为大写
- full-width转换为类似于一个等宽字体
8.text-decoration
- 设置或者取消文本修饰
- 速写属性line style color
9.text-decoration-line线的种类
- none取消所有文本修饰
- underline为文本添加下划线
- overline为文本添加上划线
- line-through为文本添加删除线
10.text-decoration-style线的样式
solid(实线)、wavy(波浪线)、dashed(虚线)、dotted(点状线)、double(双实线)
11.Text-decoration-color颜色
12.text-shadow设置或者取消文本阴影
语法:text-shadow:h-shadow v-shadow blur color;
取值:
- none取消所有阴影
- h-shadow必需。水平阴影的位置。允许负值
- v-shadow必需。垂直阴影的位置。允许负值
- blur可选。模糊的距离
- color可选。阴影的颜色。参阅CSS颜色值
13.列表的默认样式
- list-style-type 设置列表项标志类型
- list-style-image 自定义设置列表项标志
- list-style-position 设置列表项标志出现的位置
- list-style列表样式的速记写法[<type>][<image>][<position>]
14.默认样式
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-150-1024x384.png)
15.list-style-type设置列表项标志类型 一般用none
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-151.png)
16.cursor调整光标悬浮到链接上的时候光标的形状
- url 需使用的自定义光标的URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由URL定义的可用光标。鼠标样式栈url('./images/zhankai.png'),help
- default默认光标(通常是一个箭头)
- auto默认。浏览器设置的光标
- pointer手型
- crosshair十字交叉
17.其他样式
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-152.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-153-1024x607.png)
滚动条
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-154-1024x534.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-155-1024x701.png)