CSS 文字属性和文本属性

CSS 文字属性和文本属性

文字、文本属性单词记忆表

属性单词记忆表

属性	属性意义	主要单词	单词释义
font-family	设置字体	family	系列、家族
font-weight	设置字体粗细	weight	重量
font-size	设置文字大小	size	大小
font-style	设置文字样式	style	风格、样式
text-align	设置文本对齐	align	对齐
text-decoration	设置文本装饰	decoration	装饰
text-indent	设置文本开头缩进	indent	缩进
line-height	设置行高	height	行高
letter-spacing	设置文字间距	letter spacing	字母 间距
word-spacing	设置单词间距	word spacing	单词 间距

---

字体属性👇

👇👇👇👇

font-family

设置字体，可以把多个字体名称作为一个“回退”系统来保存

从左往右的优先级顺序，若浏览器不支持第一个字体，就会尝试下一个，以此类推直到浏览器支持所选择的字体。

示例

body{
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

---

font-weight

设置字体粗细

取值范围

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，700等同于bold
inherit	继承父元素字体的粗细值

示例

body{
  font-weight: bold;   /* 设置粗体 */
}

---

font-size

设置文字大小

示例

p{
	font-size: 20px; /* 设置成20像素大小 */
}

---

font-style

设置文字样式

说到字体样式，斜体就是在这里设置的，这也是大家比较熟悉的一个

color

设置文字颜色

支持三种颜色值：

• 颜色名称，如：teal（茶色）
• 十六进制值，也就是开头是 #号 的值，如： # FFFF00（黄色）
• RGB值，R：red（红色），G：green（绿色），B：blue（蓝色），如：RGB(0, 0, 0)
• RGBA值，R：red（红色），G：green（绿色），B：blue（蓝色），A：alpha（阿尔法值/透明度值）范围：0~1，如：RGBA(5, 255, 0, .8)

示例

p{
	color: teal;
}

---

文本属性👇

👇👇👇👇

text-align

设置文本对齐

text-align属性规定选中元素中的文本 水平对齐 方式

取值范围

值	描述
left	左对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

示例

p{
	text-align: center; 	/* 设置成水平居中对齐 */
}

---

text-decoration

设置文本中的装饰，比如下划线、上划线、删除线

取值范围

值	描述
none	默认, 定义标准的文本
underline	下划线
overline	上划线
line-through	穿过线、删除线
inherit	继承父元素的text-decoration属性的值

---

text-indent

设置文本的开头缩进

如果字体大小为16px，那缩进一个字符就得设置为16px，两个字符为32px，可以使用em单位进行缩进，1em等于当前一个字体大小，em为相对单位。

示例

p{
	text-indent: 2em; /* 开头空两字体大小格 */
}

---

line-height

设置行高

示例

p {
	line-height: 20px;  /* 设置成20px行高 */
}

letter-spacing

设置文字与文字之间的间距

示例

p{
	letter-spacing: 5px;	/* 文字之间间距为5px */
}

---

word-spacing

设置单词与单词之间的间距

示例

p{
	word-spacing: 10px; 	/* 单词之间间距为10px */
}