day4CSS文本属性

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