CSS文本属性

1.文字大小 font-size

• a: 文本默认大小：为了减少系统之间的差异，确定16px为标准文字大小

• b：pc端文本大小尽量设置成偶数

• c: PC端文字大小尽量别低于12px

• d：PS中汉字的文本大小，量取文本高度即可（同等字号的英文和数字比汉字显示的要小）

• e: 单位： px pt（磅） em rem

• 9pt == 12px（3：4）

• em 相对大小单位（根据父元素制定 如：父元素font-size:20px; 子元素1em == 20px em默认 1em == 16px）

• rem 相对大小单位（根据html的font-size值 ）

• f：关键字

       xx-small =9px
       x-small =11px
       small =13px
       medium =16px
       large =19px
       x-large =23px
       xx-large =27px
  

-g: 文字的 顶线、基线、中线、底线

2.控制文本颜色 color

a: 16进制表示颜色值

• 0 - 9 a - f
  表示颜色值：
  #3个或者6个16进制字符
  两个字符代表一个颜色
  #ff0000 -> 简写 #f00
  0 最暗的颜色 f最亮的颜色

b: rgb（）模式

            rgb(255,0,0,0.5)  颜色半透明

c: HSL() 饱和度

            HSLA()  a代表透明
            色相、饱和度、亮度

3.设置字体 font-family

默认的字体：“微软雅黑”;

WEB安全字体：设备或者操作系统能识别的字体

设置方法：

• 汉字字体放在引号里面
• 多个英文单词的字体放在引号里面
• 如果一个英文单词的字体，不需要添加引号。
• 如果font-family:;设置多个字体的时候，字体与字体之间用逗号隔开
• 如果出现中文字体和英文字体，先写英文字体再写中文字体。

4.文本加粗 font-weight

• bold 加粗显示

• bolder 更粗的

• normal 不让加粗

-100 - 900 9个等级

5.文本倾斜font-style 属性值

• italic（倾斜的）

• oblique（倾斜的）

• normal（不倾斜）

6.文本的行高line-height

-a：line-height:40px; 让文本在40px 上下居中

• b: ps中量取行高： 从第一行的开始量到第二行的开始。

• c: 让单行文本在容器里面上下的对齐：

• 1》如果line-height等于容器高度，文本居中

• 2》如果line-height大于容器高度，文本向下

• 3》如果line-height小于容器高度，文本向上

• d: 如果单行文本撑开容器高度，文本上下会产生误差（基线、顶线、中线、底线） 容器不设置高，清除单行文字撑开的误差：line-height设置成文字大小。

7.文本大小、行高、字体类型简写font:px/px “字体”

8.控制文本对齐方式text-align:center ;

• left（左）

• center（中）

• right（右）

• justify(两端对齐)

9.文本修饰（控制下划线）

• text-decoration:属性值

• none 清除下划线

• underline 添加下划线

• overline 添加上划线

• line-through 添加删除线

10.首行缩进text-indent:2em

11.字间距、词间距

• letter-spacing:

• word-spacing:

XMind - Trial Version