一、字体样式
1.color:为字体指定颜色
字体颜色的取值:关键字、RGB、6位16进制、RGBA、HSL、HSLA
2.font-size
为字体指定文字大小,取值可以为绝对单位或者相对单位。
3.font-family
为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体。
注意:使用字体栈可以一次性指定多个字体,如果第一个字体无效,则使用下一个字体,以此类推。一般将字体栈中最后一个字体设置为通用字体。
p {font-family: "Microsoft YaHei",arial,sans-serif;}
我们还可以通过引入第三方字体图标库来实现更美化的效果,目前比较流行的开源字体图标库有
font-awesome Font Awesome,一套绝佳的图标字体库和CSS框架
iconfont iconfont-阿里巴巴矢量图标库
4.font-style
用于打开和关闭斜体文本
取值:
normal 【默认】正常字体,关闭斜体、
italic 斜体 、
oblique 模拟斜体
5.font-weight
为字体设置粗细程度
取值:
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度(值越大字体越粗)
6.text-align
文字排列方式
取值:left 左对齐 、
center 居中 、
right 右对齐
7.text-transform :允许字体改变,文本变形
属性值:none 防止任何改变 、uppercase 将文本转换为大写 、lowercase 将文本转换为小写 、capitalize 将所有单词第一个字母转换为大写 、full-width 转换为类似于一个等宽字体
8.text-decoration :设置或者取消文本修饰
9.text-decoration-line线的种类
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
10.text-decoration-style 线的样式
solid(
实线
) 、
wavy(
波浪线
)
、
dashed(
虚线
)
、
dotted(
点状线
)
、
double(
双实线
)
11.text-decoration-color
颜色
二、其他样式(比较常用)
1.cursor :调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标
pointer 手型
crosshair 十字交叉
wait 等待
help 帮助
move 移动
text 文本
2.line-height:设置文本的行高
(常用)
取值为绝对单位或者相对单位
3.outline:类似border,但是不占据屏幕空间
4.display
:显示方式(经常放在页面的盒子布局中)
inline 行内显示,宽高无效
block 块级显示,宽高有效
inline-block 行内显示同时宽高有效
none 不显示,不占据屏幕空间
5.visibility:显示与隐藏
hidden
隐藏,占据屏幕空间
visible
显示
6.opacity:透明度,0-1之间的取值,取值为0的时候隐藏,占据屏幕空间
7.
overflow:溢出处理
hidden
超出内容隐藏
auto
超出产生滚动条
scroll
滚动条