CSS中常用的文本样式

一、字体样式

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                滚动条