CSS的文本属性

CSS

文本属性

font-size 字体大小

​ 单位：px.pt.em等 12pt=16px 1em=16px 浏览器默认是16px 设计图多为12px
      em是相对父级单位,rem是根元素相对单位（html）

​ 最小字号是12px 建议设置偶数像素

color 字体颜色

​      color:red/#ff0/rgb(255,0,0);(0-255)

font-family 字体

​ 字体为中文或英文有空格时加引号 多个字体一起用时用逗号隔开

font-weight 加粗

​    font-weight:bolder(更粗)/bold(加粗)/normal(常规)

​ 或

   font-weight:100-900(100-500 不加粗 600-900 加粗)

font-style 倾斜

    font-style:italic/oblique/normal

line-height 行高(两行字基线距离)

​      line-height:16px/1/100%(单倍行距 可以清除文字自带的间距)
​      line-height=height 时单行文本垂直居中

注：行高具有继承性，子元素没有设置行高 父元素行高为1.5时 会继承父元素行高的1.5

​ 此时子元素的行高为：子元素的文字大小*1.5

font 简写

​ 是font-style,font-weight,font-size/line-height,font-family的简写 不能改顺序,且必须指定font-size和font-family才有效.

​ font-weight和font-style可以交换位置，font-size/line-height不能交换位置

​ eg:(font:italic 800 70px/80px “楷体”)

text-align 文本对齐

​    text-align:left/right/center/justify(水平两端对齐 仅多行有效)

​    text-align-last:justify(单行时水平两端对齐 )

text-decoration 文本修饰

text-decoration:none(无)/underline(下划线)/overline(上划线)/line-through(删除线)

text-indent 首行缩进

​ 可取负值 仅对第一行有效

​ 字间距 中文汉字 letter-spacing

​ 词间距 英文单词 word-spacing

text-transform 设置对象中文本大小写

text-transform:none/capitalize/uppercase/lowercase;

属性

uppercase 把文字变成全大写

lowercase 把文字变成全小写

capitalize 把文字首字母大写

设置文本小型大写字母

字母变大写但缩小字号

font-variant:small-caps;

文本阴影属性

text-shadow:2px 2px 2px red;

h-shadow 必须，水平阴影的位置。允许负值

v-shadow 必须，垂直阴影的位置。允许负值

blur 可选，模糊距离。

color 可选 阴影的颜色。

文本溢出省略

单行文本时溢出省略

1.强制一行内显示文本

   white-space:nowrap;（默认属性为normal 自动换行）

2.超出部分隐藏

   overflow:hidden;

3.文字用省略号替代超出部分

   text-overflow:ellipsis;（ellipsis省略号）

多行文本时溢出省略（兼容性问题较大 适用移动端弹性盒）

   overflow:hidden;
   text-overflow:ellipsis;
   display:-webkit-box;（弹性伸缩盒子模型显示）
   -webkit-line-clamp:2;（限制在一个块元素显示的文本的行数）
   -webkit-box-orient:vertical;(设置或检索伸缩盒对象的子元素的排列方式)

鼠标样式cursor

{cursor:pointer;}

属性

default 小白默认

pointer 小手

move 移动

text 文本

not-allowed 禁止

crosshair加号

wait等待

help帮助

progress过程

inherit继承

ne-resize向上或向右移动