CSS基础知识——文本样式

字体样式

• font-family 字体格式
• font-size 字体大小
• line-height 行高 【单位建议使用 em/rem】
• font-width 字体粗细
• font-style 字体风格 【italic 文字倾斜】
  简写形式：font：字体格式 字体大小/行高 字体粗细 字体风格

1 .em是相对于元素的字体大小来计算的（即参照自身）
2. rem是相对于根元素的字体大小来计算的（即参照html）

• color 用于设置文字的颜色

设置颜色的三种方式

1. 十六进制法 #ababab
2. rgb(0,0,255)
3. rgba(0,0,255,0.5) 【0.5是透明度，透明度的取值范围是0-1】

字符转换的几种方式

• font-variant : small-caps； 小型大写
• text-transform : uppercase； 大写【lowercase 小写，capitalize 首字母大写】

文本线条的控制

• text-decoration 【可选值：underline 下划线，overline 上划线，line-through 删除线，none 取消线条】

文本阴影处理方法

• text-shadow : 2px 2px 2px red；分别代表：右偏移量 下偏移量 模糊半径 颜色

文本溢出与空白处理技巧

空白处理：

• white-space 【可选值：pre，pre-wrap，pre-line 保留换行符但不保留空格，nowrap 禁止换行】
• 使用<pre></pre>标签

溢出处理：

<style>
	div{
		border:1px soild #ddd;
		width:300px;
		whith-space:nowrap; <!--禁止换行-->
		overflow:hidden; <!--溢出文本隐藏-->
		text-overflow:ellipsis; <!--省略号代替被省略的部分-->
	}
</style>

• overflow 【scroll，auto，hidden，visible默认值】
• text-overflow 【clip 剪切，ellipsis 省略号】

文本对齐与缩进

• text-indent：2em；缩进
• text-align 【center 居中，left 左对齐，right 右对齐】水平对齐方式
• vertical-align 【top，bottom，center】 垂直对齐方式

排版模式

• writing-mode 【vertical-lr 竖排，从左到右，horizontal-tb横排，从上到下】
• letter-spacing 字符间距
• word-spacing 单词间距（用空格或标点符号隔开的）