CSS控制文本样式

1. CSS字体样式属性

（1） font-size：字号大小
font-size属性用于设置字号，属性值可以使用相对长度单位和绝对长度单位。
CSS长度单位

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素（常用）

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

例如：
p{font-size:12px;}

（2）font-family：字体
font-family属性可以同时指定多个字体，中间用逗号隔开。如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
使用该属性需要注意：
① 字体之间应用英文状态下的逗号隔开
②中文字体需要加英文状态下的引号，英文字体一般不需要。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
② 如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号。
③ 尽量使用默认字体，保证在任何用户的默认浏览器中都能正确显示

例如：
p{font-family:”微软雅黑”:}

（3）font-weight：字体粗细
font-weight可用属性

值	描述
normal	默认值，定义的标准字符（常用）
bold	定义粗体字符（常用）
bolder	定义更粗体字符
lighter	定义更细字符
100~900（100的整数倍）	定义由细到粗的字符，其中400等同于normal，700等同于bold,值越大字体越粗

（4） font-variant：变体

用于设置字体（字体变化），一般用于定义小型大写字母，仅对英文字符有效
font-variant可用属性

值	描述
normal	默认值，浏览器会显示标准的字体
small-caps	浏览器会显示小型大写的字体，即所有小写字母会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

（5） font-style：字体风格
font- style可用属性

值	描述
normal	默认值，浏览器会显示标准的字体
italic	浏览器会显示斜体的字体样式
oblique	浏览器会显示倾斜的字体样式

italic和oblique都用于定义斜体，两者在显示效果上没有本质区别，但italic更常用

（6） font：综合设置字体样式

语法格式：
	选择器{font:font-style font-variant font-weight font-size/line-height font-family;}

2.CSS文本外观属性

补充使用HTML可以对文本外观进行简单控制，但效果并不理想的缺陷
（1）color：文本颜色
color属性取值方式：
①预定义的颜色值：red、green、blue……
②十六进制（最常用）：#ff0000、#ff6600……
③RGB代码：红色表示为rgb(255,0,0)或rgb(0%,0%,0%)

（2）letter-spacing：字间距
字间距就是字符与字符之间的空白，属性值为不同单位的数值，允许使用负值，默认值为normal

（3）word-spacing：单词间距
用于定义单词之间的间距，对中文字符无效，属性值为不同单位的数值，允许使用负值，默认值为normal。

• letter-spacing和 word-spacing都可以对英文进行设置。但是letter-spacing定义为字母之间的间距，word-spacing定义为单词之间的间距。

（4）line-height：行间距
行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height属性常用属性值单位：像素px、相对值em、百分比%

（5）text-transform：文本转换
用于转换英文字符大小写
text-transform可用属性值

值	描述
none	不转换（默认值）
capitalize	首字母大写
uppercase	全部字符转换为大写
lowercase	全部字符转换为小写

（6）text-decoration：文本装饰
用于设置文本的下划线、上划线、删除线等效果，效果可以叠加。
text-decoration可用属性值

值	描述
none	没有装饰（正常文本默认值）
underline	下划线
overline	上划线
line-through	删除线

（7）text-aligh：水平对齐方式
用于设置文本内容的水平对齐，相当于html中的align对齐属性。但text-aligh仅适用于块元素。
text-aligh可用属性值

值	描述
left	左对齐（默认）
right	右对齐
center	居中对齐

（8）text-indent：首行缩进
用于首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数（常用）、或相对于浏览器窗口的百分比%，允许使用负值，仅适用于块元素

（9）white-space：空白字符处理
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白；在CSS中，使用white-space属性可设置空白符的处理方式
white-space可用属性

值	描述
normal	常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行
pre	预格式化，按文档的书写格式保留空格、空行还原样显示
nowrap	空格空行无效，强制文本不能换行，除非遇到换行标记 。内容超出元素边界也不换行，若超出浏览器页面则会自动增加滚动条